:root {
  --app-blue: #4ca7ff;
  --app-green: #5ecf9a;
  --app-bg: #f4fbff;
  --app-text: #1f2937;
  --app-sidebar-width: 280px;
  --app-topbar-height: 76px;
}

.appointment-calendar-page { --calendar-border: #e2e8f0; --calendar-muted: #64748b; }
.appointment-calendar-shell { padding: clamp(.75rem, 2vw, 1.25rem); overflow: hidden; }
.appointment-calendar-filters { margin-bottom: 1rem; }
.appointment-calendar-filter-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.appointment-filter-toggle { display: none; margin-bottom: .75rem; }
.appointment-calendar-toolbar { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.appointment-calendar-title { margin: 0; text-align: center; font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 850; }
.appointment-view-switcher .btn[aria-pressed="true"] { color: #fff; background: var(--bs-primary); border-color: var(--bs-primary); }
.appointment-calendar-loading { margin-bottom: .5rem; color: var(--calendar-muted); text-align: center; }
#appointmentCalendar { min-height: 650px; }
#appointmentCalendar .fc { --fc-border-color: var(--calendar-border); --fc-button-bg-color: var(--bs-primary); --fc-button-border-color: var(--bs-primary); --fc-today-bg-color: rgba(var(--bs-primary-rgb), .055); }
#appointmentCalendar .fc-scrollgrid { border-radius: 14px; overflow: hidden; }
#appointmentCalendar .fc-col-header-cell-cushion,
#appointmentCalendar .fc-daygrid-day-number { color: #0f172a; text-decoration: none; font-weight: 750; }
#appointmentCalendar .fc-timegrid-slot-label-cushion { color: var(--calendar-muted); font-size: .78rem; }
#appointmentCalendar .fc-event { border-width: 0 0 0 4px; border-radius: 7px; box-shadow: 0 3px 9px rgba(15,23,42,.14); cursor: pointer; }
[dir="rtl"] #appointmentCalendar .fc-event { border-width: 0 4px 0 0; }
#appointmentCalendar .appointment-status-pending { color: #713f12; border-color: #f59e0b; background: #fef3c7; }
#appointmentCalendar .appointment-status-confirmed { color: #14532d; border-color: #22c55e; background: #dcfce7; }
#appointmentCalendar .appointment-status-completed { color: #1e3a8a; border-color: #3b82f6; background: #dbeafe; }
#appointmentCalendar .appointment-status-cancelled { color: #475569; border-color: #94a3b8; background: #e2e8f0; opacity: .72; }
.appointment-event-content { min-width: 0; display: grid; gap: .08rem; padding: .2rem .3rem; line-height: 1.18; }
.appointment-event-content strong,
.appointment-event-content span,
.appointment-event-content small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appointment-event-content small { font-weight: 650; }
.appointment-event-status { margin-top: .12rem; font-size: .67rem; font-weight: 750; }
.appointment-details-kicker { display: block; margin-bottom: .15rem; color: var(--calendar-muted); font-size: .8rem; font-weight: 700; }
.appointment-details-list { display: grid; gap: 0; margin: 0; }
.appointment-details-list > div { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 1fr); gap: 1rem; padding-block: .7rem; border-bottom: 1px solid #eef2f7; }
.appointment-details-list dt { color: var(--calendar-muted); font-weight: 650; }
.appointment-details-list dd { margin: 0; overflow-wrap: anywhere; font-weight: 750; }

@media (max-width: 991.98px) {
  .appointment-calendar-filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-calendar-toolbar { grid-template-columns: auto minmax(0, 1fr); }
  .appointment-view-switcher { grid-column: 1 / -1; justify-self: stretch; }
  .appointment-view-switcher .btn { flex: 1 1 0; }
}


@media (max-width: 575.98px) {
  .appointment-filter-toggle { display: inline-flex; }
  .appointment-calendar-filter-fields { grid-template-columns: minmax(0, 1fr); }
  .appointment-calendar-toolbar { grid-template-columns: minmax(0, 1fr); }
  .calendar-navigation,
  .appointment-view-switcher { width: 100%; }
  .calendar-navigation .btn,
  .appointment-view-switcher .btn { flex: 1 1 0; min-width: 0; padding-inline: .35rem; font-size: .78rem; }
  .appointment-calendar-title { grid-row: 1; }
  #appointmentCalendar { min-height: 560px; overflow-x: auto; }
  #appointmentCalendar .fc-view-harness { min-width: 580px; }
  #appointmentCalendar .fc-dayGridMonth-view { min-width: 0; }
  .appointment-details-list > div { grid-template-columns: minmax(90px, .7fr) minmax(0, 1fr); gap: .6rem; }
}

html {
  position: relative;
  min-height: 100%;
  font-size: 15px;
}

body {
  margin-bottom: 70px;
  font-family: "Cairo", sans-serif;
  background: linear-gradient(150deg, #eef8ff 0%, #f3fff9 100%);
  color: var(--app-text);
}

.has-side-menu {
  overflow-x: clip;
}

.app-navbar {
  position: relative;
  z-index: 1030;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #dbeafe;
}

.app-navbar .dropdown-menu {
  z-index: 1031;
  max-width: min(320px, calc(100vw - 2rem));
}

.app-navbar-shell,
.app-navbar .navbar-collapse,
.app-nav-links,
.app-login-wrap,
.side-topbar,
.side-topbar-brand,
.side-topbar-actions,
.side-menu-link,
.dashboard-quick-link,
.dashboard-settings-link {
  min-width: 0;
}

.navigation-mode-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .45rem;
  max-width: 100%;
}

.navigation-mode-form .form-select {
  min-width: 0;
  max-width: 100%;
  border-color: #dbeafe;
  font-weight: 700;
  text-overflow: ellipsis;
}

.has-side-menu {
  padding-top: var(--app-topbar-height);
}

.side-topbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 1030;
  min-height: var(--app-topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #dbeafe;
}

.side-topbar-brand,
.side-topbar-actions,
.app-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.side-topbar-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  min-width: 280px;
}

.side-topbar .navbar-nav {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .65rem;
}

.side-topbar .nav-link {
  padding: .35rem .45rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.app-brand {
  color: #102033;
  text-decoration: none;
  min-width: 0;
}

.app-brand:hover {
  color: #102033;
}

.app-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--app-blue), var(--app-green));
  box-shadow: 0 10px 22px rgba(76, 167, 255, .18);
}

.app-brand strong,
.app-brand small {
  display: block;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.app-brand small {
  color: #64748b;
  font-size: .78rem;
  font-weight: 700;
}

.app-sidebar {
  position: fixed;
  top: var(--app-topbar-height);
  bottom: 0;
  left: 0;
  right: auto;
  z-index: 1029;
  width: var(--app-sidebar-width);
  padding: 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(255, 255, 255, .94);
  border-inline-end: 1px solid #dbeafe;
  pointer-events: auto;
}

.app-rtl .app-sidebar,
[dir="rtl"] .app-sidebar {
  left: auto;
  right: 0;
  border-inline-end: 0;
  border-inline-start: 1px solid #dbeafe;
  text-align: right;
}

.app-ltr .app-sidebar,
[dir="ltr"] .app-sidebar {
  left: 0;
  right: auto;
  border-inline-start: 0;
  border-inline-end: 1px solid #dbeafe;
  text-align: left;
}

.has-side-menu .app-page-container,
.has-side-menu .footer .container {
  max-width: none;
  width: auto;
  margin-left: var(--app-sidebar-width);
  margin-right: 0;
  padding-inline: 1.25rem;
}

.app-rtl.has-side-menu .app-page-container,
.app-rtl.has-side-menu .footer .container,
[dir="rtl"] .has-side-menu .app-page-container,
[dir="rtl"] .has-side-menu .footer .container {
  margin-left: 0;
  margin-right: var(--app-sidebar-width);
}

.app-ltr.has-side-menu .app-page-container,
.app-ltr.has-side-menu .footer .container,
[dir="ltr"] .has-side-menu .app-page-container,
[dir="ltr"] .has-side-menu .footer .container {
  margin-left: var(--app-sidebar-width);
  margin-right: 0;
}

.side-menu-links {
  display: grid;
  gap: .35rem;
}

.side-menu-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .7rem .85rem;
  border: 0;
  border-radius: 8px;
  color: #334155;
  background: transparent;
  text-align: start;
  text-decoration: none;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
  pointer-events: auto;
}

.side-menu-link i {
  width: 1.2rem;
  text-align: center;
  color: #0f548d;
}

.side-menu-link:hover,
.side-menu-link.active {
  color: #0f548d;
  background: #eaf6ff;
}

.side-menu-link.active {
  box-shadow: inset 3px 0 0 var(--app-blue);
}

[dir="rtl"] .side-menu-link.active {
  box-shadow: inset -3px 0 0 var(--app-blue);
}

.side-menu-group-toggle {
  justify-content: space-between;
}

.side-menu-group-toggle span {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
}

.side-menu-child {
  min-height: 40px;
  padding-inline-start: 2.4rem;
  font-size: .94rem;
}

[dir="rtl"] .side-menu-child {
  padding-inline-start: .85rem;
  padding-inline-end: 2.4rem;
}

.app-side-offcanvas {
  width: min(86vw, 320px);
}

.app-rtl .app-side-offcanvas {
  text-align: right;
}

.app-ltr .app-side-offcanvas {
  text-align: left;
}

.app-side-offcanvas .offcanvas-body {
  padding-top: .25rem;
}
.navbar .nav-link,
.navbar-brand,
.btn,
.feature-card,
.gateway-card,
.table-card,
.form-card {
  transition: all .25s ease;
}

.navbar .nav-link {
  color: #334155;
  font-weight: 600;
}

.navbar .nav-link:hover {
  color: var(--app-blue);
}

.hero-card,
.feature-card,
.gateway-card,
.table-card,
.form-card {
  background: #ffffff;
  border: 1px solid #e6f0ff;
  border-radius: 22px;
  padding: 1.5rem;
}

.hero-icon,
.feature-icon,
.gateway-icon {
  color: var(--app-blue);
}

.hero-icon {
  font-size: 3.5rem;
}

.feature-icon {
  font-size: 2.4rem;
}

.gateway-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #e0f2ff, #d5ffe7);
}

.gateway-icon {
  font-size: 2rem;
}

.feature-card:hover,
.gateway-card:hover,
.hero-card:hover {
  transform: translateY(-3px);
  border-color: #c7e3ff;
}

.home-landing {
  --home-ink: #10243a;
  --home-muted: #5b6b7f;
  --home-border: #dceaf4;
  display: grid;
  gap: clamp(3.5rem, 8vw, 6.5rem);
  padding-block: 1rem 3rem;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: stretch;
}

.home-hero-content,
.home-connection-panel,
.home-capability-card,
.home-story,
.home-detail-card {
  border: 1px solid var(--home-border);
  border-radius: 24px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 20px 55px rgba(31, 66, 99, .07);
}

.home-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4.75rem);
}

.home-kicker,
.home-story-kicker,
.home-section-heading > span,
.home-final-cta > div > span {
  color: #176894;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.home-kicker {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: #e9f6fb;
}

.home-brand {
  margin: 1.6rem 0 .35rem;
  color: #23805c;
  font-size: 1rem;
  font-weight: 800;
}

.home-hero h1 {
  max-width: 780px;
  margin: 0;
  color: var(--home-ink);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.035em;
}

[dir="rtl"] .home-hero h1 {
  letter-spacing: 0;
}

.home-hero-description {
  max-width: 720px;
  margin: 1.25rem 0 1.75rem;
  color: var(--home-muted);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.9;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.home-actions .btn,
.home-final-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
}

.home-connection-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: #f6fbfd;
}

.home-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #176894;
  font-weight: 800;
}

.home-panel-heading i {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(31, 66, 99, .08);
  font-size: 1.25rem;
}

.home-connection-panel h2,
.home-story h2,
.home-section-heading h2,
.home-final-cta h2 {
  color: var(--home-ink);
  font-weight: 800;
  letter-spacing: -.025em;
}

[dir="rtl"] .home-connection-panel h2,
[dir="rtl"] .home-story h2,
[dir="rtl"] .home-section-heading h2,
[dir="rtl"] .home-final-cta h2 {
  letter-spacing: 0;
}

.home-connection-panel h2 {
  margin: 0 0 .75rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.35;
}

.home-connection-panel p,
.home-story p,
.home-section-heading p,
.home-capability-card p,
.home-detail-card p,
.home-final-cta p {
  margin: 0;
  color: var(--home-muted);
  line-height: 1.75;
}

.home-connection-flow {
  display: grid;
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-connection-flow li {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 54px;
  padding: .7rem .85rem;
  border: 1px solid #e2edf3;
  border-radius: 15px;
  background: #fff;
  color: #294157;
  font-weight: 700;
}

.home-connection-flow li:not(:last-child)::after {
  position: absolute;
  inset-block-end: -.72rem;
  inset-inline-start: 1.55rem;
  width: 2px;
  height: .72rem;
  background: #badbcd;
  content: "";
}

.home-connection-flow i {
  color: #23805c;
  font-size: 1.15rem;
}

.home-section {
  scroll-margin-top: 6rem;
}

.home-section-heading {
  max-width: 760px;
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

.home-section-heading h2 {
  margin: .55rem 0 .75rem;
  font-size: clamp(1.9rem, 4vw, 3rem);
}

.home-section-heading-compact {
  max-width: 690px;
}

.home-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.home-capability-card {
  padding: 1.5rem;
}

.home-capability-card > i,
.home-detail-card > i {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  background: #e9f6fb;
  color: #176894;
  font-size: 1.3rem;
}

.home-capability-card:nth-child(even) > i,
.home-detail-card:nth-child(even) > i {
  background: #eaf8f1;
  color: #23805c;
}

.home-capability-card h3,
.home-detail-card h3 {
  margin: 1rem 0 .45rem;
  color: var(--home-ink);
  font-size: 1.08rem;
  font-weight: 800;
}

.home-story {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(1.75rem, 5vw, 3.5rem);
}

.home-story-store {
  background: #f7fbff;
}

.home-story-fulfillment {
  background: #f5fcf8;
}

.home-story h2 {
  margin: .55rem 0 .8rem;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.home-story-list {
  display: grid;
  gap: .75rem;
}

.home-story-list > div {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem;
  border: 1px solid var(--home-border);
  border-radius: 16px;
  background: #fff;
  color: #294157;
  font-weight: 700;
}

.home-story-list i {
  color: #23805c;
  font-size: 1.2rem;
}

.home-dual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.home-detail-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.35rem;
  box-shadow: none;
}

.home-detail-card h3 {
  margin-top: 0;
}

.home-final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.75rem, 5vw, 3rem);
  border-radius: 24px;
  background: #153b50;
  box-shadow: 0 22px 55px rgba(20, 59, 80, .18);
}

.home-final-cta > div > span,
.home-final-cta h2,
.home-final-cta p {
  color: #fff;
}

.home-final-cta h2 {
  margin: .45rem 0 .5rem;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
}

.home-final-cta p {
  max-width: 680px;
  color: #d7e7ef;
}

.home-final-cta .btn {
  flex: 0 0 auto;
  color: #153b50;
  font-weight: 800;
}

@media (max-width: 991.98px) {
  .home-hero,
  .home-story {
    grid-template-columns: 1fr;
  }

  .home-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .home-landing {
    gap: 3.5rem;
  }

  .home-final-cta {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 575.98px) {
  .home-hero-content,
  .home-connection-panel,
  .home-capability-card,
  .home-story,
  .home-detail-card,
  .home-final-cta {
    border-radius: 18px;
  }

  .home-hero h1 {
    font-size: clamp(2.15rem, 12vw, 3.2rem);
  }

  .home-actions .btn,
  .home-final-cta .btn {
    width: 100%;
  }

  .home-capability-grid,
  .home-dual-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-landing *,
  .home-landing *::before,
  .home-landing *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

.login-page {
  --login-ink: #10243a;
  --login-muted: #5b6b7f;
  --login-border: #dceaf4;
  width: min(100%, 1080px);
  min-height: calc(100vh - 180px);
  margin-inline: auto;
  padding-block: 1rem 3rem;
}

.login-back-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-block-end: 1rem;
  color: #426179;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}

.login-back-link:hover,
.login-back-link:focus-visible,
.login-forgot-link:hover,
.login-forgot-link:focus-visible {
  color: #0f548d;
}

.login-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--login-border);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 24px 65px rgba(31, 66, 99, .09);
}

.login-brand-section,
.login-form-section {
  min-width: 0;
  padding: clamp(2rem, 5vw, 4rem);
}

.login-brand-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(145deg, #edf8fc, #effaf4);
}

.login-brand-name,
.login-form-kicker {
  color: #23805c;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.login-brand-section h1 {
  margin: .85rem 0 1rem;
  color: var(--login-ink);
  font-size: clamp(2rem, 4vw, 3.3rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.03em;
}

[dir="rtl"] .login-brand-section h1 {
  letter-spacing: 0;
}

.login-brand-section > p {
  margin: 0;
  color: var(--login-muted);
  font-size: 1rem;
  line-height: 1.85;
}

.login-benefit-list {
  display: grid;
  gap: .75rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.login-benefit-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  color: #294157;
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.55;
}

.login-benefit-list i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #d9ece4;
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  color: #23805c;
}

.login-form-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
}

.login-form-heading {
  margin-block-end: 1.75rem;
}

.login-form-heading h2 {
  margin: .45rem 0 .45rem;
  color: var(--login-ink);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 800;
}

.login-form-heading p,
.login-account-help {
  margin: 0;
  color: var(--login-muted);
  line-height: 1.7;
}

.login-form-section .form-label {
  color: #263d52;
  font-weight: 700;
}

.login-form-section .form-control {
  min-height: 50px;
  border-color: #d8e4ed;
  border-radius: 13px;
  background: #fbfdff;
}

.login-form-section .form-control:focus {
  border-color: #75baf4;
  background: #fff;
  box-shadow: 0 0 0 .2rem rgba(76, 167, 255, .14);
}

.login-password-field {
  position: relative;
}

.login-password-field .form-control {
  padding-inline-end: 3.35rem;
}

.login-password-toggle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: .4rem;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #526b80;
}

.login-password-toggle:hover {
  background: #edf7fc;
  color: #176894;
}

.login-password-toggle:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(76, 167, 255, .24);
}

.login-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  flex-wrap: wrap;
  margin-block: .4rem 1.5rem;
}

.login-form-options .form-check {
  margin: 0;
}

.login-forgot-link {
  color: #176894;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}

.login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  min-height: 50px;
  border-radius: 13px;
  font-weight: 800;
}

.login-account-help {
  margin-block-start: 1.25rem;
  font-size: .88rem;
  text-align: center;
}

@media (max-width: 991.98px) {
  .login-brand-section,
  .login-form-section {
    padding: 2rem;
  }

  .login-brand-section h1 {
    font-size: clamp(1.8rem, 4vw, 2.45rem);
  }
}

@media (max-width: 767.98px) {
  .login-page {
    min-height: auto;
    padding-block-start: 0;
  }

  .login-panel {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 20px;
  }

  .login-form-section {
    order: -1;
  }

  .login-brand-section h1 {
    margin-block: .65rem .75rem;
  }

  .login-benefit-list {
    margin-block-start: 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .login-brand-section,
  .login-form-section {
    padding: 1.5rem;
  }

  .login-brand-section h1 {
    font-size: 1.65rem;
  }

  .login-form-options {
    align-items: flex-start;
    flex-direction: column;
  }
}

.btn-primary {
  background: linear-gradient(135deg, var(--app-blue), var(--app-green));
  border: none;
}

.btn-outline-primary {
  border-color: var(--app-blue);
  color: var(--app-blue);
}

.btn-outline-primary:hover {
  background-color: #e6f3ff;
  color: #0f548d;
}

.form-control:focus,
.form-check-input:focus,
.btn:focus,
.btn:active:focus {
  box-shadow: 0 0 0 0.15rem rgba(76, 167, 255, 0.28);
  border-color: #9cd1ff;
}

.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single {
  min-height: 38px;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 36px;
  padding-inline: .75rem 2rem;
  color: #212529;
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  left: .5rem;
  right: auto;
  height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  float: left;
  margin-left: 1.6rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: #9cd1ff;
  box-shadow: 0 0 0 0.15rem rgba(76, 167, 255, 0.28);
}

.select2-dropdown {
  border-color: #dbeafe;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  line-height: 60px;
  border-top: 1px solid #dbeafe;
  background: rgba(255, 255, 255, 0.7);
}


.invoice-color-preview {
  display: grid;
  gap: .65rem;
  padding: 1rem;
  border: 1px solid #e6f0ff;
  border-radius: 16px;
  background: #fff;
}

.invoice-color-preview div {
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--preview-color), color-mix(in srgb, var(--preview-color) 72%, #111827));
}

.invoice-color-preview strong {
  color: var(--preview-color);
}

.invoice-color-preview span {
  color: #64748b;
  font-size: .9rem;
  line-height: 1.6;
}

.company-profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #dbeafe;
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .04);
}

.company-profile-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem;
  margin-bottom: .75rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #0f548d;
  font-size: .85rem;
  font-weight: 800;
}

.company-profile-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 1rem;
  align-items: start;
}

.company-profile-menu,
.company-profile-preview {
  position: sticky;
  top: 1rem;
}

.company-profile-menu-title {
  margin-bottom: .75rem;
  color: #64748b;
  font-size: .85rem;
  font-weight: 800;
}

.company-profile-menu .nav {
  display: grid;
  gap: .5rem;
}

.company-profile-menu .nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .7rem;
  min-height: 48px;
  padding: .75rem .85rem;
  border: 1px solid #e6f0ff;
  border-radius: 14px;
  background: #fff;
  color: #334155;
  font-weight: 800;
  text-align: right;
}

.company-profile-menu .nav-link i {
  width: 1.2rem;
  color: #0f548d;
  text-align: center;
}

.company-profile-menu .nav-link.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--app-blue), var(--app-green));
  color: #fff;
}

.company-profile-menu .nav-link.active i {
  color: #fff;
}

.company-profile-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e6f0ff;
}

.company-profile-section-head h2 {
  margin: 0 0 .35rem;
  color: #0f172a;
  font-size: 1.2rem;
  font-weight: 800;
}

.company-profile-section-head p {
  margin: 0;
  color: #64748b;
  line-height: 1.7;
}

.company-profile-section-head > i {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(76, 167, 255, .16), rgba(94, 207, 154, .22));
  color: #0f548d;
  font-size: 1.2rem;
}

.invoice-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .75rem;
}

.invoice-template-option {
  display: block;
  cursor: pointer;
}

.invoice-template-option > span {
  display: grid;
  gap: .45rem;
  min-height: 150px;
  padding: 1rem;
  border: 2px solid #e6f0ff;
  border-radius: 16px;
  background: #fff;
  color: #334155;
  transition: all .2s ease;
}

.invoice-template-option i {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: .9rem;
  background: #eff6ff;
  color: #0f548d;
  font-size: 1.2rem;
}

.invoice-template-option strong {
  color: #0f172a;
  font-size: 1rem;
}

.invoice-template-option small {
  color: #64748b;
  line-height: 1.6;
}

.invoice-template-option .btn-check:checked + span {
  border-color: var(--app-blue);
  background: linear-gradient(145deg, #eef8ff, #f1fff9);
  box-shadow: 0 10px 24px rgba(76, 167, 255, .12);
}

.company-profile-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e6f0ff;
}

.invoice-layout-editor {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(300px, 1.05fr);
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  background: #f8fcff;
}

.invoice-layout-tools {
  display: grid;
  gap: 1rem;
}

.invoice-layout-switches {
  display: grid;
  gap: .5rem;
  padding: .85rem;
  border: 1px solid #e6f0ff;
  border-radius: 14px;
  background: #fff;
}

.invoice-service-category-tools {
  display: grid;
  gap: .75rem;
  padding: .85rem;
  border: 1px solid #e6f0ff;
  border-radius: 14px;
  background: #fff;
}

.invoice-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.invoice-category-choice {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: .45rem .7rem;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: #f8fcff;
  color: #334155;
  font-weight: 800;
  cursor: pointer;
}

.invoice-category-designer {
  display: grid;
  gap: .75rem;
}

.invoice-category-designer-card {
  display: grid;
  gap: .85rem;
  padding: .85rem;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #f8fcff;
}

.invoice-category-designer-card.is-dragging {
  opacity: .55;
  border-style: dashed;
}

.invoice-category-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 76px;
  gap: .6rem;
  align-items: center;
}

.invoice-category-drag {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #fff;
  color: #64748b;
  cursor: grab;
}

.invoice-category-sort {
  text-align: center;
}

.invoice-category-flags {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  padding-top: 1.8rem;
}

.invoice-layout-preview {
  --custom-bg: #fff;
  --custom-text: #1f2937;
  --custom-table-head: #f8fafc;
  --custom-border: #e2e8f0;
  display: grid;
  gap: .75rem;
  min-height: 500px;
  padding: 1rem;
  border: 1px solid var(--custom-border);
  border-radius: 14px;
  background: var(--custom-bg);
  color: var(--custom-text);
  box-shadow: 0 16px 32px rgba(15, 23, 42, .06);
}

.invoice-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--custom-border);
}

.invoice-preview-logo {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--custom-border);
  border-radius: 12px;
  background: #fff;
  color: #64748b;
  font-weight: 800;
}

.invoice-preview-company,
.invoice-preview-doc {
  display: grid;
  gap: .25rem;
}

.invoice-preview-company strong,
.invoice-preview-doc strong,
.invoice-preview-summary strong {
  color: inherit;
  font-weight: 800;
}

.invoice-preview-company span,
.invoice-preview-doc span,
.invoice-preview-party span {
  color: color-mix(in srgb, var(--custom-text) 70%, #94a3b8);
  font-size: .86rem;
}

.invoice-preview-category {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-inline-start: .35rem;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--custom-table-head) 70%, #fff);
  border: 1px solid var(--custom-border);
  color: color-mix(in srgb, var(--custom-text) 78%, #64748b);
  font-size: .76rem;
  font-weight: 800;
}

.invoice-preview-category[data-display="inline"],
.invoice-preview-category[data-display="muted"] {
  display: block;
  margin: .2rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.invoice-preview-category[data-display="muted"] {
  color: #94a3b8;
  font-weight: 700;
}

.invoice-preview-category-section,
.invoice-preview-category-table,
.invoice-preview-category-checks {
  display: grid;
  gap: .45rem;
  padding: .7rem;
  border-top: 1px solid var(--custom-border);
}

.invoice-preview-category-section strong,
.invoice-preview-category-title,
.invoice-preview-category-checks strong {
  color: var(--custom-text);
  font-weight: 800;
}

.invoice-preview-category-table {
  padding: 0;
}

.invoice-preview-category-title {
  padding: .65rem .7rem;
  background: color-mix(in srgb, var(--custom-table-head) 80%, #fff);
}

.invoice-preview-category-checks label {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--custom-text);
}

.invoice-preview-category-checks small {
  margin-inline-start: auto;
  color: color-mix(in srgb, var(--custom-text) 68%, #94a3b8);
  font-weight: 800;
}

.invoice-preview-party,
.invoice-preview-payments,
.invoice-preview-terms,
.invoice-preview-signatures {
  padding: .75rem;
  border: 1px solid var(--custom-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--custom-bg) 86%, #f8fafc);
}

.invoice-preview-party {
  display: grid;
  gap: .25rem;
}

.invoice-preview-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--custom-border);
  border-radius: 12px;
}

.invoice-preview-table-head,
.invoice-preview-row {
  display: grid;
  grid-template-columns: 1.4fr .7fr .7fr .8fr;
  gap: .5rem;
  padding: .7rem;
}

.invoice-preview-table-head {
  background: var(--custom-table-head);
  font-weight: 800;
}

.invoice-preview-row {
  border-top: 1px solid var(--custom-border);
}

.invoice-layout-preview[data-table-style="boxed"] .invoice-preview-row span,
.invoice-layout-preview[data-table-style="boxed"] .invoice-preview-table-head span {
  padding: .45rem;
  border: 1px solid var(--custom-border);
  border-radius: 8px;
}

.invoice-layout-preview[data-table-style="cards"] .invoice-preview-table {
  border: none;
  gap: .5rem;
}

.invoice-layout-preview[data-table-style="cards"] .invoice-preview-table-head {
  border: 1px solid var(--custom-border);
  border-radius: 12px;
}

.invoice-layout-preview[data-table-style="cards"] .invoice-preview-row {
  border: 1px solid var(--custom-border);
  border-radius: 12px;
}

.invoice-preview-summary {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-width: 220px;
  padding: .75rem;
  border: 1px solid var(--custom-border);
  border-radius: 12px;
  background: var(--custom-table-head);
}

.invoice-preview-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.invoice-preview-signatures span {
  padding-top: 1.6rem;
  border-top: 1px solid var(--custom-border);
}

.invoice-layout-preview[data-section-order="itemsFirst"] .invoice-preview-table {
  order: -1;
}

.invoice-layout-preview[data-section-order="summaryFirst"] .invoice-preview-summary {
  order: -2;
}

.settings-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #dbeafe;
  border-radius: 22px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .04);
}

.settings-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem;
  margin-bottom: .75rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #0f548d;
  font-size: .85rem;
  font-weight: 800;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.settings-card {
  display: grid;
  gap: .55rem;
  min-height: 180px;
  padding: 1.2rem;
  text-decoration: none;
  color: inherit;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #e6f0ff;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .04);
}

.settings-card:hover {
  color: inherit;
  transform: translateY(-2px);
  border-color: #bfdbfe;
}

.settings-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(76, 167, 255, .16), rgba(94, 207, 154, .22));
  color: #0f548d;
  font-size: 1.2rem;
}

.settings-title {
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 800;
}

.settings-desc {
  color: #64748b;
  line-height: 1.7;
}

.password-control-row {
  display: flex;
  align-items: stretch;
  gap: .65rem;
  flex-wrap: wrap;
}

.password-input-group {
  flex: 1 1 18rem;
}

.password-toggle-button {
  min-width: 46px;
}

.password-generate-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.password-meter {
  padding: .9rem;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: linear-gradient(145deg, #f8fcff, #f2fff8);
}

.password-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .6rem;
  color: #334155;
  font-size: .88rem;
  font-weight: 800;
}

.password-meter-head strong {
  flex: 0 0 auto;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: #fff;
  color: #0f548d;
  border: 1px solid #dbeafe;
  font-size: .78rem;
}

.password-meter-track {
  height: .5rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e5eefb;
}

.password-meter-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #ef4444;
  transition: width .2s ease, background-color .2s ease;
}

.password-meter-fill[data-level="medium"] {
  background: #f59e0b;
}

.password-meter-fill[data-level="strong"] {
  background: linear-gradient(135deg, var(--app-blue), var(--app-green));
}

.password-meter-summary {
  margin-top: .65rem;
  color: #475569;
  font-size: .84rem;
  line-height: 1.7;
}

.password-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .75rem;
}

.password-rule-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: .5rem .65rem;
  border: 1px solid #e6f0ff;
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  color: #64748b;
  font-size: .82rem;
  font-weight: 700;
  transition: all .2s ease;
}

.password-rule-item i {
  flex: 0 0 auto;
  font-size: 1rem;
}

.password-rule-item.is-complete {
  color: #157347;
  border-color: #b7ebce;
  background: #f0fff6;
}

.password-rule-item.is-complete span {
  text-decoration: line-through;
}

.password-rule-item.is-missing i {
  color: #94a3b8;
}

.app-page-container {
  width: min(100%, 1400px);
}

.app-navbar-shell {
  gap: 1rem;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  color: #0f172a;
}

.app-brand:hover {
  color: #0f548d;
}

.app-brand span {
  display: grid;
  gap: .1rem;
}

.app-brand small {
  color: #64748b;
  font-size: .78rem;
  font-weight: 700;
}

.app-brand-mark {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(76, 167, 255, .18), rgba(94, 207, 154, .24));
  color: #0f548d;
  font-size: 1.15rem;
}

.app-navbar-toggler {
  border-radius: 1rem;
  border-color: #dbeafe;
  padding: .55rem .8rem;
}

.app-nav-links {
  gap: .35rem;
  align-items: center;
  flex-wrap: wrap;
}

.app-nav-links .nav-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  padding: .62rem .82rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.app-nav-links .nav-link i,
.app-dropdown-menu .dropdown-item i {
  width: 1rem;
  text-align: center;
}

.app-nav-links .nav-link:hover,
.app-nav-links .nav-link:focus-visible,
.app-nav-links .show > .nav-link {
  background: #eef7ff;
}

.app-login-wrap {
  margin-inline-start: auto;
  min-width: min(100%, 260px);
}

.app-dropdown-menu {
  min-width: 220px;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  padding: .55rem;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
}

.app-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  border-radius: 12px;
  padding: .7rem .9rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dashboard-hero,
.reports-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(236, 253, 245, .95));
  border: 1px solid #dbeafe;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .05);
}

.dashboard-hero p,
.reports-hero p {
  max-width: 760px;
}

.dashboard-kicker,
.reports-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #0f548d;
  font-size: .85rem;
  font-weight: 800;
  margin-bottom: .75rem;
}

.dashboard-actions,
.reports-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.dashboard-stats,
.reports-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.dashboard-stat,
.reports-summary-card {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 1.2rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #e6f0ff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .04);
}

.dashboard-stat-label,
.reports-summary-label {
  color: #64748b;
  font-size: .88rem;
  font-weight: 700;
}

.dashboard-stat-value,
.reports-summary-value {
  margin-top: .5rem;
  color: #0f172a;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 800;
}

.dashboard-stat-note,
.reports-summary-note {
  margin-top: .35rem;
  color: #64748b;
  font-size: .86rem;
}

.dashboard-stat-icon,
.reports-summary-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  display: grid;
  place-items: center;
  margin-bottom: .75rem;
  background: #eff6ff;
  color: #0f548d;
  font-size: 1.2rem;
}

.reports-dataset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .9rem;
  margin-bottom: 1rem;
}

.reports-dataset-card {
  display: grid;
  gap: .45rem;
  text-decoration: none;
  color: inherit;
  padding: 1rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #e6f0ff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .04);
}

.reports-dataset-card:hover {
  transform: translateY(-2px);
  border-color: #bfdbfe;
}

.reports-dataset-card.is-active {
  background: linear-gradient(145deg, #eef8ff, #f1fff9);
  border-color: #93c5fd;
}

.reports-dataset-icon {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: .95rem;
  background: #eff6ff;
  color: #0f548d;
  font-size: 1.15rem;
}

.reports-dataset-title {
  font-weight: 800;
  color: #0f172a;
}

.reports-dataset-desc {
  color: #64748b;
  font-size: .88rem;
  line-height: 1.7;
}

.reports-table-card,
.dashboard-gateways {
  padding: 1.1rem;
}

.reports-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.dashboard-grid.collapse:not(.show) {
  display: none;
}

.dashboard-grid.collapse.show {
  display: grid;
}

.app-page-container main:has(> .dashboard-hero) {
  display: flex;
  flex-direction: column;
}

.app-page-container main:has(> .dashboard-hero) > .dashboard-hero {
  order: 1;
}

.app-page-container main:has(> .dashboard-hero) > .dashboard-stats {
  order: 2;
}

.app-page-container main:has(> .dashboard-hero) > .inventory-alerts {
  order: 3;
}

.app-page-container main:has(> .dashboard-hero) > .dashboard-quick-links {
  order: 4;
}

.app-page-container main:has(> .dashboard-hero) > .dashboard-quick-settings {
  order: 5;
}

.app-page-container main:has(> .dashboard-hero) > .dashboard-gateways {
  order: 6;
}

.dashboard-quick-links {
  padding: 1.1rem;
  margin-bottom: 1rem;
}

.dashboard-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dashboard-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
}

.dashboard-quick-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  min-height: 96px;
  padding: .95rem;
  color: inherit;
  text-decoration: none;
  border: 1px solid #e6f0ff;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .035);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.dashboard-quick-link:hover,
.dashboard-quick-link:focus-visible {
  color: inherit;
  transform: translateY(-2px);
  border-color: #bfdbfe;
  box-shadow: 0 16px 30px rgba(15, 23, 42, .06);
}

.dashboard-quick-icon {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: .95rem;
  background: #eff6ff;
  color: #0f548d;
  font-size: 1.15rem;
}

.dashboard-quick-copy {
  min-width: 0;
}

.dashboard-quick-copy strong,
.dashboard-quick-copy small {
  display: block;
}

.dashboard-quick-copy strong {
  color: #0f172a;
  font-weight: 800;
  line-height: 1.35;
}

.dashboard-quick-copy small {
  margin-top: .25rem;
  color: #64748b;
  font-size: .82rem;
  line-height: 1.55;
}

.dashboard-quick-arrow {
  color: #94a3b8;
}

.dashboard-empty-state {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem;
  color: #64748b;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  background: #f8fafc;
}

.dashboard-quick-settings {
  padding: .95rem 1rem;
  margin-bottom: 1rem;
}

.dashboard-section-header-compact {
  margin-bottom: .75rem;
}

.dashboard-section-header-compact p {
  font-size: .88rem;
}

.dashboard-settings-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.dashboard-settings-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 42px;
  padding: .55rem .75rem;
  color: #0f548d;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 800;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #f8fbff;
}

.dashboard-settings-link:hover,
.dashboard-settings-link:focus-visible {
  color: #0b3f6d;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.gateway-card {
  box-shadow: 0 14px 32px rgba(15, 23, 42, .05);
}

.app-data-table th {
  white-space: nowrap;
  color: #475569;
  font-size: .9rem;
}

.app-data-table td {
  color: #0f172a;
}

.table-card .table-responsive,
.form-card.table-responsive {
  border-radius: 18px;
}

.sales-lines-table {
  margin-bottom: 0;
}

.sales-lines-table .line-total {
  font-weight: 800;
  white-space: nowrap;
}

.sales-line-action-cell .btn {
  min-width: 2.25rem;
}

.sales-form-actions {
  flex-wrap: wrap;
}

.sales-discount-row input {
  min-width: 120px;
}

.sales-grand-total {
  align-items: center;
}

.validation-summary-valid {
  display: none !important;
  min-height: 0 !important;
}



@media (max-width: 1199.98px) {
  .has-side-menu {
    --app-sidebar-width: 248px;
  }


  .dashboard-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .app-navbar .dropdown-menu {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: .25rem;
    box-shadow: none;
  }

  .app-navbar .dropdown-item {
    white-space: normal;
  }

  .navigation-mode-form {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .has-side-menu {
    padding-top: 0;
  }

  .side-topbar {
    position: sticky;
    align-items: stretch;
    flex-direction: column;
    min-height: auto;
    padding: .7rem .85rem;
  }

  .side-topbar-brand,
  .side-topbar-actions {
    width: 100%;
  }

  .side-topbar-actions {
    justify-content: flex-start;
    gap: .55rem;
  }

  .side-topbar .navigation-mode-form {
    flex: 1 1 210px;
    width: auto;
  }

  .side-topbar .btn {
    min-height: 36px;
  }

  .side-topbar .navbar-nav {
    min-width: 0;
  }

  .side-topbar-actions .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .25rem .75rem;
  }

  .has-side-menu .app-page-container,
  .has-side-menu .footer .container,
  .app-rtl.has-side-menu .app-page-container,
  .app-rtl.has-side-menu .footer .container,
  .app-ltr.has-side-menu .app-page-container,
  .app-ltr.has-side-menu .footer .container,
  [dir="rtl"] .has-side-menu .app-page-container,
  [dir="rtl"] .has-side-menu .footer .container {
    width: min(100%, 1400px);
    margin-left: auto;
    margin-right: auto;
    padding-inline: .75rem;
  }

  .app-side-offcanvas .offcanvas-body {
    overflow-y: auto;
  }
  .app-nav-links {
    margin-top: 1rem;
    padding: .5rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #e6f0ff;
  }

  .app-nav-links .nav-link {
    width: 100%;
    justify-content: space-between;
    border-radius: 14px;
  }

  .app-login-wrap {
    margin-top: 1rem;
    margin-inline-start: 0;
    width: 100%;
    align-items: stretch !important;
  }

  .app-login-wrap .navigation-mode-form {
    flex: 1 1 230px;
    width: auto;
  }

  .app-login-wrap > form:not(.navigation-mode-form) {
    flex: 0 0 auto;
  }

  .app-login-wrap .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .25rem .6rem;
    min-width: 0;
  }

  .app-login-wrap .nav-link,
  .side-topbar .nav-link {
    padding: .35rem .45rem;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dashboard-hero,
  .reports-hero,
  .reports-table-header {
    flex-direction: column;
    align-items: stretch;
  }

  .company-profile-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .company-profile-shell {
    grid-template-columns: 1fr;
  }

  .company-profile-menu,
  .company-profile-preview {
    position: static;
  }

  .company-profile-menu .nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .company-profile-menu .nav-link {
    justify-content: center;
  }

  .invoice-layout-editor {
    grid-template-columns: 1fr;
  }

  .dashboard-stats,
  .reports-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }

}

@media (max-width: 767.98px) {

  .sales-lines-table-wrap {
    overflow-x: visible;
  }

  .sales-lines-table thead {
    display: none;
  }

  .sales-lines-table,
  .sales-lines-table tbody,
  .sales-lines-table tr,
  .sales-lines-table td {
    display: block;
    width: 100%;
  }

  .sales-lines-table tr {
    padding: .95rem;
    margin-bottom: .85rem;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fcff);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
  }

  .sales-lines-table tr:last-child {
    margin-bottom: 0;
  }

  .sales-lines-table td {
    padding: 0;
    margin-bottom: .8rem;
    border: none;
    text-align: right !important;
  }

  .sales-lines-table td:last-child {
    margin-bottom: 0;
  }

  .sales-lines-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .35rem;
    color: #64748b;
    font-size: .82rem;
    font-weight: 800;
  }

  .sales-lines-table .line-type,
  .sales-lines-table .line-item,
  .sales-lines-table .line-qty,
  .sales-lines-table .line-price,
  .sales-lines-table .line-cost {
    width: 100%;
  }

  .sales-lines-table .line-total {
    padding: .75rem .9rem;
    border-radius: 14px;
    background: #eef7ff;
    color: #0f548d;
    font-size: 1rem;
  }

  .sales-line-action-cell {
    text-align: left !important;
  }

  .sales-line-action-cell::before {
    text-align: right;
  }

  .sales-line-action-cell .btn {
    min-width: 44px;
  }

  .table-responsive .app-data-table thead {
    display: none;
  }

  .table-responsive .app-data-table,
  .table-responsive .app-data-table tbody,
  .table-responsive .app-data-table tr,
  .table-responsive .app-data-table td {
    display: block;
    width: 100%;
  }

  .table-responsive .app-data-table tr {
    padding: .85rem 0;
    border-bottom: 1px solid #e5eefb;
  }

  .table-responsive .app-data-table tr:last-child {
    border-bottom: none;
  }

  .table-responsive .app-data-table td {
    padding: .42rem 0;
    border: none;
    text-align: right !important;
  }

  .table-responsive .app-data-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .15rem;
    color: #64748b;
    font-size: .8rem;
    font-weight: 700;
  }
}

@media (max-width: 575.98px) {
  html {
    font-size: 14px;
  }

  body {
    margin-bottom: 84px;
  }

  .app-brand strong {
    font-size: 1rem;
  }

  .app-brand small {
    font-size: .72rem;
  }

  .side-topbar {
    gap: .65rem;
    padding-inline: .7rem;
  }

  .side-topbar-brand {
    gap: .55rem;
  }

  .side-topbar-brand .app-brand {
    flex: 1 1 auto;
  }

  .side-topbar-brand .app-brand small {
    display: none;
  }

  .side-topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .side-topbar-actions .navigation-mode-form {
    grid-column: 1 / -1;
  }

  .side-topbar-actions > form:not(.navigation-mode-form) {
    justify-self: start;
  }

  .side-topbar-actions .navbar-nav {
    justify-content: flex-start;
  }

  .app-login-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start !important;
  }

  .app-login-wrap .navigation-mode-form {
    grid-column: 1 / -1;
  }

  .app-login-wrap > form:not(.navigation-mode-form) {
    justify-self: start;
  }

  .hero-card,
  .feature-card,
  .gateway-card,
  .table-card,
  .form-card,
  .dashboard-hero,
  .reports-hero,
  .dashboard-stat,
  .reports-summary-card,
  .reports-dataset-card {
    border-radius: 18px;
  }

  .dashboard-stats,
  .reports-summary-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-section-header {
    align-items: stretch;
  }

  .dashboard-quick-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-quick-link {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
  }

  .dashboard-quick-arrow {
    display: none;
  }

  .dashboard-settings-link {
    width: 100%;
    justify-content: flex-start;
  }

  .dashboard-actions .btn,
  .reports-actions .btn,
  .reports-actions-sm .btn {
    width: 100%;
  }

  .sales-form-card {
    padding: 1rem;
  }

  .password-input-group,
  .password-generate-button {
    flex-basis: 100%;
  }

  .password-generate-button {
    justify-content: center;
  }

  .password-meter-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .password-rule-grid {
    grid-template-columns: 1fr;
  }

  .sales-discount-row,
  .sales-total-row,
  .sales-grand-total,
  .sales-form-actions {
    flex-direction: column;
    align-items: stretch !important;
    gap: .65rem;
  }



  .company-profile-menu .nav {
    grid-template-columns: 1fr;
  }

  .company-profile-menu .nav-link {
    justify-content: flex-start;
  }

  .company-profile-section-head {
    flex-direction: column;
  }

  .invoice-template-grid {
    grid-template-columns: 1fr;
  }

  .invoice-template-option > span {
    min-height: auto;
  }

  .invoice-preview-head {
    align-items: stretch;
    flex-direction: column;
  }

  .invoice-preview-table-head,
  .invoice-preview-row {
    grid-template-columns: 1fr;
  }

  .invoice-preview-summary {
    justify-self: stretch;
  }

  .company-profile-actions .btn {
    width: 100%;
  }


  .footer {
    line-height: 1.8;
    padding: .85rem 0;
  }
}


.app-top-navigation .app-navbar-shell,
.app-top-navigation .navbar-collapse,
.app-top-navigation .app-nav-links,
.app-top-navigation .app-login-wrap {
  flex-wrap: nowrap;
}

.navigation-top-mode {
  overflow-x: clip;
}

.app-top-navigation .app-brand {
  flex: 0 0 auto;
  white-space: nowrap;
}

.app-top-navigation .app-nav-links {
  flex: 1 1 auto;
  justify-content: center;
  gap: .15rem;
}

.app-top-navigation .navbar-collapse {
  column-gap: .75rem;
}

.app-top-navigation .app-nav-links .nav-link {
  padding: .58rem .68rem;
  white-space: nowrap;
  overflow-wrap: normal;
}

.app-login-wrap {
  flex: 0 0 auto;
  min-width: 0;
}

.app-top-navigation .app-login-wrap {
  gap: .65rem !important;
  padding-inline-start: .35rem;
}

.app-language-switcher .btn,
.app-account-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}

.app-account-dropdown {
  width: min(320px, calc(100vw - 1.5rem));
  padding: .65rem;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .12);
}

.app-account-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  border-radius: 10px;
  padding: .65rem .75rem;
}

.app-account-identity {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .35rem .5rem;
}

.app-account-identity > i {
  flex: 0 0 auto;
  color: var(--app-blue);
  font-size: 1.5rem;
}

.app-account-identity span,
.app-account-identity strong,
.app-account-identity small {
  display: block;
  min-width: 0;
}

.app-account-identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-account-identity small {
  color: #64748b;
}

.app-account-preference {
  padding: .35rem .5rem;
}

.app-account-preference .navigation-mode-form {
  display: block;
}

.app-account-preference .form-select {
  width: 100%;
}

.side-topbar-actions {
  flex-wrap: nowrap;
  min-width: 0;
}

.side-topbar-page-title {
  max-width: min(34vw, 420px);
  padding-inline-start: .9rem;
  border-inline-start: 1px solid #dbeafe;
  color: #334155;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[dir="rtl"] .app-dropdown-menu,
[dir="rtl"] .app-account-dropdown {
  text-align: right;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .app-top-navigation .app-brand strong,
  .app-top-navigation .app-account-name,
  .app-top-navigation .app-language-switcher .btn span {
    display: none;
  }

  .app-top-navigation .app-nav-links .nav-link {
    padding-inline: .6rem;
  }
}

@media (max-width: 991.98px) {
  .app-top-navigation .app-navbar-shell {
    flex-wrap: wrap;
  }

  .app-top-navigation .navbar-collapse,
  .app-top-navigation .app-nav-links {
    flex-wrap: wrap;
  }

  .app-top-navigation .app-nav-links {
    align-items: stretch;
  }

  .app-top-navigation .app-nav-links .nav-link {
    white-space: normal;
  }

  .app-top-navigation .app-login-wrap {
    display: flex !important;
    flex-direction: row;
    align-items: center !important;
    justify-content: flex-end;
    flex-wrap: nowrap;
    padding-inline-start: 0;
  }

  .side-topbar {
    flex-direction: row;
    align-items: center;
  }

  .side-topbar-brand {
    width: auto;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .side-topbar-actions {
    width: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  .side-topbar-page-title {
    max-width: min(32vw, 260px);
  }
}

@media (max-width: 575.98px) {
  .side-topbar .app-brand strong,
  .side-topbar .app-brand small,
  .app-account-name,
  .app-language-switcher .btn span {
    display: none;
  }

  .side-topbar-actions,
  .app-login-wrap {
    display: flex !important;
    grid-template-columns: none;
  }

  .side-topbar-page-title {
    max-width: 34vw;
    padding-inline-start: .55rem;
    font-size: .9rem;
  }

  .app-language-switcher .btn,
  .app-account-toggle {
    min-width: 38px;
    min-height: 38px;
    justify-content: center;
  }
}

@media print {
  .app-navbar,
  .side-topbar,
  .app-sidebar,
  .footer {
    display: none !important;
  }

  body {
    background: #fff !important;
  }

}
/* Notification Hub progressive action feedback */
[data-notification-hub-section] button[aria-busy="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: max-content;
}

[data-notification-hub-section] .field-validation-error {
  font-size: .875em;
}

#notificationHubActionAlert {
  overflow-wrap: anywhere;
}
.company-default-image-settings {
  margin-block: 1rem 1.5rem;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .9rem;
  background: var(--bs-tertiary-bg);
}

.company-default-image-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.company-default-image-settings-head > i {
  color: var(--bs-primary);
  font-size: 1.5rem;
}

.company-default-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.company-default-image-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  background: var(--bs-body-bg);
}

.company-default-image-card h4 { font-size: 1rem; }
.company-default-image-card p,
.company-default-image-card small { color: var(--bs-secondary-color); }

.company-default-image-preview {
  display: grid;
  place-items: center;
  min-height: 8rem;
  margin-block: .75rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: .65rem;
  overflow: hidden;
  background: var(--bs-tertiary-bg);
}

.company-default-image-preview img {
  width: 100%;
  height: 8rem;
  object-fit: cover;
}