/**
* Template Name: NiceAdmin
* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
* Updated: Apr 20 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
  /* Brand palette — defaults to the original red; each user's chosen
     primary color (profile page picker) swaps these via
     html[data-theme="..."] blocks, see temp42.css. */
  --color1: #A43E43;
  --color1-rgb: 164, 62, 67;
  --color1-hover: #8a3438;
  --color1-dark: #972a2f;
  --color1-deep: #8b1e23;
  --color2: #6f2a2e;
  --color1-night: #440b0e;
  /* Overrides Bootstrap 5.3's default blue everywhere it uses the primary
     CSS variable (buttons, badges, links, spinners, form focus rings, etc.) */
  --bs-primary: var(--color1);
  --bs-primary-rgb: var(--color1-rgb);
}

/* Bootstrap's dropdown component hardcodes its own
   --bs-dropdown-link-active-bg (blue) rather than reading --bs-primary, so
   the override above misses it — same explicit-fallback treatment as
   .btn-primary below, now for a dropdown-item's active/selected state. */
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}

/* Explicit fallback in case a component hardcodes rather than reads the
   variable — keeps .btn-primary consistent with the rest of the brand color
   sweep regardless of exactly how Bootstrap wires it internally. */
.btn-primary {
  --bs-btn-bg: var(--color1);
  --bs-btn-border-color: var(--color1);
  --bs-btn-hover-bg: var(--color1-hover);
  --bs-btn-hover-border-color: var(--color1-hover);
  --bs-btn-active-bg: var(--color1-hover);
  --bs-btn-active-border-color: var(--color1-hover);
  --bs-btn-disabled-bg: var(--color1);
  --bs-btn-disabled-border-color: var(--color1);
  background-color: var(--color1);
  border-color: var(--color1);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: var(--color1-hover);
  border-color: var(--color1-hover);
}

/* Same explicit-fallback treatment as .btn-primary above — .bg-primary reads
   --bs-primary-rgb through Bootstrap's own !important utility rule, which
   isn't reliably resolving to the brand color in every context. */
.bg-primary {
  background-color: var(--color1) !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--color1);
  --bs-btn-border-color: var(--color1);
  --bs-btn-hover-bg: var(--color1);
  --bs-btn-hover-border-color: var(--color1);
  --bs-btn-active-bg: var(--color1);
  --bs-btn-active-border-color: var(--color1);
  color: var(--color1);
  border-color: var(--color1);
}

body {
  font-family: "Inter", sans-serif;
  background: #f6f9ff;
  color: #444444;
}

a {
  color: var(--color1);
  text-decoration: none;
}

a:hover {
  color: #3381be;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter", sans-serif;
}

.text-muted {
  font-family: "Inter", sans-serif;
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
  margin-top: 60px;
  padding: 30px 10px;
  transition: all 0.3s;
}

#main > main {
    display: block;
    background-image: url(../img/pattern_background.png);
    /* background-repeat: no-repeat; */
    background-position: top center;
    /* background-size: cover; */
}

@media (max-width: 1199px) {
  #main {
    padding: 20px;
  }
}

@media (max-width: 767.98px) {
  #main {
    padding: 5px 10px;
  }
}

/* Room for the fixed mobile bottom nav (BottomNav.vue) below the xl breakpoint */
@media (max-width: 1199.98px) {
  #main {
    padding-bottom: 70px;
  }

  /* Give pagination / "records per page" controls clearance above the fixed
     bottom nav (~60px tall) instead of just raising their stacking order —
     z-index alone let them visually collide with the nav since #main's own
     padding-bottom wasn't reliably enough space by itself. */
  .dataTables-footer,
  .dataTables_length,
  .dataTables-pagination,
  .pagination {
    margin-bottom: 25px;
  }
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
  margin-bottom: 10px;
  padding: 8px;
}

.pagetitle h1 {
  font-size: 24px;
  margin-bottom: 0;
  font-weight: 600;
  color: #012970;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: var(--color1);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #6776f4;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
  border-radius: 4px;
  padding: 10px 0;
  animation-name: dropdown-animate;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  border: 0;
  box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
  text-align: center;
  font-size: 15px;
  padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
  color: #444444;
  text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
  text-decoration: none;
}

.dropdown-menu .dropdown-divider {
  color: #a5c5fe;
  margin: 0;
}

.dropdown-menu .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
  background-color: rgba(var(--color1-rgb), .08);
}

@media (min-width: 768px) {
  .dropdown-menu-arrow::before {
    content: "";
    width: 13px;
    height: 13px;
    background: #fff;
    position: absolute;
    top: -7px;
    right: 20px;
    transform: rotate(45deg);
    border-top: 1px solid #eaedf1;
    border-left: 1px solid #eaedf1;
  }
}

@keyframes dropdown-animate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

  0% {
    opacity: 0;
  }
}

/* Light Backgrounds */
.bg-primary-light {
  background-color: #cfe2ff;
  border-color: #cfe2ff;
}

.bg-secondary-light {
  background-color: #e2e3e5;
  border-color: #e2e3e5;
}

.bg-success-light {
  background-color: #d1e7dd;
  border-color: #d1e7dd;
}

.bg-danger-light {
  background-color: #f8d7da;
  border-color: #f8d7da;
}

.bg-warning-light {
  background-color: #fff3cd;
  border-color: #fff3cd;
}

.bg-info-light {
  background-color: #cff4fc;
  border-color: #cff4fc;
}

.bg-dark-light {
  background-color: #d3d3d4;
  border-color: #d3d3d4;
}

/* Card */
.card {
  margin-bottom: 30px;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

.card-header,
.card-footer {
  border-color: #ebeef4;
  background-color: #fff;
  color: #798eb3;
  padding: 15px;
}

.card-title {
  padding: 20px 0 15px 0;
  font-size: 18px;
  font-weight: 500;
  color: #012970;
  font-family: "Inter", sans-serif;
  margin-bottom: 25px;
}

.card-title span {
  color: #899bbd;
  font-size: 14px;
  font-weight: 400;
}

.card-body {
  padding: 20px 20px 20px 20px;
}

.card-img-overlay {
  background-color: rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alert-heading {
  font-weight: 500;
  font-family: "Inter", sans-serif;
  font-size: 20px;
}

/* Close Button */
.btn-close {
  background-size: 25%;
}

.btn-close:focus {
  outline: 0;
  box-shadow: none;
}

/* Accordion */
.accordion-item {
  border: 1px solid #ebeef4;
}

.accordion-button:focus {
  outline: 0;
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: #012970;
  background-color: #f6f9ff;
}

.accordion-flush .accordion-button {
  padding: 15px 0;
  background: none;
  border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
  box-shadow: none;
  color: var(--color1);
}

.accordion-flush .accordion-body {
  padding: 0 0 15px 0;
  color: #3e4f6f;
  font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
  font-size: 14px;
  font-family: "Inter", sans-serif;
  color: #899bbd;
  font-weight: 600;
}

.breadcrumb a {
  color: #899bbd;
  transition: 0.3s;
}

.breadcrumb a:hover {
  color: #51678f;
}

.breadcrumb .breadcrumb-item::before {
  color: #899bbd;
}

.breadcrumb .active {
  color: #51678f;
  font-weight: 600;
}

/* Bordered Tabs */
.nav-tabs-bordered {
  border-bottom: 2px solid #ebeef4;
}

.nav-tabs-bordered .nav-link {
  margin-bottom: -2px;
  border: none;
  color: #2c384e;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
  color: var(--color1);
}

.nav-tabs-bordered .nav-link.active {
  background-color: #fff;
  color: var(--color1);
  border-bottom: 2px solid var(--color1);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo {
  line-height: 1;
}

@media (min-width: 1200px) {
  .logo {
    width: 280px;
  }
}

.logo img {
  max-height: 32px;
  margin-right: 6px;
}

.logo span {
  font-size: 26px;
  font-weight: 700;
  color: #012970;
  font-family: "Inter", sans-serif;
}

.header {
  transition: all 0.5s;
  z-index: 997;
  height: 60px;
  box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
  background: url(../img/pattern_background.png) var(--color1-deep);
  padding-left: 20px;
  border-bottom: 2px solid #fff;
  /* Toggle Sidebar Button */
  /* Search Bar */
}

.header .toggle-sidebar-btn {
  font-size: 32px;
  padding-left: 10px;
  cursor: pointer;
  color: #fff;
}

.header .search-bar {
  min-width: 360px;
  padding: 0 20px;
}

@media (max-width: 1199px) {
  .header .search-bar {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 20px;
    box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
    background: white;
    z-index: 9999;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
  }

  .header .search-bar-show {
    top: 60px;
    visibility: visible;
    opacity: 1;
  }
}

.header .search-form {
  width: 100%;
}

.header .search-form input {
  border: 0;
  font-size: 14px;
  color: #012970;
  border: 1px solid rgba(1, 41, 112, 0.2);
  padding: 7px 38px 7px 8px;
  border-radius: 3px;
  transition: 0.3s;
  width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
  outline: none;
  box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
  border: 1px solid rgba(1, 41, 112, 0.3);
}

.header .search-form button {
  border: 0;
  padding: 0;
  margin-left: -30px;
  background: none;
}

.header .search-form button i {
  color: #012970;
}

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
  list-style: none;
}

.header-nav>ul {
  margin: 0 15px;
  padding: 0;
  gap: 20px;
}

.header-nav .nav-icon {
  font-size: 22px;
  color: #fff;
  position: relative;
}

.header-nav .nav-profile {
  color: #fff;
}

.header-nav .nav-profile .text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
}

.header-nav .nav-profile img {
  max-height: 36px;
}

.header-nav .nav-profile span {
  font-size: 14px;
  font-weight: 600;
}

.header-nav .badge-number {
  position: absolute;
  inset: 2px -21px auto auto;
  font-weight: normal;
  font-size: 12px;
  padding: 3px 6px;
}

.header-nav .notifications {
  inset: 8px -15px auto auto !important;
}

.header-nav .notifications .notification-item {
  display: flex;
  align-items: center;
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .notifications .notification-item i {
  margin: 0 20px 0 10px;
  font-size: 24px;
}

.header-nav .notifications .notification-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

.header-nav .notifications .notification-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: #919191;
}

.header-nav .notifications .notification-item:hover {
  background-color: #f6f9ff;
}

.header-nav .messages {
  inset: 8px -15px auto auto !important;
}

.header-nav .messages .message-item {
  padding: 15px 10px;
  transition: 0.3s;
}

.header-nav .messages .message-item a {
  display: flex;
}

.header-nav .messages .message-item img {
  margin: 0 20px 0 10px;
  max-height: 40px;
}

.header-nav .messages .message-item h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #444444;
}

.header-nav .messages .message-item p {
  font-size: 13px;
  margin-bottom: 3px;
  color: #919191;
}

.header-nav .messages .message-item:hover {
  background-color: #f6f9ff;
}

.header-nav .profile {
  min-width: 240px;
  padding-bottom: 0;
  top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
  font-size: 18px;
  margin-bottom: 0;
  font-weight: 600;
  color: #444444;
}

.header-nav .profile .dropdown-header span {
  font-size: 14px;
}

.header-nav .profile .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.header-nav .profile .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
  background-color: #f6f9ff;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
  position: fixed;
  top: 60px;
  /* left: 0; */
  bottom: 0;
  width: 300px;
  z-index: 996;
  transition: all 0.3s;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #aab7cf transparent;
  box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
  background-color: #fff;
}

@media (max-width: 1199px) {
  .sidebar {
    left: -300px;
  }
}

.sidebar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #aab7cf;
}

@media (min-width: 1200px) {

  #main,
  #footer {
    /* margin-left: 300px; */
  }
}

@media (max-width: 1199px) {
  .toggle-sidebar .sidebar {
    left: 0 !important;
  }
}

@media (min-width: 1200px) {

  .toggle-sidebar #main,
  .toggle-sidebar #footer {
    margin-left: 0;
    margin-right: 0;
  }

  .toggle-sidebar .sidebar {
    left: -300px !important;
  }
}

.sidebar-nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-item {
  margin-bottom: 5px;
}

.sidebar-nav .nav-heading {
  font-size: 11px;
  text-transform: uppercase;
  color: #899bbd;
  font-weight: 600;
  margin: 10px 0 5px 15px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--color1);
  transition: 0.3;
  background: #f6f9ff;
  padding: 10px 15px;
  border-radius: 4px;
}

.sidebar-nav .nav-link i {
  font-size: 16px;
  /* margin-right: 10px; */
  color: var(--color1);
}

.sidebar-nav .nav-link.collapsed {
  color: #012970;
  background: #fff;
}

.sidebar-nav .nav-link.collapsed i {
  color: #899bbd;
}

.sidebar-nav .nav-link:hover {
  color: var(--color1);
  background: #f6f9ff;
}

.sidebar-nav .nav-link:hover i {
  color: var(--color1);
}

.sidebar-nav .nav-link .bi-chevron-down {
  /* margin-right: 0; */
  transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
  transform: rotate(180deg);
}

.sidebar-nav .nav-content {
  padding: 5px 0 0 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav .nav-content a {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #012970;
  transition: 0.3;
  padding: 5px 0 5px 30px;
  transition: 0.3s;
}

.sidebar-nav .nav-content a i {
  font-size: 12px;
  margin-right: 8px;
  line-height: 0;
  border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  Background-color: var(--bg-surface-alt);
}

.sidebar-nav .nav-content a.active i {
  /* background-color: var(--color1); */
}

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
/* Filter dropdown */
.dashboard .filter {
  position: absolute;
  right: 0px;
  top: 15px;
}

.dashboard .filter .icon {
  color: #aab7cf;
  padding-right: 20px;
  padding-bottom: 5px;
  transition: 0.3s;
  font-size: 16px;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
  color: var(--color1);
}

.dashboard .filter .dropdown-header {
  padding: 8px 15px;
}

.dashboard .filter .dropdown-header h6 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #aab7cf;
  margin-bottom: 0;
  padding: 0;
}

.dashboard .filter .dropdown-item {
  padding: 8px 15px;
}

/* Info Cards */
.dashboard .info-card {
  padding-bottom: 10px;
}

.dashboard .info-card h6 {
  font-size: 28px;
  color: #012970;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

.dashboard .card-icon {
  font-size: 32px;
  line-height: 0;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  flex-grow: 0;
}

.dashboard .sales-card .card-icon {
  color: var(--color1);
  background: #f6f6fe;
}

.dashboard .revenue-card .card-icon {
  color: #2eca6a;
  background: #e0f8e9;
}

.dashboard .customers-card .card-icon {
  color: #ff771d;
  background: #ffecdf;
}

.dashboard .logs-card .card-icon {
  color: #e5a52e;
  background: #fff5df;
}

.dashboard .warning-card .card-icon {
  color: #dc3545;
  background: #fdecea;
}

/* Activity */
.dashboard .activity {
  font-size: 14px;
}

.dashboard .activity .activity-item .activite-label {
  color: #888;
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 64px;
}

.dashboard .activity .activity-item .activite-label::before {
  content: "";
  position: absolute;
  right: -11px;
  width: 4px;
  top: 0;
  bottom: 0;
  background-color: #eceefe;
}

.dashboard .activity .activity-item .activity-badge {
  margin-top: 3px;
  z-index: 1;
  font-size: 11px;
  line-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid #fff;
  flex-grow: 0;
}

.dashboard .activity .activity-item .activity-content {
  padding-left: 10px;
  padding-bottom: 20px;
}

.dashboard .activity .activity-item:first-child .activite-label::before {
  top: 5px;
}

.dashboard .activity .activity-item:last-child .activity-content {
  padding-bottom: 0;
}

/* News & Updates */
.dashboard .news .post-item+.post-item {
  margin-top: 15px;
}

.dashboard .news img {
  width: 80px;
  float: left;
  border-radius: 5px;
}

.dashboard .news h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
  margin-bottom: 5px;
}

.dashboard .news h4 a {
  color: #012970;
  transition: 0.3s;
}

.dashboard .news h4 a:hover {
  color: var(--color1);
}

.dashboard .news p {
  font-size: 14px;
  color: #777777;
  margin-left: 95px;
}

/* Recent Sales */
.dashboard .recent-sales {
  font-size: 14px;
}

.dashboard .recent-sales .table thead {
  background: #f6f6fe;
}

.dashboard .recent-sales .table thead th {
  border: 0;
}

.dashboard .recent-sales .dataTable-top {
  padding: 0 0 10px 0;
}

.dashboard .recent-sales .dataTable-bottom {
  padding: 10px 0 0 0;
}

/* Top Selling */
.dashboard .top-selling {
  font-size: 14px;
}

.dashboard .top-selling .table thead {
  background: #f6f6fe;
}

.dashboard .top-selling .table thead th {
  border: 0;
}

.dashboard .top-selling .table tbody td {
  vertical-align: middle;
}

.dashboard .top-selling img {
  border-radius: 5px;
  max-width: 60px;
}

/*--------------------------------------------------------------
# Icons list page
--------------------------------------------------------------*/
.iconslist {
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  padding-top: 15px;
}

.iconslist .icon {
  background-color: #fff;
  border-radius: 0.25rem;
  text-align: center;
  color: #012970;
  padding: 15px 0;
}

.iconslist i {
  margin: 0.25rem;
  font-size: 2.5rem;
}

.iconslist .label {
  font-family: var(--bs-font-monospace);
  display: inline-block;
  width: 100%;
  overflow: hidden;
  padding: 0.25rem;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #666;
}

/*--------------------------------------------------------------
# Profie Page
--------------------------------------------------------------*/
.profile .profile-card img {
  max-width: 120px;
}

.profile .profile-card h2 {
  font-size: 24px;
  font-weight: 700;
  color: #2c384e;
  margin: 10px 0 0 0;
}

.profile .profile-card h3 {
  font-size: 18px;
}

.profile .profile-card .social-links a {
  font-size: 20px;
  display: inline-block;
  color: rgba(1, 41, 112, 0.5);
  line-height: 0;
  margin-right: 10px;
  transition: 0.3s;
}

.profile .profile-card .social-links a:hover {
  color: #012970;
}

.profile .profile-overview .row {
  margin-bottom: 20px;
  font-size: 15px;
}

.profile .profile-overview .card-title {
  color: #012970;
}

.profile .profile-overview .label {
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit label {
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit img {
  max-width: 120px;
}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color1);
}

.faq .basic p {
  color: #6980aa;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  padding: 28px 30px;
}

.contact .info-box i {
  font-size: 38px;
  line-height: 0;
  color: var(--color1);
}

.contact .info-box h3 {
  font-size: 20px;
  color: #012970;
  font-weight: 700;
  margin: 20px 0 10px 0;
}

.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-radius: 0;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--color1);
}

.contact .php-email-form input {
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
  background: var(--color1);
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: #5969f3;
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
  padding: 30px;
}

.error-404 h1 {
  font-size: 180px;
  font-weight: 700;
  color: var(--color1);
  margin-bottom: 0;
  line-height: 150px;
}

.error-404 h2 {
  font-size: 24px;
  font-weight: 700;
  color: #012970;
  margin-bottom: 30px;
}

.error-404 .btn {
  background: #51678f;
  color: #fff;
  padding: 8px 30px;
}

.error-404 .btn:hover {
  background: #3e4f6f;
}

@media (min-width: 992px) {
  .error-404 img {
    max-width: 50%;
  }
 
}
@media (max-width: 992px) {

.col-md-3,.col-md-2{
  margin-bottom: 8px;
}
.col-md-3 .btn ,.col-md-2  .btn{
  width: 150px;
  text-align: center !important;
}
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  padding: 20px 0;
  font-size: 14px;
  transition: all 0.3s;
  border-top: 1px solid #cddfff;
}

.footer .copyright {
  text-align: center;
  color: #012970;
}

.footer .credits {
  padding-top: 5px;
  text-align: center;
  font-size: 13px;
  color: #012970;
}


    .form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem !important;
    font-size: 1rem  !important;
    font-weight: 400;
    line-height: 1.5  !important;
    color: #212529;
    -webkit-appearance: none  !important;
    -moz-appearance: none;
    appearance: none  !important;
    background-color:#fff  !important;
    background-clip: padding-box  !important;
    border: 1px solid #fff;
    border-radius: 0.375rem  !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

.form-floating>label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  padding: 1rem .75rem;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

.form-control:disabled {
  background-color: #e9ecef !important;
  opacity: 1;
}

.fs-13{
  font-size: 13px !important;
}
.filter_form{
  padding: 10px;
  border-bottom: 2px solid gray ;
}

.search_box {
  border-radius: 8px !important;
}

.table {
  margin-top: 15px !important;

}

.form-select {
  border-radius: 8px !important;
}

input.form-control,
select.form-control,
textarea.form-control,
.form-select {
  border: 1px solid #ced4da !important;
}

.avatar {
  margin: auto !important;
  border-radius: 25px;
}

.changeLang {
  width: 120px;
}

.form-select select{
  text-align: center !important;
}
.form-select option{
  text-align: center !important;
}

canvas {
  height: 100% !important;
    width: 65% !important;
}

/* .canv_row {
  padding-bottom: 15px !important;
  padding-top: 15px !important;
} */


.main-full-width {
  margin-left: 0 !important;
}

.collapse {
  visibility :visible !important;
}

.error-page {
  /* text-align: center;
  padding: 20px; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
}

.error-page img{
height: 450px !important;
}

.error-page h1{
  font-size: 35px;
  font-weight: 600;
}


.error-page p{
  font-size: 20px;
  font-weight: 600;
}

.sr-only {
  position: relative !important;
}

/*--------------------------------------------------------------
# Modals
--------------------------------------------------------------*/
.modal-header {
  background-color: var(--color1-deep);
  background-image: url(../img/pattern_background.png);
  background-size: cover;
  background-position: center;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header .modal-title,
.modal-header .modal-title i {
  color: #fff;
}

.modal-header .btn-close {
  /* Solid white circle behind the icon (not just a color-inverted X) so it
     stays visible against every modal header's dark/patterned background,
     across every modal in the app. */
  background-color: #fff;
  opacity: 1;
  border-radius: 14%;
  padding: 0.2rem;
  /* Bootstrap's own .modal-header .btn-close rule sets margin-left: auto,
     which shares the header's free flex space with any OTHER auto-margin
     sibling before it (e.g. EditUserModal's "Celebrate him/her" button's
     ms-auto) — the free space gets split in two, opening a big gap before
     THAT sibling as well as before the close button. Pinning this to a
     small fixed value lets a preceding ms-auto own all the free space, so
     the close button just sits a short, fixed distance after it instead. */
  margin-left: 0.5rem;
  font-size: 20px;
}

.badgeInfo{
  display: inline-block;
    font-size: 12px;
    font-weight: 700;
    background: #f0f0f0;
    color: #888;
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: .4px;
    vertical-align: middle;
}

.title-bold {
    font-size: 14px;
    font-weight: 700;
    color: var(--color2);
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 2px solid #f5f5f5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.white-box-dashboard:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

.white-box-dashboard {
    scrollbar-width: thin;
    scrollbar-color: #cecece white;
    width: 8px;
    background-color: #fff;
    border-radius: 15px;
    position: relative;
    padding: 10px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #cecece ;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.pursebg { background-color: #f1e2ff; }
.pursecolor { color: #5e298d; }

.user-photo-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e0e0e0;
    cursor: pointer;
}

.user-photo-zoom-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.user-photo-zoom-img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* EditUserModal.vue's pool-action cards (Return to Pools / Move to Pool) */
.pool-action-card {
    display: flex;
    gap: 12px;
    height: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #eee;
    background: #fafafa;
}

.pool-action-card-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
}

.pool-action-card-body {
    flex: 1;
    min-width: 0;
}

.pool-action-card-title {
    font-size: 12px;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
}

.pool-action-card-amber {
    background: #fff8ec;
    border-color: #ffe3ae;
}
.pool-action-card-amber .pool-action-card-icon {
    background: #ffecc7;
    color: #b9770e;
}

.pool-action-card-indigo {
    background: #eef1ff;
    border-color: #ccd4ff;
}
.pool-action-card-indigo .pool-action-card-icon {
    background: #dde3ff;
    color: #4154f1;
}

.pool-action-card-teal {
    background: #eafaf6;
    border-color: #b8ecdf;
}
.pool-action-card-teal .pool-action-card-icon {
    background: #c8f3e6;
    color: #0f9d76;
}

.pool-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
}

.pool-checkbox-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 10px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #d7f0e8;
    font-size: 13px;
    cursor: pointer;
}

.pool-checkbox-chip .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

body.dark .pool-checkbox-chip {
    background: var(--bg-surface);
    border-color: var(--border-color);
    color: var(--text-color);
}

body.dark .pool-action-card {
    background: var(--bg-surface);
    border-color: var(--border-color);
}
body.dark .pool-action-card-title {
    color: var(--text-color);
}

.redText {
    color: #e63e3e !important;
}

/* ============================================================
   Component styles merged from Vue SFCs (previously per-file)
   ============================================================ */

/* --- resources/js/Pages/CrmApis/index.vue (index.css) --- */
.api-card {
  overflow: hidden;
}

.api-card-img {
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
   gap: 0px;
  padding: 4px 17px;
  background: linear-gradient(135deg, #d97757, #e2967d);
  color: rgba(255, 255, 255, 0.9);
   background: url('../img/pattern_background.png') ,#a1242a;
}

.api-card-img > i {
  font-size: 2.2rem;
}

/* --- resources/js/Pages/Clients/index.vue (index.css) --- */
/* Wraps the periodic tabs and the name/email/phone/id/order search row so
   isBusy can disable the whole group at once via the native <fieldset
   disabled> behavior — stripped back to look like the plain container it
   replaces (a bare fieldset otherwise adds its own border/padding/margin). */
fieldset.disable-wrap {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Centered loading spinner while clients.data() is in flight — identical
   pattern to Dashboard.vue's dashboard-loading-overlay. */
.clients-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
}
.clients-loading-overlay .spinner-border {
  width: 3rem;
  height: 3rem;
}
.dash-content.dash-content-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* --- resources/js/Layouts/AuthenticatedLayout.vue (AuthenticatedLayout.css) --- */
/* Logo fills the full sidebar width instead of a small icon + text label.
   It's a white-on-transparent SVG, so it needs a dark backdrop to read
   against the header's white background — matching the login page. */
.logo-full-width {
    width: 100%;
    height: 100%;
    padding: 10px 0px 10px 0px;
    justify-content: center;
}

.logo-full-width img {
    /* The SVG is a wide banner lockup (2519x650) — constrain by height so it
       fits the header's fixed height without overflowing, instead of
       stretching to the sidebar's full width. */
    max-height: 35px;
    width: auto;
    max-width: 100%;
    margin-right: 0;
}

/* The mobile bottom nav's own Menu button replaces this below the xl
   breakpoint, so avoid showing two sidebar toggles at once. */
@media (max-width: 1199.98px) {
    .toggle-sidebar-btn {
        display: none;
    }
}

.brand-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: #6c757d;
}

body.dark .brand-subtitle { color: #9aa6b5; }

.toast-alert-top-left {
    top: 20px;
    left: 20px;
    z-index: 1080;
    min-width: 280px;
    max-width: 380px;
    text-align: left;
    direction: ltr;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}

.alert-auto-dismiss-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    animation: alert-auto-dismiss-shrink 3s linear forwards;
}

@keyframes alert-auto-dismiss-shrink {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

/* Compound selector (not just `.online-users-menu`) so this beats the
   later, more general `.dropdown-menu { max-height: 260px; overflow-y: auto }`
   rule (added for IconDropdown.vue) that this element also matches via its
   own base `.dropdown-menu` class — same single-class specificity would
   otherwise let source order alone decide, and that rule comes later. */
.dropdown-menu.online-users-menu {
    /* No max-height/scroll — shows the full online-users list by default. */
    max-height: none;
    overflow: hidden;
    min-width: 340px;
    border: none;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    padding: 8px 0;
}

.online-users-menu .dropdown-header {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #999;
    padding: 6px 16px 8px;
    border-bottom: 1px solid #f0f0f0;
}

/* Online users rows — ~10 visible (46px each), the rest scroll; header
   stays put above it. */
.online-users-list {
    max-height: 460px;
    overflow-y: auto;
}

.greenBorder {
    border: solid 3.3px #198754 !important;
}

.online-user-mood {
    font-size: 17px;
    line-height: 1;
}

.online-user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.online-user-name {
    font-size: 15px;
}

.online-user-wts-icon {
    font-size: 18px;
}

.nav-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

/* --- resources/js/Components/SideBar.vue (SideBar.css) --- */
.segment-subitem a {
    padding-left: 48px;
}

/* --- resources/js/Components/NoteComposer.vue (NoteComposer.css) --- */
.note-composer {
  background: url('/dashboard-assets/img/pattern_background.png'), #f7f7f7;
  padding: 8px;
  border-radius: 6px;
}
:deep(.ql-toolbar) {
  border-radius: 6px 6px 0 0;
  background: #fff;
}
:deep(.ql-container) {
  border-radius: 0 0 6px 6px;
  font-size: 14px;
  background: #fff;
}
:deep(.ql-editor) {
  height: 120px;
  overflow-y: auto;
  background: #fff;
}

body.dark .note-composer { background: url('/dashboard-assets/img/pattern_background.png'), #1a212b; }
:global(body.dark .note-composer .ql-toolbar) { background: #232b37; border-color: #2e3846; }
:global(body.dark .note-composer .ql-container) { background: #232b37; border-color: #2e3846; color: #e4e8ee; }
:global(body.dark .note-composer .ql-editor) { background: #232b37; color: #e4e8ee; }
:global(body.dark .note-composer .ql-editor.ql-blank::before) { color: #9aa6b5; }
:global(body.dark .note-composer .ql-toolbar .ql-stroke) { stroke: #9aa6b5; }
:global(body.dark .note-composer .ql-toolbar .ql-fill) { fill: #9aa6b5; }
:global(body.dark .note-composer .ql-toolbar .ql-picker) { color: #9aa6b5; }

/* --- resources/js/Components/Modals/MergeClientsModal.vue (MergeClientsModal.css) --- */
/* Ported 1:1 from the old CRM's temp11.css .merge-* rules
   (CLIENT_MERGE_FEATURE.md), plus dark-mode overrides — the old app had none. */
.merge-notice { background: #fff8e1; border-left: 4px solid #ffc107; border-radius: 4px; padding: 10px 14px; font-size: 13px; color: #555; margin-bottom: 18px; }
.merge-clients-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.merge-client-card { border: 2px solid #dee2e6; border-radius: 8px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.merge-primary-selected { border-color: #28a745; box-shadow: 0 0 0 3px rgba(40,167,69,.15); }
.merge-card-header { background: #f8f9fa; padding: 10px 14px; border-bottom: 1px solid #dee2e6; }
.merge-primary-selected .merge-card-header { background: #d4edda; border-bottom-color: #c3e6cb; }
.merge-radio-label { display: flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; font-weight: 600; font-size: 13px; }
.merge-primary-badge { color: #155724; background: #d4edda; border-radius: 4px; padding: 2px 8px; font-size: 12px; }
.merge-secondary-badge { color: #721c24; background: #f8d7da; border-radius: 4px; padding: 2px 8px; font-size: 12px; }
.merge-card-body { padding: 12px 14px; }
.merge-field { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; gap: 8px; }
.merge-field-label { color: #888; font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.merge-field-value { color: #333; font-weight: 500; text-align: right; word-break: break-all; }
.merge-id { font-size: 16px; font-weight: 700; color: #007bff; }
.merge-count { background: #e9ecef; border-radius: 10px; padding: 1px 10px; font-size: 12px; font-weight: 600; }
.merge-empty-state { text-align: center; padding: 40px; color: #aaa; font-size: 14px; }

body.dark .merge-notice { background: rgba(255,193,7,.12); color: var(--text-color); }
body.dark .merge-client-card { border-color: var(--bg-surface-alt); }
body.dark .merge-card-header { background: var(--bg-surface); border-bottom-color: var(--bg-surface-alt); }
body.dark .merge-field { border-bottom-color: var(--bg-surface-alt); }
body.dark .merge-field-value { color: var(--text-color); }
body.dark .merge-count { background: var(--bg-surface-alt); color: var(--text-color); }

/* --- resources/js/Components/Modals/EditReportModal.vue (EditReportModal.css) --- */
:deep(.ql-toolbar) {
  border-radius: 6px 6px 0 0;
}
:deep(.ql-container) {
  border-radius: 0 0 6px 6px;
  font-size: 14px;
}
:deep(.ql-editor) {
  min-height: 140px;
  max-height: 280px;
  overflow-y: auto;
}

/* --- resources/js/Components/Modals/Ai/FerModal.vue (FerModal.css) --- */
/* Same card chrome as AiVoiceCard's Voice Message card — duplicated rather
   than shared since Vue scoped styles don't cross component files. */
.ai-msg-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
}
.ai-msg-card-header {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ai-answer-pane {
  background: #fff;
  padding: 10px 14px;
  font-size: 14px;
}
.ai-card-disabled {
  opacity: .45;
  pointer-events: none;
  filter: grayscale(.6);
}
.ai-toggle-chip {
  font-size: 12px;
  color: #555;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 20px;
  padding: 6px 14px;
}
.ai-send-voice-toggle {
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: #666;
  white-space: nowrap;
}
.modal-body {
  background-image: url('/dashboard-assets/img/pattern_background.png');
  background-repeat: repeat;
  background-size: auto;
}
.ai-link-picker-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: inherit;
}
.ai-link-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
  font-weight: 600;
  flex-shrink: 0;
}
.ai-link-picker-frame {
  flex-grow: 1;
  width: 100%;
  border: none;
}
.ai-prop-card {
  width: 175px;
  background: #fff;
  position: relative;
  transition: box-shadow .15s, opacity .15s;
}
.ai-prop-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ai-prop-card-dragging {
  opacity: .4;
}
.ai-prop-card-img {
  height: 130px;
  object-fit: cover;
}
.ai-prop-card-handle {
  position: absolute;
  top: 4px;
  right: 4px;
  color: #bbb;
  cursor: grab;
  z-index: 1;
  background: rgba(255, 255, 255, .8);
  border-radius: 4px;
  line-height: 1;
  padding: 1px 2px;
}
.ai-prop-card-handle:active {
  cursor: grabbing;
}
.ai-prop-card-remove {
  position: absolute;
  top: 4px;
  left: 4px;
  color: #bbb;
  cursor: pointer;
  z-index: 1;
  background: rgba(255, 255, 255, .8);
  border: none;
  border-radius: 4px;
  line-height: 1;
  padding: 1px 4px;
}
.ai-prop-card-remove:hover {
  color: #dc3545;
}
.ai-tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  background: #f9f9f9;
  border-bottom: 1px solid #eee;
  border-radius: 8px 8px 0 0;
  margin-bottom: 16px;
}
.ai-tab-nav .md_btn {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #d0d0d0;
  background: #fff;
  color: #555;
  transition: all .15s;
  text-decoration: none;
}
.ai-tab-nav .md_btn:hover {
  border-color: var(--color1);
  color: var(--color1);
}
.ai-tab-nav .md_btn.active {
  background: var(--color1);
  border-color: var(--color1);
  color: #fff;
}
.ai-tab-nav .md_btn.ai-fer-tab {
  height: 40px;
  display: inline-flex;
  align-items: center;
}
.ai-model-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 4px 10px;
}
.ai-tab-nav .md_btn.ai-model-picker {
  padding: 2px 5px;
  height: 37px;
}
.ai-model-picker select {
  border: none;
  background: transparent;
  font-size: 12px;
  color: #333;
  outline: none;
}
.ai-model-picker.ai-disabled {
  opacity: .5;
}
.ai-web-search-pill .switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 16px;
}
.ai-web-search-pill .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ai-web-search-pill .slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 16px;
  transition: .15s;
}
.ai-web-search-pill .slider::before {
  content: '';
  position: absolute;
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: .15s;
}
.ai-web-search-pill input:checked + .slider {
  background: var(--color1);
}
.ai-web-search-pill input:checked + .slider::before {
  transform: translateX(14px);
}

body.dark .ai-tab-nav {
  background: var(--bg-surface);
  border-color: var(--border-color);
}
body.dark .ai-tab-nav .md_btn {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
  color: var(--text-muted);
}
body.dark .ai-tab-nav .md_btn:hover {
  border-color: var(--color1);
  color: var(--color1);
}
body.dark .ai-model-picker {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
  color: var(--text-muted);
}
body.dark .ai-model-picker select {
  color: var(--text-color);
}
body.dark .ai-msg-card {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
}
body.dark .ai-msg-card-header {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-muted);
}
body.dark .ai-toggle-chip {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
  color: var(--text-muted);
}
body.dark .ai-prop-card {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
}
body.dark .ai-prop-card-remove {
  background: rgba(0, 0, 0, .6);
  color: var(--text-muted);
}
body.dark .ai-prop-card-handle {
  background: rgba(0, 0, 0, .6);
  color: var(--text-muted);
}
body.dark .modal-body {
  background-image: none;
}

/* --- resources/js/Components/Modals/AddReportModal.vue (AddReportModal.css) --- */
:deep(.ql-toolbar) {
  border-radius: 6px 6px 0 0;
}
:deep(.ql-container) {
  border-radius: 0 0 6px 6px;
  font-size: 14px;
}
:deep(.ql-editor) {
  min-height: 140px;
  max-height: 280px;
  overflow-y: auto;
}

/* --- resources/js/Components/NextCallPicker.vue (NextCallPicker.css) --- */
.next-call-picker input.wb-ele.allocated {
  border-radius: 5px;
  font-size: 12px;
  text-align: center;
}

.next-call-input-wrap {
  position: relative;
}

.next-call-input-wrap input.has-inner-icon {
  padding-right: 26px;
}

.next-call-inner-icon {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  pointer-events: none;
}

.next-call-inner-icon * {
  pointer-events: auto;
}

.next-call-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.next-call-modal {
  background: #fff;
  border-radius: 8px;
  width: 700px;
  max-width: 100%;
  overflow: hidden;
}

.next-call-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color1);
  color: #fff;
}

.next-call-modal-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  min-width: 0;
}

.next-call-modal-body {
  padding: 16px;
}

.next-call-modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid #eee;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  text-align: center;
}

.cal-head {
  font-size: .7rem;
  font-weight: 700;
  color: #6b7a8d;
  padding: 5px 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cal-day {
  position: relative;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  background: #f0f3f7;
  transition: background .15s, transform .1s;
  user-select: none;
}

.cal-day:hover {
  background: #dde3eb;
  transform: scale(1.06);
}

.cal-day-num {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
}

.cal-day-other {
  background: transparent !important;
  cursor: default;
  transform: none !important;
}
.cal-day-other .cal-day-num {
  color: #c8d0da;
}
.cal-day-other:hover {
  background: transparent !important;
  transform: none !important;
}

/* Matches legacy ptcrm's "Pick Next Call" calendar exactly: "today" (blue
   box-shadow ring) and "selected" (orange outline) are deliberately two
   different CSS properties, not two competing background fills — that's
   what lets them, and the has-calls red fill below, all stack on the same
   cell at once instead of one state visually clobbering another. */
.cal-day-today {
  box-shadow: 0 0 0 2px #0d6efd;
}
.cal-day-today .cal-day-num {
  color: #0d6efd;
  font-weight: 800;
}

.cal-day-selected {
  outline: 3px solid #ff9800;
  outline-offset: 1px;
}

.cal-day-past:not(.cal-day-other) {
  opacity: .45;
  cursor: default;
}
.cal-day-past:not(.cal-day-other):hover {
  transform: none !important;
}

.cal-day-has-calls {
  background: #e53935 !important;
}
.cal-day-has-calls .cal-day-num {
  color: #fff !important;
  font-weight: 700;
}
.cal-day-has-calls:hover {
  background: #b71c1c !important;
}
.cal-day-past.cal-day-has-calls:hover {
  background: #e53935 !important;
}

.cal-day-badge {
  font-size: .58rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  line-height: 1;
  margin-top: 1px;
}

/* --- resources/js/Components/CalendarBoard.vue (CalendarBoard.css) --- */
.calendar-info-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: color-mix(in srgb, var(--color1) 45%, #fff);
  color: #212325;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}

body.dark .calendar-info-note {
  background: var(--bg-surface-hover, #2a3340);
  color: var(--text-color);
}

.calendar-info-note .bi-info-circle {
  margin-top: 1px;
}

.calendar-info-note-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calendar-info-note-tip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  opacity: 0.85;
}

body.rtl .calendar-info-note {
  direction: rtl;
  text-align: right;
}

body.rtl .calendar-info-note-tip {
  flex-direction: row-reverse;
}

/* admin.root-only "view a specific advisor's board" select (CalendarBoard.vue),
   above the legend. */
.calendar-board-user {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.calendar-board-user select {
  max-width: 260px;
}

.calendar-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  justify-content: center;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted, #6c757d);
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}

.legend-item:hover {
  background: rgba(0, 0, 0, 0.035);
}

.legend-item.is-active {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-color, #444);
  font-weight: 600;
}

.legend-item.is-dimmed {
  opacity: 0.45;
}

body.rtl .legend-item {
  flex-direction: row-reverse;
}

.legend-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 10px;
  color: #fff;
}

.legend-dot-call {
  background: #0d6efd;
}

.legend-dot-task {
  background: #6c757d;
}

.legend-dot-booking {
  background: #198754;
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  border: 1px solid #BFC0C1;
  background: none;
  padding: 6px;
  border-radius: 15px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.calendar-nav-btn {
  background-color: var(--color1);
  color: #fff;
}

.calendar-month-label {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  min-width: 180px;
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-head {
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted, #6c757d);
  background: #f8f9fa;
  border-radius: 8px;
  padding: 8px 0;
}

body.dark .calendar-head {
  background: var(--bg-surface-alt, #232b37);
}

.calendar-day {
  min-height: 100px;
  background-color: var(--color1);
  color: #fff;
  border: 1px solid #eef1f5;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

body.dark .calendar-day {
  background-color: color-mix(in srgb, var(--color1) 85%, #fff);
  color: #fff;
  border-color: var(--border-color);
}

.calendar-day.is-other-month {
  opacity: 0.45;
}

.calendar-day.is-past {
  background-color: var(--color1);
  cursor: not-allowed;
}

body.dark .calendar-day.is-past {
  background: var(--bg-surface-alt, #232b37);
}

.calendar-day.is-past .calendar-day-num {
  color: #fff;
}

.calendar-day.is-today .calendar-day-num {
  background: #0d6efd;
  color: #fff;
}

.calendar-day.is-drag-over {
  border-color: #fd7e14;
  border-style: dashed;
  box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.2);
}

.calendar-day.is-selected {
  border-color: #0d6efd;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
}

.calendar-grid.is-compact .calendar-day {
  min-height: 64px;
}

.calendar-day-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.calendar-day-badge.badge-call {
  background: #eef4ff;
  color: #0d47a1;
}

.calendar-day-badge.badge-task {
  background: #eceef1;
  color: #495057;
}

.calendar-day-badge.badge-booking {
  background: #e9f7ef;
  color: #1e7e42;
}

.calendar-day-badge.badge-call:hover,
.calendar-day-badge.badge-call.is-active {
  background: #0d6efd;
  color: #fff;
}

.calendar-day-badge.badge-task:hover,
.calendar-day-badge.badge-task.is-active {
  background: #6c757d;
  color: #fff;
}

.calendar-day-badge.badge-booking:hover,
.calendar-day-badge.badge-booking.is-active {
  background: #198754;
  color: #fff;
}

body.dark .calendar-day-badge.badge-call {
  background: var(--bg-surface-hover, #2a3340);
  color: var(--text-color);
}

body.dark .calendar-day-badge.badge-task {
  background: var(--bg-surface-alt, #232b37);
  color: var(--text-muted, #adb5bd);
}

body.dark .calendar-day-badge.badge-booking {
  background: var(--bg-surface-alt, #232b37);
  color: #6fd39a;
}

.calendar-day-num {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.calendar-day-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.calendar-my-clients-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.calendar-day-panel {
  margin-top: 16px;
  border: 1px solid #eef1f5;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
}

body.dark .calendar-day-panel {
  background: var(--bg-surface);
  border-color: var(--border-color);
}

.calendar-day-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.calendar-day-panel-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.calendar-day-panel-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-selected-count {
  font-size: 13px;
  color: var(--text-muted, #6c757d);
}

.calendar-day-panel-empty {
  color: var(--text-muted, #6c757d);
  font-size: 13px;
  padding: 8px 0;
}

.calendar-day-table {
  margin-bottom: 0;
}

.calendar-day-table tbody tr {
  cursor: pointer;
  user-select: none;
}

.calendar-day-table tbody tr > td {
  padding: 7px 10px;
}

/*
 * Bootstrap 5 paints each td/th's background via an inset box-shadow driven
 * by the --bs-table-bg-state custom property (see .table-active in
 * bootstrap.css), not a plain background-color — so setting background
 * directly on the <tr> gets painted over. Setting the same variable here
 * lets Bootstrap's own cell rule pick up our color instead; outline still
 * renders fine directly on the <tr>.
 */
.calendar-day-table tbody tr {
  --bs-table-bg-state: #f0f3f7;
}

.calendar-day-table tbody tr.is-selected {
  --bs-table-bg-state: #cfe2ff;
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

body.dark .calendar-day-table tbody tr {
  --bs-table-bg-state: var(--bg-surface-alt, #232b37);
}

body.dark .calendar-day-table tbody tr:hover {
  --bs-table-bg-state: var(--bg-surface-hover, #2a3340);
}

body.dark .calendar-day-table tbody tr.is-selected {
  --bs-table-bg-state: rgba(13, 110, 253, 0.25);
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

@media (max-width: 767.98px) {
  .calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
  }

  .calendar-day {
    min-height: 70px;
    padding: 4px;
  }

  .calendar-my-clients-toggle {
    margin: 0 auto;
  }

  /* .calendar-nav's row (My Schedule/All toggle + prev/next/today buttons +
     month label) doesn't wrap on its own — its combined width (toggle
     ~116px + 3 buttons + month label's 180px min-width) comfortably exceeds
     a phone's viewport, pushing the whole toolbar wider than the page and
     forcing horizontal overflow instead of stacking. A plain wrap left the
     5 items splitting wherever they happened to run out of room (toggle+
     prev+month on row 1, next+today orphaned on row 2) — a named grid
     places them deliberately instead: prev/month/next together on row 1,
     the My Schedule toggle and Today button together on row 2. */
  .calendar-toolbar {
    padding: 8px;
    gap: 8px;
  }

  .calendar-nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "prev month next"
      "toggle toggle toggle";
    align-items: center;
    gap: 8px;
  }

  /* justify-self: center — grid items default to stretch, and prev/next
     share their column with a wider column-mate (prev with the My Schedule
     toggle), which was stretching these small arrow buttons out to match. */
  .calendar-nav-prev { grid-area: prev; justify-self: center; }
  .calendar-nav-next { grid-area: next; justify-self: center; }
  /* Today is redundant on mobile (tapping it just re-centers a calendar
     that's already compact enough to see at a glance) and there's no room
     to spare next to the toggle. */
  .calendar-nav-today { display: none; }
  .calendar-my-clients-toggle { grid-area: toggle; justify-self: center; margin: 8px 0 0; }

  .calendar-month-label {
    grid-area: month;
    min-width: 0;
    font-size: 16px;
  }

  .calendar-nav-btn {
    padding: 4px 8px;
    font-size: 13px;
  }
}

/* --- resources/js/Components/Modals/CalendarModal.vue (CalendarModal.css) --- */
.calendar-modal-full-page-link {
  font-size: 16px;
  font-weight: bold;
  /* text-decoration: underline; */
}

#calendarModal .modal-body {
  background-image: none;
}

/* --- resources/js/Components/Modals/Ai/BrainstormModal.vue (BrainstormModal.css) --- */
#brainstormModal .modal-body {
  background-image: none;
}
.bs-thread {
  max-height: 55vh;
  overflow-y: auto;
  padding: 20px;
}
.bs-turn {
  margin-bottom: 16px;
}
.bs-turn-user {
  display: flex;
  justify-content: flex-end;
}
.bs-turn-assistant {
  display: flex;
  justify-content: flex-start;
}
.bs-user-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 80%;
}
.bs-user-name {
  font-size: 11px;
  color: #999;
  margin-bottom: 3px;
  padding-right: 2px;
}
.bs-bubble-user {
  background: color-mix(in srgb, var(--color1) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--color1) 30%, #fff);
  border-radius: 12px 12px 2px 12px;
  padding: 8px 13px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.bs-assistant-col {
  max-width: 92%;
}
.bs-assistant-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.bs-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  color: #e5484d;
  font-size: 11px;
}
.bs-answer {
  background: #fff;
  border-radius: 0 10px 10px 10px;
  padding: 10px 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  outline: none;
  min-height: 48px;
  word-wrap: break-word;
  word-break: break-word;
  cursor: text;
}

.bs-thinking-block {
  margin-bottom: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #fafafa;
  overflow: hidden;
}
.bs-thinking-block.collapsed .bs-thinking-toggle .bs-chev {
  transform: rotate(-90deg);
}
.bs-thinking-block.active .bs-thinking-toggle .bs-spin {
  display: inline-block;
}
.bs-thinking-block.active .bs-thinking-toggle .bs-chev {
  display: none;
}
.bs-thinking-block.collapsed .bs-thinking-body {
  display: none;
}
.bs-thinking-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: #777;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.bs-thinking-toggle:hover {
  color: #333;
}
.bs-thinking-toggle .bs-chev {
  color: #e5484d;
  font-size: 11px;
  transition: transform .18s ease;
}
.bs-thinking-toggle .bs-spin {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: none;
  border: 2px solid color-mix(in srgb, var(--color1) 30%, #fff);
  border-top-color: #e5484d;
  animation: bs-spin-anim .8s linear infinite;
}
.bs-thinking-body {
  padding: 0 13px 12px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #888;
  max-height: 160px;
  overflow-y: auto;
  word-break: break-word;
}
@keyframes bs-spin-anim {
  to { transform: rotate(360deg); }
}

.bs-intro {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #888;
  background: #fafafa;
  border: 1px dashed #e0e0e0;
  border-radius: 10px;
  padding: 25px 12px;
}

/* Model picker / web-search toggle — same markup+classes as FerModal.vue's
   own ai-tab-nav controls, copied here since Vue scoped styles don't share
   across components. Unlike FerModal's copy, this one isn't nested inside
   an `.ai-tab-nav` wrapper (BrainstormModal has no tab bar), so it never
   gets that variant's extra-specificity `.ai-tab-nav .md_btn.ai-model-picker`
   height override — clients.css's plain `.md_btn` padding (loaded after
   this file, same specificity) was winning instead, and the native
   `<select>`'s own intrinsic line-height stacked on top, making the whole
   pill visibly taller than its sibling web-search pill. !important pins the
   compact size regardless of load order, matching the height FerModal's
   variant already resolves to. */
.ai-model-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 2px 10px !important;
  height: 37px;
  box-sizing: border-box;
}
.ai-model-picker select {
  border: none;
  background: transparent;
  font-size: 12px;
  color: #333;
  outline: none;
  height: 100%;
  padding: 0;
}
.ai-model-picker.ai-disabled {
  opacity: .5;
}
.ai-web-search-pill .switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 16px;
}
.ai-web-search-pill .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ai-web-search-pill .slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 16px;
  transition: .15s;
}
.ai-web-search-pill .slider::before {
  content: '';
  position: absolute;
  height: 12px;
  width: 12px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: .15s;
}
.ai-web-search-pill input:checked + .slider {
  background: var(--color1);
}
.ai-web-search-pill input:checked + .slider::before {
  transform: translateX(14px);
}

body.dark .bs-intro {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-muted);
}

/* Same fix as body.rtl .calendar-info-note above — .bs-intro is a flex row
   (icon + text), which without this renders LTR-ordered even under Arabic/
   Farsi (the icon ends up on the wrong side, text stays left-aligned). */
body.rtl .bs-intro {
  direction: rtl;
  text-align: right;
}
body.dark .bs-user-name {
  color: var(--text-muted);
}
body.dark .bs-bubble-user {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
  color: var(--text-color);
}
body.dark .bs-answer {
  background: var(--bg-surface-alt);
  color: var(--text-color);
  box-shadow: none;
}
body.dark .bs-avatar {
  background: var(--bg-surface);
  border-color: var(--border-color);
}
body.dark .bs-thinking-block {
  background: var(--bg-surface);
  border-color: var(--border-color);
}
body.dark .bs-thinking-toggle {
  color: var(--text-muted);
}
body.dark .bs-thinking-toggle:hover {
  color: var(--text-color);
}
body.dark .bs-thinking-body {
  color: var(--text-muted);
}
body.dark .ai-model-picker {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
  color: var(--text-muted);
}
body.dark .ai-model-picker select {
  color: var(--text-color);
}

/* --- resources/js/Pages/Dashboard.vue (Dashboard.css) --- */
/* Centered spinner shown while the async dashboard data fetch is in
   flight — the page itself renders instantly, this just covers the
   still-empty widgets until data() responds. */
.dashboard-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
}

.dashboard-loading-overlay .spinner-border {
  width: 3rem;
  height: 3rem;
}

.dashboard.dashboard-loading {
  opacity: 0.5;
  pointer-events: none;
}

.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.sortable-th .bi {
  font-size: 11px;
  color: #adb5bd;
}

/* Caps "Allocated Clients Per User" and "Advisor Performance" to ~7 visible
   rows, scrolling the rest instead of growing the card indefinitely. */
.scrollable-table-7 {
  max-height: 320px;
  overflow-y: auto;
}

.scrollable-table-9 {
  max-height: 365px;
  overflow-y: auto;
}

.scrollable-table-7 thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff;
}

body.dark .scrollable-table-7 thead th {
  background-color: var(--bg-surface);
  color: var(--text-color);
}

.dashboard-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dashboard-filter-select {
  min-width: 200px;
  flex: 1;
}

.dashboard-filter-row-stacked {
  flex-direction: column;
  align-items: stretch;
}

.dashboard-filter-row-stacked .dashboard-filter-select {
  min-width: 0;
}

.dashboard-filter-row-stacked .dashboard-filter-date {
  width: 100%;
}

.dashboard-filter-row-stacked .dashboard-filter-actions {
  margin-left: 0;
}

.dashboard-filter-date {
  width: 210px;
  flex: 0 0 auto;
}

.dashboard-filter-date .input-group-text {
  white-space: nowrap;
  width: 95px;
  justify-content: center;
}

.dashboard-filter-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.ai-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tcc-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #666;
}
.tcc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tcc-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.tcc-dot-called { background: #4154f1; }
.tcc-dot-spoken { background: #2eca6a; }
.tcc-dot-bookings { background: #f6c23e; }

.tcc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tcc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 0;
  border-bottom: 1px solid #e9ecef;
}
.tcc-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.tcc-user {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 180px;
  flex-shrink: 0;
}
.tcc-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tcc-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6c757d;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.tcc-name {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tcc-bars {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tcc-bar-track {
  position: relative;
  height: 16px;
  background: #f1f1f1;
  border-radius: 6px;
  overflow: hidden;
}
.tcc-bar {
  height: 100%;
  border-radius: 6px;
  transition: width .3s ease;
}
.tcc-bar-called { background: #4154f1; }
.tcc-bar-spoken { background: #2eca6a; }
.tcc-bar-ai { background: #f6c23e; }
.tcc-bar-bookings { background: #f6c23e; }
.tcc-bar-value {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  color: #333;
}

body.dark .tcc-legend { color: var(--text-muted); }
body.dark .tcc-name { color: var(--text-color); }
body.dark .tcc-bar-track { background: var(--bg-surface-alt); }
body.dark .tcc-bar-value { color: var(--text-color); }
body.dark .tcc-row { border-bottom-color: #fff; }

/* --- resources/js/Components/Ai/AiVoiceCard.vue (AiVoiceCard.css) --- */
.ai-msg-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ai-msg-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ai-answer-pane {
  background: #fff;
  padding: 10px 14px;
  font-size: 14px;
}
.no_data {
  background: #fafafa;
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 48px;
  font-size: 13px;
  line-height: 1.6;
  color: #aaa;
  border: 1px solid #ebebeb;
}
.ai-voice-card-btn {
  height: 42px;
}
.ai-mic-timer {
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.ai-card-disabled {
  opacity: .45;
  pointer-events: none;
  filter: grayscale(.6);
}

body.dark .ai-msg-card {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
}
body.dark .ai-msg-card-header {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-muted);
}
body.dark .ai-answer-pane {
  background: var(--bg-surface-alt);
  color: var(--text-color);
}
body.dark .no_data {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-muted);
}

/* --- resources/js/Components/Modals/Ai/ClientSummaryModal.vue (ClientSummaryModal.css) --- */
.client-journey-toggle {
  justify-content: center !important;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--color1);
}
.client-journey-toggle span {
  color: #fff;
  text-align: center;
}
.client-journey-chevron {
  color: #fff;
  transition: transform .2s;
}
.client-journey-toggle:not(.collapsed) .client-journey-chevron {
  transform: rotate(180deg);
}
.client-journey-timeline {
  counter-reset: journey-step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-height: 260px;
  overflow-y: auto;
}
.client-journey-timeline li {
  counter-increment: journey-step;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 14px 0;
  text-align: left;
  margin-top: 2px;
    margin-bottom: 2px;

}
.client-journey-timeline li::before {
  content: counter(journey-step);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color1);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.client-journey-time {
  font-size: 11px;
  color: #999;
}
.client-journey-url a {
  color: var(--color1);
  word-break: break-all;
}
.client-journey-url a:hover {
  text-decoration: underline;
}
.client-journey-url {
  font-size: 13px;
  color: #444;
  word-break: break-all;
}

/* --- resources/js/Components/Ai/AiStreamBlock.vue (AiStreamBlock.css) --- */
.ai-stream-block :deep(.ai-heading) {
  display: inline-block;
  margin-top: 6px;
}
.ai-thinking-block {
  margin-bottom: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #fafafa;
  overflow: hidden;
}
.ai-thinking-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px 12px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
}
.ai-thinking-toggle:hover {
  color: #333;
}
.ai-chev {
  transition: transform .15s ease;
}
.ai-thinking-body {
  margin: 0 12px 10px;
  max-height: 160px;
  overflow-y: auto;
  background: #fafafa;
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 48px;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  border: 1px solid #ebebeb;
}

.ai-msg-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
}
.ai-msg-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ai-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: #999;
}
.ai-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #999;
  cursor: pointer;
}
.ai-edit-btn:hover {
  background: #e9e9e9;
  color: #333;
}
.ai-edit-btn.active {
  background: #0b5996;
  color: #fff;
}
.ai-edit-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.ai-answer-pane {
  background: #fff;
  border-radius: 0 10px 10px 10px;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  outline: none;
  min-height: 48px;
  word-wrap: break-word;
  word-break: break-word;
  cursor: text;
}
.ai-msg-card .ai-answer-pane {
  border-radius: 0;
  box-shadow: none;
}
.ai-answer-edit textarea {
  font-size: 14px !important;
  font-family: 'Inter', sans-serif;
}
.no_data {
  background: #fafafa;
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 48px;
  font-size: 13px;
  line-height: 1.6;
  color: #aaa;
  border: 1px solid #ebebeb;
  text-align: center;
}

.ai-refine-form {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ddd;
  background: #fff;
}
.ai-refine-form textarea {
  font-size: 14px !important;
  font-family: 'Inter', sans-serif;
}
.ai-refine-btn {
  height: 55px;
}
.ai-mic-timer {
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.ai-refine-form textarea:focus {
  box-shadow: none;
}

body.dark .ai-stream-block {
  color: var(--text-color);
}
body.dark .ai-thinking-block {
  background: var(--bg-surface);
  border-color: var(--border-color);
}
body.dark .ai-thinking-toggle {
  color: var(--text-muted);
}
body.dark .ai-thinking-toggle:hover {
  color: var(--text-color);
}
body.dark .ai-thinking-body {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-color);
}
body.dark .ai-msg-card {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
}
body.dark .ai-msg-card-header {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-muted);
}
body.dark .ai-status-badge {
  color: var(--text-muted);
}
body.dark .ai-edit-btn {
  color: var(--text-muted);
}
body.dark .ai-edit-btn:hover {
  background: var(--bg-surface-alt);
  color: var(--text-color);
}
body.dark .ai-answer-pane {
  background: var(--bg-surface-alt);
  color: var(--text-color);
}
body.dark .ai-answer-edit textarea {
  background: var(--bg-surface-alt) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}
body.dark .no_data {
  background: var(--bg-surface);
  border-color: var(--border-color);
  color: var(--text-muted);
}
body.dark .ai-refine-form {
  background: var(--bg-surface-alt);
  border-color: var(--border-color);
}
body.dark .ai-refine-form textarea {
  background: var(--bg-surface-alt) !important;
  color: var(--text-color) !important;
}
body.dark .ai-refine-form textarea::placeholder {
  color: var(--text-muted);
}

/* --- resources/js/Pages/Auth/Login.vue (Login.css) --- */
.login-page {
    background: linear-gradient(135deg, var(--color1) 0%, var(--color2) 100%);
}

.login-card {
    overflow: hidden;
    border: none;
    border-radius: 16px;
    box-shadow: 0 1rem 3rem rgba(43, 12, 13, 0.35);
}

.login-card-banner {
    background-color: var(--color1);
    background-image: url('/dashboard-assets/img/pattern_background.png');
    background-size: cover;
    background-position: center;
    padding: 28px 16px 20px;
}

.login-logo-badge {
    width: 45%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.login-logo-badge img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.login-brand {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    font-family: "Nunito", sans-serif;
}

.brand-subtitle {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
}

.login-submit {
    background-color: var(--color1);
    border-color: var(--color1);
    color: #fff;
}

.login-submit:hover,
.login-submit:focus,
.login-submit:active {
    background-color: var(--color2);
    border-color: var(--color2);
    color: #fff;
}

/* --- resources/js/Components/Modals/ClientFiltersModal.vue (ClientFiltersModal.css) --- */
.client-filter-panel {
  position: fixed;
  top: 0;
  height: 100%;
  width: 400px;
  max-width: 85%;
  right: -400px;
  background-color: #fff;
  overflow-x: hidden;
  z-index: 1055;
  display: flex;
  flex-direction: column;
  transition: right 0.4s ease, left 0.4s ease;
  box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
}

.client-filter-panel.active {
  right: 0;
}

body.rtl .client-filter-panel {
  right: auto;
  left: -400px;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
}

body.rtl .client-filter-panel.active {
  left: 0;
}

.client-filter-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: url('/dashboard-assets/img/pattern_background.png') var(--color1-dark);
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}

.client-filter-panel-header .btn {
  color: #fff;
}

.client-filter-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* .sm-txt is a shared global label class (also used outside this panel,
   e.g. the client rows' inline-edit fields) with its own margin-top/bottom —
   overridden here, scoped to this panel only, to tighten up the noticeably
   larger gap it left above/below each filter field. */
.client-filter-panel-body .sm-txt {
  margin-top: 0;
  margin-bottom: 2px;
}

.fished-toggle-field {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.fished-toggle-field .form-switch {
  padding-left: 2.75em;
}

.fished-toggle-field .form-check-input {
  width: 2.5em;
  height: 1.35em;
  cursor: pointer;
}

.fished-toggle-field .form-check-input:checked {
  background-color: var(--color1-dark);
  border-color: var(--color1-dark);
}

.fished-toggle-field .form-check-input:focus {
  border-color: var(--color1-dark);
  box-shadow: 0 0 0 0.2rem rgba(var(--color1-rgb), 0.25);
}

body.dark .fished-toggle-field {
  border-color: var(--border-color);
}

/* Country of residence field's include/exclude toggle — the multiselect
   shrinks to share the row with a small two-segment button group beside it
   instead of taking the full field width, so the current include-vs-exclude
   state is always visible at a glance. A plain checkbox switch looked like
   filtering was "off" in its default (unchecked = Include) state, so this
   is two always-visible buttons instead — whichever mode is active gets a
   filled background, so there's no ambiguous "off" look either way. The
   group sits flush against the select (no gap, its shared border removed,
   adjoining corners squared off) so the pair reads as one control. */
.country-negate-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.country-negate-row .country-negate-select {
  flex: 1 1 auto;
  min-width: 0;
}

.country-negate-row .country-negate-select .searchable-multiselect-control {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.country-negate-switch {
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-left: none;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
  max-height: 47px;
}

.country-negate-option {
  flex: 1;
  border: none;
  background: transparent;
  color: #888;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.country-negate-option + .country-negate-option {
  border-top: 1px solid #ddd;
}

.country-negate-option:hover:not(.active) {
  background: rgba(0, 0, 0, .05);
}

.country-negate-option.active {
  color: #fff;
}

.country-negate-option:not(.negate).active {
  background: #0d6222;
}

.country-negate-option.negate.active {
  background: var(--color1-dark);
}

body.dark .country-negate-switch {
  border-color: var(--border-color);
}

body.dark .country-negate-option {
  color: var(--text-muted);
}

body.dark .country-negate-option + .country-negate-option {
  border-top-color: var(--border-color);
}

body.dark .country-negate-option:hover:not(.active) {
  background: var(--bg-surface-hover);
}

.client-filter-panel-footer {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 14px;
  border-top: 1px solid #eee;
}

.client-filter-backdrop {
  position: fixed;
  inset: 0;
  width: 0;
  background-color: rgba(43, 42, 42, 0.47);
  z-index: 1050;
  transition: background-color 0.4s ease;
  pointer-events: none;
}

.client-filter-backdrop.active {
  width: 100%;
  pointer-events: auto;
}

body.dark .client-filter-panel {
  background-color: var(--bg-surface);
  color: var(--text-color);
}

body.dark .client-filter-panel-footer {
  border-top-color: var(--border-color);
}

/* --- resources/js/Components/SearchableCountrySelect.vue (SearchableCountrySelect.css) --- */
.searchable-select-menu {
  position: absolute;
  z-index: 1060;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

.searchable-select-item {
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

.searchable-select-item:hover {
  background: #f0f0f0;
}

.country-select-with-flag {
  position: relative;
}

.country-select-with-flag .country-select-flag {
  /* Beats flag-icons' own `.fi { position: relative }` on specificity —
     with equal specificity, cascade order would win instead, and
     flag-icons' bundled CSS loads after this file (see app.js import). */
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

.country-select-with-flag input.has-flag {
  padding-left: 46px !important;
}

.country-select-flag,
.searchable-select-item .fi {
  font-size: 14px;
  flex-shrink: 0;
}

/* --- resources/js/Components/IconPicker.vue (IconPicker.css) --- */
.icon-picker {
  position: relative;
}

.icon-picker > button.form-control {
  border: 1px solid #ced4da !important;
}

.icon-picker-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  width: 320px;
}

.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.icon-picker-item {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  padding: 6px;
  font-size: 1.1rem;
  cursor: pointer;
}

.icon-picker-item:hover {
  background: #f6f9ff;
  border-color: #dee2e6;
}

.icon-picker-item.active {
  background: var(--color1);
  color: #fff;
}

body.dark .icon-picker > button.form-control { border-color: #2e3846 !important; }
body.dark .icon-picker-item:hover { background: #2a3340; border-color: #2e3846; }

/* --- resources/js/Components/IconDropdown.vue (IconDropdown.css) --- */
.dropdown-menu {
  max-height: 260px;
  overflow-y: auto;
}

.dropdown-menu .dropdown-item {
  font-size: 12px;
}

.dropdown-menu .dropdown-item i {
  font-size: 14px;
  margin-right: 5px;
}

/* --- resources/js/Pages/CrmApis/view.vue (view.css) --- */
.collapse-chevron {
  transition: transform 0.2s ease;
}

.card-header[aria-expanded="false"] .collapse-chevron {
  transform: rotate(-90deg);
}

.log-detail-pre {
  background: rgba(0, 0, 0, 0.03);
  padding: 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow: auto;
}

/* --- resources/js/Pages/Welcome.vue (Welcome.css) --- */
.bg-dots-darker {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(0,0,0,0.07)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    .dark\:bg-dots-lighter {
        background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E");
    }
}

/* --- resources/js/Pages/Locations/index.vue (index.css) --- */
.location-tree ul {
  border-left: 2px solid #e9ecef;
  margin-left: 0.5rem;
}

/* --- resources/js/Components/StatusToggle.vue (StatusToggle.css) --- */
.status-toggle {
  position: relative;
  display: inline-block;
  width: var(--status-toggle-width, 80px);
  height: 26px;
  margin: 0;
}

.status-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.status-toggle__track {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: #ccd0d5;
  border-radius: 999px;
  overflow: hidden;
  transition: background-color .2s ease;
}

.status-toggle__knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .2s ease;
}

.status-toggle__label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.status-toggle__label--on {
  left: 8px;
  color: #fff;
}

.status-toggle__label--off {
  right: 8px;
  color: #6c757d;
}

.status-toggle input:checked + .status-toggle__track {
  background-color: #2eca6a;
}

.status-toggle input:checked + .status-toggle__track .status-toggle__knob {
  transform: translateX(calc(var(--status-toggle-width, 80px) - 26px));
}

.status-toggle input:checked + .status-toggle__track .status-toggle__label--on {
  opacity: 1;
}

.status-toggle input:not(:checked) + .status-toggle__track .status-toggle__label--off {
  opacity: 1;
}

.status-toggle--disabled .status-toggle__track {
  cursor: not-allowed;
  opacity: .6;
}

/* --- resources/js/Components/SearchableSelect.vue (SearchableSelect.css) --- */
.searchable-select-menu {
  position: absolute;
  z-index: 1060;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

.searchable-select-item {
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

.searchable-select-item:hover {
  background: #f0f0f0;
}

/* --- resources/js/Components/SearchableMultiSelect.vue (SearchableMultiSelect.css) --- */
.searchable-multiselect-control {
  cursor: text;
  padding: .25rem .5rem !important;
  font-size: 13px !important;
  /* Chips now render inside this box alongside the query input (instead of
     in a separate .searchable-multiselect-tags block below it) so it needs
     to grow across multiple wrapped lines rather than stay pinned to
     form-control's normal single-line height. */
  height: auto !important;
  min-height: 38px;
}

.searchable-multiselect-control .tag-chip {
  margin: 0;
}

.searchable-multiselect-input {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  padding: 0;
  font-size: 13px;
  /* !important: Tailwind Forms' `[type='text']{background-color:#fff}` base
     reset loads later via @vite and ties this rule's specificity, so
     without !important it wins and paints the input opaque white on top of
     the dark-themed control div. */
  background: transparent !important;
}

/* --- resources/js/Components/SearchableMultiSelect.vue (SearchableMultiSelect.global.css) --- */
/* Unscoped: the menu is teleported to <body>, outside this component's
   scoped-style boundary. */
.searchable-select-menu {
  z-index: 1060;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
}

.searchable-select-item {
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}

.searchable-select-item:hover {
  background: #f0f0f0;
}

.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2eca6a;
  margin-right: 5px;
  flex-shrink: 0;
}

body.dark .searchable-select-menu {
  background: var(--bg-surface);
  border-color: var(--border-color);
}

body.dark .searchable-select-item:hover {
  background: var(--bg-surface-hover);
}

body.dark .searchable-select-item {
  color: var(--text-color);
}

/* The generic `body.dark .form-control` override (dark-mode.css) covers the
   outer `.searchable-multiselect-control` div, but the plain-text `query`
   input inside it has its own hardcoded `background: transparent` above,
   which only shows through correctly once the parent's dark background is
   actually applied — belt-and-suspenders explicit overrides here too, same
   as every other component in this file gets its own body.dark block. */
body.dark .searchable-multiselect-control {
  background-color: var(--bg-surface-alt);
  border-color: var(--border-color);
}

body.dark .searchable-multiselect-input {
  color: var(--text-color);
}

body.dark .searchable-multiselect-input::placeholder {
  color: var(--text-muted);
}

/* --- resources/js/Components/Modals/MoodPickerModal.vue (MoodPickerModal.css) --- */
.mood-emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.mood-emoji-btn {
  width: 48px;
  height: 48px;
  font-size: 22px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.15s;
}

.mood-emoji-btn:hover {
  background: #f6f9ff;
}

.mood-emoji-selected {
  border-color: var(--color1-dark);
  background: color-mix(in srgb, var(--color1) 7%, #fff);
}

/* --- resources/js/Components/LocationTreeNode.vue (LocationTreeNode.css) --- */
.location-tree-node__spacer {
  display: inline-block;
  width: 1.25rem;
}

/* --- resources/js/Components/CongratsBanner.vue (CongratsBanner.css) --- */
.congrats-banner {
    top: 90px;
    z-index: 1050;
}

/* --- resources/js/Components/Chart.vue (Chart.css) --- */
.chart-widget {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chart-container {
  width: 100%;
  height: 300px; /* Set a fixed height for better chart behavior */
  position: relative; /* Ensure proper positioning */
}

/* Caps the visible window (like .scrollable-table-7 elsewhere) instead of
   squeezing every row into a fixed height — the canvas itself grows taller
   than this container via its own inline style (see canvasHeight). */
.chart-container-scrollable {
  overflow-y: auto;
}

canvas {
  height: 100% !important;
  width: 100% !important;
  padding: 5px;
}

/* The custom property is set inline (see the canvas :style binding) so its
   *value* is dynamic, while the height declaration itself stays in the
   stylesheet where its higher specificity than plain `canvas{...}` can
   actually win against that rule's own !important. */
.chart-container-scrollable canvas {
  height: var(--canvas-height) !important;
  width: 100% !important;
}

.chart-legend-list {
  max-height: 110px;
  overflow-y: auto;
  margin-top: 8px;
  padding: 4px 2px;
  border-top: 1px solid #eef1f5;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}

.chart-legend-item:hover {
  background: rgba(0, 0, 0, 0.035);
}

.chart-legend-item.is-hidden {
  opacity: 0.45;
  text-decoration: line-through;
}

.chart-legend-item input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

.chart-legend-swatch {
  width: 10px;
  height: 10px;
  min-width: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-legend-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.chart-legend-value {
  font-weight: 600;
  color: #6b7280;
  flex-shrink: 0;
}

body.dark .chart-legend-list {
  border-top-color: var(--border-color);
}

body.dark .chart-legend-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.dark .chart-legend-value {
  color: var(--text-muted);
}

/* --- resources/js/Components/BottomNav.vue (BottomNav.css) --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 997;
    background-color: #fff;
    box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.15);
}

.bn-container {
    display: flex;
    width: 100%;
    list-style: none;
    justify-content: space-around;
    margin: 0;
    padding: 6px 0;
}

.bn-item {
    display: flex;
    flex: 1;
}

.bn-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 4px;
    border-radius: 8px;
    color: #000;
    text-decoration: none;
    transition: margin-top 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.bn-icon {
    font-size: 1.2em;
    line-height: 1;
    color: #000;
}

.bn-text {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    margin-top: 3px;
}

.bn-item.active .bn-link {
    width: 60px;
    height: 60px;
    margin: -14px auto 0;
    border-radius: 50%;
    color: var(--color1);
    background-color: #f0f0f0;
    box-shadow: 0px 0px 16px rgba(1, 41, 112, 0.15);
}

.bn-item.active .bn-icon {
    color: var(--color1);
}

body.dark .bottom-nav { background-color: var(--bg-surface); }
body.dark .bn-link { color: var(--text-muted); }
/* .bn-icon's own color:#000 directly matches the element, so it always beats
   the inherited (non-!important) color from .bn-link above — needs its own
   dark override too, otherwise the icon stays black on the dark surface. */
body.dark .bn-icon { color: var(--text-muted); }
body.dark .bn-item.active .bn-link { color: #fff; background-color: var(--bg-surface-alt); }
body.dark .bn-item.active .bn-icon { color: #fff; }

/* --- resources/js/Components/LogsChart.vue (LogsChart.css) --- */
.chart-container {
  width: 100%;
  height: 300px; /* Set a fixed height for better chart behavior */
  position: relative; /* Ensure proper positioning */
}

canvas {
  height: 100% !important;
  width: 100% !important;
  padding: 5px;
}

/* --- resources/js/Components/Pagination.vue (Pagination.css) --- */
@media (max-width: 575.98px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }

  .pagination .page-link {
    padding: 4px 9px;
    font-size: 13px;
    min-width: 30px;
    text-align: center;
  }
}

/* --- Central "vertical card" layout for data tables on mobile ---
   Add class="table-mobile-cards" to any <table> and a :data-label="..."
   attribute to every <th scope="row">/<td> in its <tbody> (the label text
   shown to the left of that cell's value once stacked). Used by e.g.
   resources/js/Pages/Bookings/index.vue and resources/js/Pages/Categories/index.vue. */
@media (max-width: 768px) {
  .table-mobile-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .table-mobile-cards,
  .table-mobile-cards tbody,
  .table-mobile-cards tr,
  .table-mobile-cards th,
  .table-mobile-cards td {
    display: block;
    width: 100%;
  }
  .table-mobile-cards tbody tr {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    margin-bottom: .75rem;
  }
  .table-mobile-cards tbody th[scope="row"],
  .table-mobile-cards tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right;
    padding: .5rem .75rem;
    border: none;
    border-bottom: 1px solid var(--bs-border-color, #eee);
  }
  .table-mobile-cards tbody tr > :last-child {
    border-bottom: none;
  }
  .table-mobile-cards tbody th[data-label]::before,
  .table-mobile-cards tbody td[data-label]::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    margin-right: .75rem;
  }

  /* style-direction.css forces direction:ltr on every th/td (so mixed
     Arabic/English text renders predictably) — that also flattens this
     layout's flex ordering back to LTR, so the label always lands on the
     left even in Arabic/Persian. Higher specificity (two classes) restores
     rtl direction just for these stacked cards, flipping label to the
     right/value to the left as expected; the label's gap has to flip from
     margin-right to margin-left to still land between label and value. */
  body.rtl .table-mobile-cards tbody th[scope="row"],
  body.rtl .table-mobile-cards tbody td {
    direction: rtl;
  }
  body.rtl .table-mobile-cards tbody th[data-label]::before,
  body.rtl .table-mobile-cards tbody td[data-label]::before {
    text-align: right;
    margin-right: 0;
    margin-left: .75rem;
  }

.client-num{margin:12px 10px !important;
}

}


/* Hide on screens wider than 768px */
@media screen and (min-width: 768px) {
  .hideWeb {
    display: none !important;
  }
}