/* ==========================================================================
   SJOLIE CRM DESIGN SYSTEM — Concept B + White/Caramel Sidebar
   Applied AFTER all existing stylesheets.
   Uses !important to override Hyper admin template defaults.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --sjolie-espresso: #3a2d27;
  --sjolie-deep: #4e3629;
  --sjolie-mocha: #6b5a50;
  --sjolie-caramel: #b4926e;
  --sjolie-sand: #dcbfa6;
  --sjolie-pearl: #f3ece3;
  --sjolie-cream: #fbfbf8;
  --sjolie-white: #ffffff;
  --sjolie-border: #e8ddd4;
  --sjolie-success: #5a8a5e;
  --sjolie-danger: #c0392b;
  --sjolie-warning: #e67e22;
  --sjolie-serif: 'Playfair Display', serif;
  --sjolie-sans: 'DM Sans', sans-serif;
}

/* --------------------------------------------------------------------------
   BASE / GLOBAL
   -------------------------------------------------------------------------- */
body {
  font-family: var(--sjolie-sans) !important;
  color: var(--sjolie-espresso) !important;
  background-color: var(--sjolie-cream) !important;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.modal-title {
  font-family: var(--sjolie-serif) !important;
  color: var(--sjolie-espresso) !important;
}

a {
  color: var(--sjolie-caramel);
}
a:hover {
  color: var(--sjolie-espresso);
}

/* Border-radius: Rounded corners applied per-component (see end of file) */

::selection {
  background: var(--sjolie-caramel);
  color: var(--sjolie-white);
}

/* --------------------------------------------------------------------------
   LEFT SIDEBAR — White + Caramel Accents
   -------------------------------------------------------------------------- */
.left-side-menu {
  background: var(--sjolie-white) !important;
  border-right: 1px solid var(--sjolie-border) !important;
  box-shadow: none !important;
  width: 240px !important;
}

/* Logo box */
.logo-box {
  background-color: var(--sjolie-white) !important;
  border-bottom: 1px solid var(--sjolie-border) !important;
  border-right: 1px solid var(--sjolie-border) !important;
  width: 240px !important;
}
.logo-box .logo span,
.logo-box .logo img {
  filter: none !important;
}
.logo-light {
  display: block !important;
}
.logo-dark {
  display: none !important;
}

/* Sidebar nav items */
#sidebar-menu > ul > li > a {
  color: var(--sjolie-mocha) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  padding: 11px 20px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.15s ease !important;
}

#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li > a:focus {
  color: var(--sjolie-espresso) !important;
  background: var(--sjolie-pearl) !important;
}

#sidebar-menu > ul > li > a.mm-active,
#sidebar-menu > ul > li.mm-active > a {
  color: var(--sjolie-espresso) !important;
  background: var(--sjolie-pearl) !important;
  border-left-color: var(--sjolie-caramel) !important;
  font-weight: 600 !important;
}

/* Sidebar icons */
#sidebar-menu > ul > li > a i {
  color: var(--sjolie-caramel) !important;
  font-size: 15px !important;
}

/* Sub-menus */
#sidebar-menu ul ul a {
  color: var(--sjolie-mocha) !important;
  font-size: 13px !important;
}
#sidebar-menu ul ul a:hover {
  color: var(--sjolie-espresso) !important;
}
#sidebar-menu ul ul a.mm-active {
  color: var(--sjolie-caramel) !important;
  font-weight: 500 !important;
}

/* Menu section titles */
.menu-title {
  color: var(--sjolie-sand) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* Sidebar user section if present */
.left-side-menu .user-box {
  background: var(--sjolie-pearl) !important;
  border-bottom: 1px solid var(--sjolie-border) !important;
}

/* --------------------------------------------------------------------------
   TOP NAVIGATION BAR
   -------------------------------------------------------------------------- */
.navbar-custom {
  background-color: var(--sjolie-white) !important;
  border-bottom: 1px solid var(--sjolie-border) !important;
  box-shadow: none !important;
}

.navbar-custom .topnav-menu .nav-link {
  color: var(--sjolie-mocha) !important;
}
.navbar-custom .topnav-menu .nav-link:hover {
  color: var(--sjolie-espresso) !important;
}

/* Search box */
.app-search .form-control,
.app-search input {
  background: var(--sjolie-pearl) !important;
  border: 1px solid var(--sjolie-border) !important;
  color: var(--sjolie-espresso) !important;
  font-family: var(--sjolie-sans) !important;
}
.app-search .form-control:focus {
  border-color: var(--sjolie-caramel) !important;
  box-shadow: 0 0 0 2px rgba(180, 146, 110, 0.1) !important;
}

/* Notification icons */
.navbar-custom .nav-link i,
.noti-icon {
  color: var(--sjolie-mocha) !important;
}
.noti-icon-badge {
  background-color: var(--sjolie-caramel) !important;
  font-size: 9px !important;
  min-width: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 14px !important;
  padding: 0 !important;
  top: 10px !important;
  right: 4px !important;
  display: inline-block !important;
  text-align: center !important;
}
/* Hide badge when notification count is zero */
.noti-icon-badge:empty,
.noti-icon-badge[data-count="0"] {
  display: none !important;
}

/* User dropdown */
.navbar-custom .dropdown-toggle {
  color: var(--sjolie-espresso) !important;
}

/* --------------------------------------------------------------------------
   CONTENT AREA
   -------------------------------------------------------------------------- */
.content-page {
  background-color: var(--sjolie-cream) !important;
}

.content {
  background-color: var(--sjolie-cream) !important;
}

/* --------------------------------------------------------------------------
   PAGE TITLES — Editorial style with espresso underline
   -------------------------------------------------------------------------- */
.page-title-box {
  border-bottom: 2px solid var(--sjolie-espresso) !important;
  padding-bottom: 14px !important;
  margin-bottom: 28px !important;
  background: none !important;
}

.page-title-box .page-title {
  font-family: var(--sjolie-serif) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--sjolie-espresso) !important;
  margin: 0 !important;
}

.page-title-box .breadcrumb {
  background: none !important;
}
.page-title-box .breadcrumb a {
  color: var(--sjolie-caramel) !important;
}
.page-title-box .breadcrumb .active {
  color: var(--sjolie-mocha) !important;
}

/* --------------------------------------------------------------------------
   CARDS — Clean white with border, caramel top accent
   -------------------------------------------------------------------------- */
.card {
  background: var(--sjolie-white) !important;
  border: 1px solid var(--sjolie-border) !important;
  box-shadow: none !important;
  margin-bottom: 24px !important;
  position: relative;
  overflow: visible;
}

/* Subtle caramel top accent on dashboard stat cards */
.card.sjolie-stat,
.icon-div {
  position: relative;
}

.card-body {
  padding: 24px !important;
}

.card-header,
.card-footer {
  background: var(--sjolie-white) !important;
  border-color: var(--sjolie-border) !important;
}

/* Card titles */
.card-title,
.card-header h4,
.card-header h5 {
  font-family: var(--sjolie-serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--sjolie-espresso) !important;
}

/* --------------------------------------------------------------------------
   STAT CARDS / DASHBOARD WIDGETS
   -------------------------------------------------------------------------- */
.card .card-body h3,
.card-body .mb-1 {
  font-family: var(--sjolie-serif) !important;
  font-weight: 700 !important;
  color: var(--sjolie-espresso) !important;
}

.card-body .text-muted {
  color: var(--sjolie-mocha) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Dashboard stat icon colors */
.card-body .text-warning,
.card-body i.text-warning {
  color: var(--sjolie-caramel) !important;
}
.card-body .text-danger,
.card-body i.text-danger {
  color: var(--sjolie-caramel) !important;
}
.card-body .text-success,
.card-body i.text-success {
  color: var(--sjolie-success) !important;
}
.card-body .text-info,
.card-body i.text-info {
  color: var(--sjolie-mocha) !important;
}
.card-body .text-primary,
.card-body i.text-primary {
  color: var(--sjolie-caramel) !important;
}

/* --------------------------------------------------------------------------
   TABLES — All DataTables and standard tables
   -------------------------------------------------------------------------- */
.table,
table.dataTable,
.table-responsive table {
  border-collapse: collapse !important;
}

.table > thead > tr > th,
table.dataTable > thead > tr > th,
.table-light th,
thead.table-light th {
  background-color: var(--sjolie-white) !important;
  color: var(--sjolie-mocha) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--sjolie-espresso) !important;
  border-top: none !important;
  padding: 12px 16px !important;
}

.table > tbody > tr > td,
table.dataTable > tbody > tr > td {
  font-family: var(--sjolie-sans) !important;
  font-size: 13.5px !important;
  color: var(--sjolie-espresso) !important;
  border-bottom: 1px solid var(--sjolie-border) !important;
  padding: 14px 16px !important;
  vertical-align: middle !important;
}

/* Alternating row colors */
.table-striped > tbody > tr:nth-of-type(even) > td,
table.dataTable > tbody > tr:nth-of-type(even) > td,
.table > tbody > tr:nth-of-type(even) > td {
  background-color: var(--sjolie-pearl) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
table.dataTable > tbody > tr:nth-of-type(odd) > td,
.table > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--sjolie-white) !important;
}

/* Row hover */
.table-hover > tbody > tr:hover > td,
table.dataTable > tbody > tr:hover > td,
.table > tbody > tr:hover > td {
  background-color: rgba(180, 146, 110, 0.06) !important;
}

/* DataTables specific overrides */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--sjolie-border) !important;
  background: var(--sjolie-white) !important;
  font-family: var(--sjolie-sans) !important;
  padding: 6px 12px !important;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--sjolie-caramel) !important;
  box-shadow: 0 0 0 2px rgba(180, 146, 110, 0.1) !important;
  outline: none !important;
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--sjolie-border) !important;
  background: var(--sjolie-white) !important;
  font-family: var(--sjolie-sans) !important;
}

.dataTables_wrapper .dataTables_info {
  color: var(--sjolie-mocha) !important;
  font-size: 13px !important;
}

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid var(--sjolie-border) !important;
  background: var(--sjolie-white) !important;
  color: var(--sjolie-mocha) !important;
  font-family: var(--sjolie-sans) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--sjolie-pearl) !important;
  color: var(--sjolie-espresso) !important;
  border-color: var(--sjolie-border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--sjolie-espresso) !important;
  color: var(--sjolie-white) !important;
  border-color: var(--sjolie-espresso) !important;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-info {
  background-color: var(--sjolie-espresso) !important;
  border-color: var(--sjolie-espresso) !important;
  color: var(--sjolie-white) !important;
  font-family: var(--sjolie-sans) !important;
  font-weight: 500 !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
  background-color: var(--sjolie-deep) !important;
  border-color: var(--sjolie-deep) !important;
  box-shadow: 0 4px 12px rgba(58, 45, 39, 0.2) !important;
}

.btn-success {
  background-color: var(--sjolie-success) !important;
  border-color: var(--sjolie-success) !important;
}

.btn-danger {
  background-color: var(--sjolie-danger) !important;
  border-color: var(--sjolie-danger) !important;
}

.btn-warning {
  background-color: var(--sjolie-caramel) !important;
  border-color: var(--sjolie-caramel) !important;
  color: var(--sjolie-white) !important;
}

.btn-secondary,
.btn-light,
.btn-outline-secondary {
  background-color: var(--sjolie-white) !important;
  border: 1px solid var(--sjolie-border) !important;
  color: var(--sjolie-espresso) !important;
}
.btn-outline-secondary:hover,
.btn-secondary:hover,
.btn-light:hover {
  background-color: var(--sjolie-pearl) !important;
}

.btn-outline-primary {
  color: var(--sjolie-espresso) !important;
  border-color: var(--sjolie-espresso) !important;
  background: none !important;
}
.btn-outline-primary:hover {
  background: var(--sjolie-espresso) !important;
  color: var(--sjolie-white) !important;
}

/* --------------------------------------------------------------------------
   FORM INPUTS
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
  border: 1px solid var(--sjolie-border) !important;
  background-color: var(--sjolie-white) !important;
  color: var(--sjolie-espresso) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--sjolie-caramel) !important;
  box-shadow: 0 0 0 3px rgba(180, 146, 110, 0.1) !important;
  outline: none !important;
}

.form-label,
label {
  font-family: var(--sjolie-sans) !important;
  color: var(--sjolie-mocha) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.input-group-text {
  background: var(--sjolie-pearl) !important;
  border: 1px solid var(--sjolie-border) !important;
  color: var(--sjolie-mocha) !important;
}

/* Select2 overrides */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--sjolie-border) !important;
  background: var(--sjolie-white) !important;
  min-height: 40px !important;
}
.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--sjolie-caramel) !important;
  box-shadow: 0 0 0 3px rgba(180, 146, 110, 0.1) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--sjolie-caramel) !important;
  color: var(--sjolie-white) !important;
}
.select2-dropdown {
  border-color: var(--sjolie-border) !important;
}

/* --------------------------------------------------------------------------
   BADGES & STATUS PILLS
   -------------------------------------------------------------------------- */
.badge,
.badge-soft-success,
.badge-soft-primary,
.badge-soft-info {
  font-family: var(--sjolie-sans) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}
.badge-soft-success,
.badge.bg-success,
.badge.bg-soft-success {
  background-color: #e8f5e9 !important;
  color: var(--sjolie-success) !important;
}
.badge-soft-warning,
.badge.bg-warning,
.badge.bg-soft-warning {
  background-color: #fff3e0 !important;
  color: var(--sjolie-warning) !important;
}
.badge-soft-danger,
.badge.bg-danger,
.badge.bg-soft-danger {
  background-color: #fce4ec !important;
  color: var(--sjolie-danger) !important;
}
.badge-soft-primary,
.badge.bg-primary,
.badge.bg-soft-primary {
  background-color: var(--sjolie-pearl) !important;
  color: var(--sjolie-espresso) !important;
}
.badge-soft-info,
.badge.bg-info,
.badge.bg-soft-info {
  background-color: var(--sjolie-pearl) !important;
  color: var(--sjolie-mocha) !important;
}

/* --------------------------------------------------------------------------
   MODALS
   -------------------------------------------------------------------------- */
.modal-content {
  border: 1px solid var(--sjolie-border) !important;
  box-shadow: 0 12px 48px rgba(58, 45, 39, 0.12) !important;
}
.modal-header {
  background: var(--sjolie-white) !important;
  border-bottom: 1px solid var(--sjolie-border) !important;
}
.modal-header .modal-title {
  font-family: var(--sjolie-serif) !important;
  font-weight: 600 !important;
  color: var(--sjolie-espresso) !important;
}
.modal-footer {
  border-top: 1px solid var(--sjolie-border) !important;
  background: var(--sjolie-cream) !important;
}

/* --------------------------------------------------------------------------
   ALERTS
   -------------------------------------------------------------------------- */
.alert-success {
  background-color: #e8f5e9 !important;
  border-color: #c8e6c9 !important;
  color: var(--sjolie-success) !important;
}
.alert-danger {
  background-color: #fce4ec !important;
  border-color: #f8bbd0 !important;
  color: var(--sjolie-danger) !important;
}
.alert-warning {
  background-color: #fff3e0 !important;
  border-color: #ffe0b2 !important;
  color: var(--sjolie-warning) !important;
}
.alert-info {
  background-color: var(--sjolie-pearl) !important;
  border-color: var(--sjolie-border) !important;
  color: var(--sjolie-mocha) !important;
}

/* --------------------------------------------------------------------------
   DROPDOWNS
   -------------------------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--sjolie-border) !important;
  box-shadow: 0 8px 32px rgba(58, 45, 39, 0.08) !important;
  background: var(--sjolie-white) !important;
}
.dropdown-item {
  color: var(--sjolie-mocha) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 13px !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--sjolie-pearl) !important;
  color: var(--sjolie-espresso) !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--sjolie-caramel) !important;
  color: var(--sjolie-white) !important;
}
.dropdown-divider {
  border-color: var(--sjolie-border) !important;
}

/* --------------------------------------------------------------------------
   TABS & NAV TABS
   -------------------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 2px solid var(--sjolie-border) !important;
}
.nav-tabs .nav-link {
  color: var(--sjolie-mocha) !important;
  font-family: var(--sjolie-sans) !important;
  font-weight: 500 !important;
  border: none !important;
  padding: 10px 20px !important;
}
.nav-tabs .nav-link:hover {
  color: var(--sjolie-espresso) !important;
  border: none !important;
}
.nav-tabs .nav-link.active {
  color: var(--sjolie-espresso) !important;
  border: none !important;
  border-bottom: 3px solid var(--sjolie-caramel) !important;
  background: none !important;
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   PAGINATION (non-DataTables)
   -------------------------------------------------------------------------- */
.page-link {
  color: var(--sjolie-mocha) !important;
  border-color: var(--sjolie-border) !important;
  background: var(--sjolie-white) !important;
}
.page-link:hover {
  background: var(--sjolie-pearl) !important;
  color: var(--sjolie-espresso) !important;
}
.page-item.active .page-link {
  background: var(--sjolie-espresso) !important;
  border-color: var(--sjolie-espresso) !important;
  color: var(--sjolie-white) !important;
}

/* --------------------------------------------------------------------------
   SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--sjolie-cream);
}
::-webkit-scrollbar-thumb {
  background: var(--sjolie-sand);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sjolie-caramel);
}

/* --------------------------------------------------------------------------
   SWEETALERT2
   -------------------------------------------------------------------------- */
.swal2-popup {
  font-family: var(--sjolie-sans) !important;
  border-radius: 0 !important;
  border: 1px solid var(--sjolie-border) !important;
}
.swal2-title {
  font-family: var(--sjolie-serif) !important;
  color: var(--sjolie-espresso) !important;
}
.swal2-confirm {
  background-color: var(--sjolie-espresso) !important;
  border-radius: 0 !important;
}
.swal2-cancel {
  background-color: var(--sjolie-white) !important;
  color: var(--sjolie-espresso) !important;
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   TOOLTIPS & POPOVERS
   -------------------------------------------------------------------------- */
.tooltip-inner {
  background: var(--sjolie-espresso) !important;
  font-family: var(--sjolie-sans) !important;
}
.popover {
  border-color: var(--sjolie-border) !important;
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--sjolie-white) !important;
  border-top: 1px solid var(--sjolie-border) !important;
  color: var(--sjolie-mocha) !important;
}

/* --------------------------------------------------------------------------
   PRELOADER
   -------------------------------------------------------------------------- */
#preloader {
  background: var(--sjolie-cream) !important;
}
.spinner {
  color: var(--sjolie-caramel) !important;
}

/* --------------------------------------------------------------------------
   RIGHT SIDEBAR / SETTINGS PANEL
   -------------------------------------------------------------------------- */
.right-bar {
  background: var(--sjolie-white) !important;
  border-left: 1px solid var(--sjolie-border) !important;
}
.rightbar-title {
  background: var(--sjolie-pearl) !important;
}

/* --------------------------------------------------------------------------
   CALENDAR WIDGETS
   -------------------------------------------------------------------------- */
.fc-toolbar h2 {
  font-family: var(--sjolie-serif) !important;
  color: var(--sjolie-espresso) !important;
}
.fc-button-primary {
  background: var(--sjolie-espresso) !important;
  border-color: var(--sjolie-espresso) !important;
}
.fc-day-today {
  background: rgba(180, 146, 110, 0.08) !important;
}

/* --------------------------------------------------------------------------
   MISC COMPONENT OVERRIDES
   -------------------------------------------------------------------------- */
/* Progress bars */
.progress {
  background: var(--sjolie-pearl) !important;
}
.progress-bar,
.bg-primary {
  background-color: var(--sjolie-caramel) !important;
}

/* Breadcrumbs */
.breadcrumb {
  background: none !important;
}
.breadcrumb-item a {
  color: var(--sjolie-caramel) !important;
}
.breadcrumb-item.active {
  color: var(--sjolie-mocha) !important;
}

/* List groups */
.list-group-item {
  border-color: var(--sjolie-border) !important;
  color: var(--sjolie-espresso) !important;
}
.list-group-item.active {  background: var(--sjolie-espresso) !important;  border-color: var(--sjolie-espresso) !important;  color: #fff !important;  border-left: 3px solid var(--sjolie-caramel) !important;}

/* Toast */
.toast {
  border-color: var(--sjolie-border) !important;
}

/* Quill editor */
.ql-toolbar {
  border-color: var(--sjolie-border) !important;
  background: var(--sjolie-pearl) !important;
}
.ql-container {
  border-color: var(--sjolie-border) !important;
  font-family: var(--sjolie-sans) !important;
}

/* Dropify file upload */
.dropify-wrapper {
  border: 2px dashed var(--sjolie-border) !important;
  background: var(--sjolie-cream) !important;
}
.dropify-wrapper:hover {
  border-color: var(--sjolie-caramel) !important;
}

/* Intro.js tutorial overlays */
.introjs-tooltip {
  font-family: var(--sjolie-sans) !important;
}
.introjs-button {
  font-family: var(--sjolie-sans) !important;
  border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   DASHBOARD — Concept B Editorial Layout
   Transforms existing stat cards from icon-left/text-right
   to centered layout with caramel top accent bar
   -------------------------------------------------------------------------- */

/* Stat card container: caramel top border accent */
.icon-div {
  height: auto !important;
  min-height: 120px !important;
  position: relative !important;
}

/* Add caramel top accent bar to stat cards */
.card:has(.icon-div)::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--sjolie-caramel) !important;
  z-index: 1 !important;
}

/* Restructure the d-flex layout inside stat cards to be centered/stacked */
.icon-div .d-flex {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 8px 0 !important;
}

/* Hide the large icons — the Concept B mockup uses clean numbers only */
.icon-div .knob-chart {
  display: none !important;
}

/* Center the text block */
.icon-div .text-end {
  text-align: center !important;
}

/* Big serif numbers in stat cards */
.icon-div h3 {
  font-family: var(--sjolie-serif) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: var(--sjolie-espresso) !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}

/* Stat label text */
.icon-div .text-muted {
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  color: var(--sjolie-mocha) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 500 !important;
}

/* Permission denied stat cards */
.icon-div .text-danger {
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
}

/* Remove old red borders from stat cards */
.card[style*="border: 1px solid #e9848e"] {
  border: 1px solid var(--sjolie-border) !important;
}

/* Page title — editorial underline style */
.page-title-box {
  border-bottom: 2px solid var(--sjolie-espresso) !important;
  padding-bottom: 14px !important;
  margin-bottom: 32px !important;
  background: none !important;
}

.page-title-box .page-title {
  font-family: var(--sjolie-serif) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--sjolie-espresso) !important;
}

/* Revenue Report & chart card headers */
.header-title {
  font-family: var(--sjolie-serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--sjolie-espresso) !important;
}

/* New Client Checklist card */
.chartProg .card {
  height: auto !important;
  min-height: 420px !important;
}

.chartProg .progress {
  height: 28px !important;
  font-size: 13px !important;
  background: var(--sjolie-pearl) !important;
}

.chartProg .progress-bar {
  background: linear-gradient(90deg, var(--sjolie-caramel), var(--sjolie-sand)) !important;
  font-weight: 600 !important;
}

/* Checklist items styling */
.external-event.fonts {
  background: none !important;
  border-bottom: 1px solid var(--sjolie-border) !important;
  padding: 10px 4px !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 14px !important;
}

.external-event.fonts:last-child {
  border-bottom: none !important;
}

/* Checkbox styling for checklist */
.radio_tik[type=checkbox]:checked + .disable_text_class:before,
.radio_tik[type=checkbox]:checked:disabled + .disable_text_class:before {
  background-color: var(--sjolie-success) !important;
  border-color: var(--sjolie-success) !important;
}

.radio_btn[type=checkbox]:checked + .enable_text_class:before {
  background-color: var(--sjolie-pearl) !important;
  border-color: var(--sjolie-espresso) !important;
}

/* Checklist links */
.external-event a,
.enable_text_class a,
.disable_text_class a {
  color: var(--sjolie-espresso) !important;
  text-decoration: none !important;
}

.disable_text_class a {
  color: var(--sjolie-mocha) !important;
}

/* Card widgets (refresh/collapse/close buttons) */
.card-widgets a {
  color: var(--sjolie-mocha) !important;
}
.card-widgets a:hover {
  color: var(--sjolie-espresso) !important;
}

/* Top Selling Products card */
.card-body[style*="height:400px"],
.card-body[style*="height:470px"],
.card-body[style*="height:483px"] {
  height: auto !important;
  min-height: 400px !important;
}

/* Apex charts color override — use sjolie palette */
.apexcharts-toolbar {
  z-index: 1 !important;
}

/* Filter button override */
.mysunless_filter_btn {
  background-color: var(--sjolie-espresso) !important;
  border-color: var(--sjolie-espresso) !important;
  color: var(--sjolie-white) !important;
}

/* Move to dropdown in topbar */
.topnav-menu .nav-link,
.navbar-custom .nav-link {
  font-family: var(--sjolie-sans) !important;
}


/* Tips row in Order page */
.tips-class {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(180,146,110,.2) !important;
  font-size: 13px !important;
  color: var(--sjolie-mocha) !important;
}
.tips-class input {
  width: 60px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--sjolie-border) !important;
  background: var(--sjolie-white) !important;
  border-radius: 6px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-family: var(--sjolie-sans) !important;
}
.tips-class input:focus {
  border-color: var(--sjolie-caramel) !important;
  outline: none !important;
}

/* price-class spans in Service-Price rows */
.price-class {
  font-weight: 600 !important;
  color: var(--sjolie-espresso) !important;
  float: right !important;
}

/* Total Amount row styling */
.Service-Price:last-of-type {
  border-top: 2px solid var(--sjolie-caramel) !important;
  margin-top: 8px !important;
  padding-top: 14px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* "Already included" small text */
.order_checkout small {
  display: block !important;
  font-size: 10px !important;
  color: var(--sjolie-sand) !important;
  margin: 4px 0 16px !important;
}

/* Hidden inputs in order_checkout */
.order_checkout input[type="hidden"] {
  display: none !important;
}

/* Custom amount input when shown */
#customAmount {
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-bottom: 10px !important;
  font-family: var(--sjolie-sans) !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .left-side-menu {
    width: 240px !important;
  }
  .content-page {
    margin-left: 0 !important;
  }
}

/* ========================================
   SJOLIE CRM — ORDER PAGE STYLING
   Concept C: Salon Suite (Warm, Rounded)
   ======================================== */

/* ========================================
   A) SITE-WIDE ROUNDED CORNERS
   ======================================== */

/* Cards */
.card {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Buttons */
.btn {
  border-radius: 10px !important;
}

/* Form inputs */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="tel"],
select,
textarea {
  border-radius: 8px !important;
}

/* Modals */
.modal-content {
  border-radius: 14px !important;
}

/* Dropdowns */
.dropdown-menu {
  border-radius: 12px !important;
}

/* Badges */
.badge {
  border-radius: 6px !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: 8px !important;
}

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

/* Alerts */
.alert {
  border-radius: 10px !important;
}

/* Tables inside cards inherit card rounding via overflow:hidden */
.card table {
  border-radius: 0 !important;
}

/* ========================================
   B) ORDER PAGE LAYOUT — CONCEPT C
   ======================================== */

/* ========================================
   1. CATEGORY BUTTONS STRIP
   ======================================== */

.order_service {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  background: var(--sjolie-white) !important;
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-bottom: 15px !important;
}


/* ============================================================
   SITE-WIDE ROUNDED CORNERS
   ============================================================ */
.card {
  border-radius: 14px !important;
  overflow: hidden;
}
.btn:not(.order_button) {
  border-radius: 10px !important;
}
.form-control, .form-select, select.form-control {
  border-radius: 8px !important;
}
.select2-container--default .select2-selection--single {
  border-radius: 8px !important;
}
.modal-content {
  border-radius: 14px !important;
}


/* ============================================================
   ORDER PAGE — CONCEPT C LAYOUT (V2 — Flexbox approach)
   ============================================================
   Strategy: Flexbox + order on .col-xl-8 to reorder cards.
   Wider left column (62%), narrower right (38%).
   NO display:contents — modals stay safe inside their parent.
   ============================================================ */


/* ── PAGE TITLE ───────────────────────── */
.cc-order-page .page-title-box {
  border-bottom: 2px solid var(--sjolie-espresso, #3a2d27) !important;
  padding-bottom: 12px !important;
  margin-bottom: 28px !important;
  background: transparent !important;
}
.cc-order-page .page-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--sjolie-espresso, #3a2d27) !important;
  margin: 0 !important;
}


/* ── COLUMN WIDTHS ─────────────────────── */
.cc-order-page .row:has(.col-xl-8) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 24px !important;
  align-items: flex-start !important;
}

.cc-order-page .col-xl-8 {
  flex: 0 0 61% !important;
  max-width: 61% !important;
  width: 61% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding-right: 0 !important;
}

.cc-order-page .col-xl-4 {
  flex: 0 0 calc(39% - 24px) !important;
  max-width: calc(39% - 24px) !important;
  width: calc(39% - 24px) !important;
  padding-left: 0 !important;
  position: sticky !important;
  top: 80px !important;
  align-self: flex-start !important;
}


/* ── CARD ORDER within col-xl-8 ────────── */
/* Card 1: Client — first */
.cc-order-page .cc-client-card { order: 1 !important; }

/* Modals — keep in the flow but hidden (order 5 so they don't interfere) */
.cc-order-page .col-xl-8 > .modal { order: 5 !important; }

/* Card 3: Category strip — second */
.cc-order-page .cc-category-card { order: 2 !important; }

/* Card 2: Shopping cart — third */
.cc-order-page .cc-cart-card { order: 3 !important; }

/* All cards: shared styling */
.cc-order-page .cc-client-card,
.cc-order-page .cc-category-card,
.cc-order-page .cc-cart-card {
  border: 1px solid var(--sjolie-border, #e8ddd4) !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  background: var(--sjolie-white, #fff) !important;
}


/* ── CLIENT SECTION ───────────────────── */
.cc-order-page .cc-client-card > .card-body {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 16px 24px !important;
}

/* Add Client / Edit Profile buttons */
.cc-order-page .addnewclinet {
  display: flex !important;
  gap: 10px !important;
  order: 2 !important;
  margin-left: auto !important;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
}
.cc-order-page .addnewclinet .btn {
  border-radius: 24px !important;
  padding: 9px 22px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', sans-serif !important;
  white-space: nowrap !important;
}
.cc-order-page .addnewclinet .btn-primary,
.cc-order-page .addnewclinet #newclient_1 {
  background: var(--sjolie-espresso, #3a2d27) !important;
  border-color: var(--sjolie-espresso, #3a2d27) !important;
  color: #fff !important;
}
.cc-order-page .addnewclinet .btn-primary:hover,
.cc-order-page .addnewclinet #newclient_1:hover {
  background: var(--sjolie-deep, #4e3629) !important;
}
.cc-order-page .addnewclinet .btn-warning,
.cc-order-page .addnewclinet #editcustomer {
  background: transparent !important;
  border: 1.5px solid var(--sjolie-border, #e8ddd4) !important;
  color: var(--sjolie-mocha, #6b5a50) !important;
}
.cc-order-page .addnewclinet .btn-warning:hover,
.cc-order-page .addnewclinet #editcustomer:hover {
  border-color: var(--sjolie-caramel, #b4926e) !important;
  color: var(--sjolie-espresso, #3a2d27) !important;
}

/* Client select dropdown */
.cc-order-page .selecclint {
  flex: 1 1 300px !important;
  min-width: 200px !important;
  width: auto !important;
  float: none !important;
  order: 1 !important;
  padding: 0 !important;
}
.cc-order-page .selecclint .form-group { margin-bottom: 0 !important; }
.cc-order-page .selecclint label { display: none !important; }
.cc-order-page .col-lg-12:has(.selecclint) {
  width: auto !important;
  flex: 1 !important;
  padding: 0 !important;
  float: none !important;
}
.cc-order-page .col-lg-3.addnewclinet { width: auto !important; }

/* Select2 styling */
.cc-order-page .selecclint .select2-container { width: 100% !important; }
.cc-order-page .selecclint .select2-container--default .select2-selection--single {
  height: 44px !important;
  border: 1px solid var(--sjolie-border, #e8ddd4) !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
}
.cc-order-page .selecclint .select2-selection__rendered {
  line-height: 30px !important;
  color: var(--sjolie-espresso, #3a2d27) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
}
.cc-order-page .selecclint .select2-selection__arrow { height: 42px !important; }

/* Client info panel (shown after selecting) */
.cc-order-page .hidddeforfirst {
  flex-wrap: wrap !important;
  gap: 24px !important;
  width: 100% !important;
  order: 10 !important;
  padding: 20px 0 8px 0 !important;
  border-top: 1px solid var(--sjolie-border, #e8ddd4) !important;
  margin-top: 12px !important;
}
.cc-order-page .hidddeforfirst[style*="display: none"],
.cc-order-page .hidddeforfirst[style*="display:none"] {
  display: none !important;
}
.cc-order-page .hidddeforfirst[style*="display: block"],
.cc-order-page .hidddeforfirst[style*="display:block"],
.cc-order-page .hidddeforfirst[style="padding: 10px; width: 100%;"] {
  display: flex !important;
}

/* Client avatar */
.cc-order-page .hidddeforfirst > .col-md-6:first-child { flex: 1 1 320px !important; max-width: 100% !important; padding: 0 !important; }
.cc-order-page .hidddeforfirst > .col-md-6:first-child > .row {
  display: flex !important; align-items: flex-start !important; gap: 16px !important; margin: 0 !important; flex-wrap: nowrap !important;
}
.cc-order-page .hidddeforfirst .col-md-4 { flex: 0 0 auto !important; width: auto !important; padding: 0 !important; }
.cc-order-page .hidddeforfirst .order-img {
  width: 64px !important; height: 64px !important; border-radius: 50% !important;
  object-fit: cover !important; border: 3px solid var(--sjolie-pearl, #f3ece3) !important;
}
.cc-order-page .hidddeforfirst .col-md-8 {
  flex: 1 !important; width: auto !important; padding: 0 !important;
  font-family: 'DM Sans', sans-serif !important; line-height: 1.6 !important;
}
.cc-order-page .hidddeforfirst #FirstName,
.cc-order-page .hidddeforfirst #LastName {
  font-family: 'Playfair Display', serif !important; font-size: 18px !important;
  font-weight: 600 !important; color: var(--sjolie-espresso, #3a2d27) !important;
}
.cc-order-page .hidddeforfirst #FirstName { margin-right: 5px !important; }
.cc-order-page .hidddeforfirst .col-md-8 > i {
  color: var(--sjolie-caramel, #b4926e) !important; font-size: 13px !important;
  width: 18px !important; display: inline-block !important; margin-right: 6px !important;
}
.cc-order-page .hidddeforfirst #Email,
.cc-order-page .hidddeforfirst #Phone,
.cc-order-page .hidddeforfirst #giftbal {
  font-size: 13.5px !important; color: var(--sjolie-mocha, #6b5a50) !important;
}

/* Membership section */
.cc-order-page .hidddeforfirst > .col-md-6:last-child {
  flex: 1 1 280px !important; max-width: 100% !important; padding: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 10px !important;
}
.cc-order-page .hidddeforfirst h3 {
  font-family: 'Playfair Display', serif !important; font-size: 15px !important;
  font-weight: 600 !important; color: var(--sjolie-espresso, #3a2d27) !important;
  margin: 0 !important; display: flex !important; align-items: center !important; gap: 8px !important;
}
.cc-order-page .hidddeforfirst h3 i { color: var(--sjolie-caramel, #b4926e) !important; }


/* ── CATEGORY STRIP ───────────────────── */
.cc-order-page .cc-category-card > .card-body { padding: 0 !important; }
.cc-order-page .cc-category-card .card-body > .row {
  margin: 0 !important; width: 100% !important;
}
.cc-order-page .cc-category-card .col-sm-6 {
  width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important;
}

/* Horizontal flex strip */
.cc-order-page .order_service {
  display: flex !important; width: 100% !important;
  padding: 0 !important; margin: 0 !important; float: none !important;
}

/* Each category tab */
.cc-order-page .order_button_left {
  flex: 1 !important; display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 10px !important; padding: 18px 16px !important;
  cursor: pointer !important; transition: all 0.2s ease !important;
  border-right: 1px solid var(--sjolie-border, #e8ddd4) !important;
  float: none !important; width: auto !important; margin: 0 !important; background: transparent !important;
}
.cc-order-page .order_button_left:last-child { border-right: none !important; }
.cc-order-page .order_button_left:hover { background: var(--sjolie-pearl, #f3ece3) !important; }

/* Button wrapper — transparent */
.cc-order-page .order_button_left .btn,
.cc-order-page .order_button_left .order_button {
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; min-width: auto !important;
  width: auto !important; display: inline-flex !important; align-items: center !important;
  border-radius: 0 !important; outline: none !important;
}
.cc-order-page .order_button_left .btn i,
.cc-order-page .order_button_left .order_button i {
  font-size: 18px !important; color: var(--sjolie-caramel, #b4926e) !important;
}
.cc-order-page .order_button_left p {
  margin: 0 !important; font-size: 13px !important; font-weight: 600 !important;
  color: var(--sjolie-mocha, #6b5a50) !important; white-space: nowrap !important;
  font-family: 'DM Sans', sans-serif !important;
}


/* ── SHOPPING CART ─────────────────────── */
.cc-order-page .cc-cart-card { min-height: 280px !important; }
.cc-order-page .cc-cart-card > .card-body { padding: 0 !important; }

/* Empty cart */
.cc-order-page .finallist_first {
  padding: 60px 24px !important; text-align: center !important;
}
.cc-order-page .finallist_first img {
  opacity: 0.35 !important; max-width: 100px !important; margin-bottom: 16px !important;
}
.cc-order-page .finallist_first center::after {
  content: 'Shopping Cart Empty'; display: block !important;
  font-family: 'Playfair Display', serif !important; font-size: 17px !important;
  font-weight: 600 !important; color: var(--sjolie-espresso, #3a2d27) !important;
  margin-top: 8px !important;
}

/* Cart table */
.cc-order-page #carttable {
  width: 100% !important; border-collapse: collapse !important;
  font-family: 'DM Sans', sans-serif !important;
}
.cc-order-page #carttable th {
  text-align: left !important; padding: 12px 16px !important;
  font-size: 10px !important; text-transform: uppercase !important;
  letter-spacing: 1.2px !important; color: var(--sjolie-mocha, #6b5a50) !important;
  font-weight: 600 !important; border-bottom: 1px solid var(--sjolie-border, #e8ddd4) !important;
  background: var(--sjolie-cream, #fbfbf8) !important;
}
.cc-order-page #carttable td {
  padding: 12px 16px !important; border-bottom: 1px solid var(--sjolie-border, #e8ddd4) !important;
  vertical-align: middle !important; font-size: 13px !important;
}
.cc-order-page #carttable tr:last-child td { border-bottom: none !important; }
.cc-order-page #carttable tr.child:hover td { background: rgba(180, 146, 110, 0.04) !important; }

/* Cart inputs */
.cc-order-page #carttable input[type="text"],
.cc-order-page #carttable input[type="number"] {
  border: 1px solid var(--sjolie-border, #e8ddd4) !important; border-radius: 6px !important;
  padding: 6px 10px !important; font-size: 13px !important; background: #fff !important;
  text-align: center !important; width: 80px !important;
}
.cc-order-page #carttable input[readonly] {
  background: var(--sjolie-cream, #fbfbf8) !important; border-color: transparent !important;
  font-weight: 600 !important; text-align: left !important; width: auto !important; min-width: 100px !important;
}
.cc-order-page #carttable input:focus {
  border-color: var(--sjolie-caramel, #b4926e) !important; outline: none !important;
  box-shadow: 0 0 0 3px rgba(180, 146, 110, 0.1) !important;
}

/* Delete button */
.cc-order-page #carttable #romve_row,
.cc-order-page #carttable .btn-danger {
  width: 32px !important; height: 32px !important; border-radius: 8px !important;
  border: none !important; background: transparent !important; color: var(--sjolie-sand, #dcbfa6) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 !important; font-size: 14px !important;
}
.cc-order-page #carttable #romve_row:hover,
.cc-order-page #carttable .btn-danger:hover {
  background: #fce4ec !important; color: #c0392b !important;
}


/* ── PRICING SIDEBAR ──────────────────── */
.cc-order-page .col-xl-4 > .card {
  border: 1px solid var(--sjolie-border, #e8ddd4) !important;
  box-shadow: none !important; margin-bottom: 0 !important;
  background: linear-gradient(165deg, var(--sjolie-pearl, #f3ece3) 0%, #efe2d5 100%) !important;
}

.cc-order-page .card-body.order_checkout {
  padding: 0 !important; background: transparent !important;
}

/* "Order Summary" heading */
.cc-order-page .card-body.order_checkout::before {
  content: 'Order Summary' !important; display: block !important;
  padding: 20px 24px !important; border-bottom: 1px solid rgba(180, 146, 110, 0.25) !important;
  font-family: 'Playfair Display', serif !important; font-size: 17px !important;
  font-weight: 600 !important; color: var(--sjolie-espresso, #3a2d27) !important;
}

/* Flex column layout */
.cc-order-page .card-body.order_checkout > .d-flex.align-items-start {
  display: flex !important; flex-direction: column !important; padding: 0 !important; width: 100% !important;
}

/* Price rows */
.cc-order-page .Service-Price {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 11px 24px !important; border-bottom: 1px solid rgba(180, 146, 110, 0.18) !important;
  font-size: 13.5px !important; color: var(--sjolie-mocha, #6b5a50) !important;
  width: 100% !important; font-family: 'DM Sans', sans-serif !important; box-sizing: border-box !important;
}
.cc-order-page .Service-Price .price-class {
  font-weight: 600 !important; color: var(--sjolie-espresso, #3a2d27) !important; margin-left: auto !important;
}

/* Total Amount */
.cc-order-page .Service-Price:has(#totalamount) {
  border-top: 2px solid var(--sjolie-caramel, #b4926e) !important;
  border-bottom: none !important; margin-top: 8px !important; padding: 18px 24px 8px !important;
}
.cc-order-page #totalamount {
  font-family: 'Playfair Display', serif !important; font-size: 26px !important;
  font-weight: 700 !important; color: var(--sjolie-espresso, #3a2d27) !important;
}

/* Tips */
.cc-order-page .tips-class {
  display: flex !important; gap: 8px !important; align-items: center !important;
  padding: 12px 24px !important; border-bottom: 1px solid rgba(180, 146, 110, 0.18) !important;
  font-size: 12px !important; color: var(--sjolie-mocha, #6b5a50) !important;
  width: 100% !important; box-sizing: border-box !important;
}
.cc-order-page .tips-class input[type="number"] {
  width: 56px !important; padding: 6px 8px !important;
  border: 1px solid var(--sjolie-border, #e8ddd4) !important; background: #fff !important;
  border-radius: 6px !important; font-size: 13px !important; text-align: center !important;
}
.cc-order-page .tips-class input:focus {
  border-color: var(--sjolie-caramel, #b4926e) !important; outline: none !important;
}
.cc-order-page .tips-class .fa-arrow-right { color: var(--sjolie-sand, #dcbfa6) !important; font-size: 11px !important; }
.cc-order-page .tips-class .listoftips { display: none !important; }

/* Note */
.cc-order-page .card-body.order_checkout small {
  display: block !important; font-size: 10px !important; color: var(--sjolie-sand, #dcbfa6) !important;
  padding: 2px 24px 14px !important; width: 100% !important;
}

/* Hidden inputs */
.cc-order-page .card-body.order_checkout input[type="hidden"] { display: none !important; }
.cc-order-page #point1 { display: none !important; }

/* Custom amount input */
.cc-order-page #customAmount {
  margin: 8px 24px !important; width: calc(100% - 48px) !important;
  padding: 10px 14px !important; border: 1px solid var(--sjolie-border, #e8ddd4) !important;
  border-radius: 8px !important; font-size: 14px !important; background: #fff !important;
}


/* ── ACTION BUTTONS ───────────────────── */
.cc-order-page .card-body.order_checkout .hiding,
.cc-order-page .card-body.order_checkout > .d-flex > .btn {
  display: block !important; width: calc(100% - 48px) !important;
  margin: 5px 24px !important; padding: 14px !important; text-align: center !important;
  font-family: 'DM Sans', sans-serif !important; font-size: 13px !important;
  font-weight: 600 !important; border-radius: 10px !important; cursor: pointer !important;
  transition: all 0.2s !important; letter-spacing: 0.3px !important; visibility: visible !important;
}

/* Check Out */
.cc-order-page #total_one {
  background: var(--sjolie-espresso, #3a2d27) !important; color: #fff !important;
  border: none !important; margin-top: 16px !important;
}
.cc-order-page #total_one:hover {
  background: var(--sjolie-deep, #4e3629) !important;
  box-shadow: 0 4px 16px rgba(58, 45, 39, 0.2) !important;
}

/* Custom Amount */
.cc-order-page #custom_amount {
  background: #fff !important; color: var(--sjolie-caramel, #b4926e) !important;
  border: 1.5px solid var(--sjolie-caramel, #b4926e) !important;
}
.cc-order-page #custom_amount:hover {
  background: var(--sjolie-caramel, #b4926e) !important; color: #fff !important;
}

/* Cancel Order */
.cc-order-page #remove_all {
  background: #fff !important; color: var(--sjolie-mocha, #6b5a50) !important;
  border: 1.5px solid var(--sjolie-border, #e8ddd4) !important; margin-bottom: 22px !important;
}
.cc-order-page #remove_all:hover {
  border-color: #c0392b !important; color: #c0392b !important;
}

/* Email/SMS */
.cc-order-page #SEND_EMAIL_DIV {
  padding: 12px 24px !important; border-top: 1px solid rgba(180, 146, 110, 0.18) !important;
  font-size: 12px !important; width: 100% !important;
}


/* ── MODALS ───────────────────────────── */
.cc-order-page .modal .modal-content {
  border-radius: 14px !important; border: 1px solid var(--sjolie-border, #e8ddd4) !important;
  box-shadow: 0 20px 60px rgba(58, 45, 39, 0.15) !important;
}
.cc-order-page .modal .modal-header {
  border-bottom: 1px solid var(--sjolie-border, #e8ddd4) !important; padding: 16px 24px !important;
}
.cc-order-page .modal .modal-header .modal-title {
  font-family: 'Playfair Display', serif !important; font-size: 17px !important;
  font-weight: 600 !important; color: var(--sjolie-espresso, #3a2d27) !important;
}
.cc-order-page .modal .modal-body { padding: 20px 24px !important; }
.cc-order-page .modal table { width: 100% !important; border-collapse: collapse !important; }
.cc-order-page .modal table th,
.cc-order-page .modal table thead td {
  background: var(--sjolie-cream, #fbfbf8) !important; padding: 10px 14px !important;
  font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 1px !important;
  color: var(--sjolie-mocha, #6b5a50) !important; font-weight: 600 !important;
  border-bottom: 1px solid var(--sjolie-border, #e8ddd4) !important;
}
.cc-order-page .modal table tbody td {
  padding: 10px 14px !important; border-bottom: 1px solid var(--sjolie-border, #e8ddd4) !important; font-size: 13px !important;
}
.cc-order-page .modal table tbody tr:hover { background: rgba(180, 146, 110, 0.04) !important; }
.cc-order-page .modal .btn-primary {
  background: var(--sjolie-espresso, #3a2d27) !important; border-color: var(--sjolie-espresso, #3a2d27) !important;
  color: #fff !important; border-radius: 10px !important; font-weight: 600 !important;
}

/* Select2 above modal */
.select2-container--open { z-index: 1060 !important; }


/* ── RESPONSIVE ───────────────────────── */
@media (max-width: 1199px) {
  .cc-order-page .col-xl-8,
  .cc-order-page .col-xl-4 {
    flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important;
  }
  .cc-order-page .col-xl-4 { position: static !important; }
}
@media (max-width: 767px) {
  .cc-order-page .order_service { flex-wrap: wrap !important; }
  .cc-order-page .order_button_left {
    flex: 1 1 45% !important;
    border-bottom: 1px solid var(--sjolie-border, #e8ddd4) !important;
  }
}


/* ── CLICK FIX: Make <p> and icon pass clicks through to parent ── */
.cc-order-page .order_button_left p,
.cc-order-page .order_button_left .btn i,
.cc-order-page .order_button_left .order_button i {
  pointer-events: none !important;
}

/* Make the entire .order_button_left clickable — cursor pointer */
.cc-order-page .order_button_left {
  cursor: pointer !important;
}

/* The .btn itself should also pass clicks to parent */
.cc-order-page .order_button_left .btn,
.cc-order-page .order_button_left .order_button {
  pointer-events: none !important;
}


/* ==========================================================================
   DASHBOARD — Concept C Redesign
   ========================================================================== */

/* ── DASHBOARD LAYOUT ─────────────────── */
.cc-dashboard .container-fluid {
  max-width: 1400px !important;
  padding: 0 20px !important;
}

/* ── DASHBOARD PAGE TITLE ─────────────── */
.cc-dashboard .page-title-box {
  border-bottom: 2px solid var(--sjolie-espresso) !important;
  padding-bottom: 14px !important;
  margin-bottom: 32px !important;
}

.cc-dashboard .page-title {
  font-family: var(--sjolie-serif) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--sjolie-espresso) !important;
}

/* ── STAT CARDS — Refined ─────────────── */
.cc-dashboard .card .card-body.icon-div,
.cc-dashboard .card .icon-div {
  height: auto !important;
  min-height: 110px !important;
  display: flex !important;
  align-items: center !important;
  padding: 24px 28px !important;
  position: relative !important;
  border-top: 3px solid var(--sjolie-caramel) !important;
}

.cc-dashboard .card .card-body.icon-div .d-flex,
.cc-dashboard .card .icon-div .d-flex {
  width: 100% !important;
}

/* Stat card icons — caramel circle background */
.cc-dashboard .card .icon-div i.fa-3x,
.cc-dashboard .card .icon-div i.ri-3x {
  font-size: 28px !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--sjolie-pearl) !important;
  border-radius: 50% !important;
  color: var(--sjolie-caramel) !important;
  flex-shrink: 0 !important;
}

/* Stat card numbers */
.cc-dashboard .card .icon-div h3 {
  font-family: var(--sjolie-serif) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--sjolie-espresso) !important;
  margin-bottom: 2px !important;
  line-height: 1 !important;
}

/* Stat card labels */
.cc-dashboard .card .icon-div .text-muted {
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--sjolie-mocha) !important;
  margin-bottom: 0 !important;
}

/* Stat card link hover */
.cc-dashboard .card a:hover {
  text-decoration: none !important;
}

.cc-dashboard .card a:hover .icon-div {
  border-top-color: var(--sjolie-espresso) !important;
  transition: border-color 0.2s ease !important;
}

/* ── SECTION TITLES ───────────────────── */
.cc-dashboard .cc-section-title {
  font-family: var(--sjolie-serif) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--sjolie-espresso) !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--sjolie-border) !important;
  margin-bottom: 16px !important;
}

/* ── CHART CARDS ──────────────────────── */
.cc-dashboard .card:has(.apex-charts) {
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.cc-dashboard .card:has(.apex-charts) .card-body {
  padding: 28px !important;
}

/* Chart filter button */
.cc-dashboard .mysunless_filter_btn {
  background: var(--sjolie-pearl) !important;
  color: var(--sjolie-caramel) !important;
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
}

.cc-dashboard .mysunless_filter_btn:hover {
  background: var(--sjolie-caramel) !important;
  color: var(--sjolie-white) !important;
}

/* Filter modal styling */
.cc-dashboard .mysunless_filter_pos_right {
  border: 1px solid var(--sjolie-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(58, 45, 39, 0.08) !important;
}

.cc-dashboard .mysunless_filter_pos_right .modal-header {
  border-bottom: 1px solid var(--sjolie-border) !important;
}

.cc-dashboard .mysunless_filter_pos_right .btn-primary {
  background: var(--sjolie-espresso) !important;
  border-color: var(--sjolie-espresso) !important;
  font-family: var(--sjolie-sans) !important;
}

.cc-dashboard .mysunless_filter_pos_right .btn-warning {
  background: var(--sjolie-pearl) !important;
  border-color: var(--sjolie-border) !important;
  color: var(--sjolie-espresso) !important;
  font-family: var(--sjolie-sans) !important;
}

/* ── TABLE STYLING ────────────────────── */
.cc-dashboard .table {
  font-family: var(--sjolie-sans) !important;
  color: var(--sjolie-espresso) !important;
}

.cc-dashboard .table thead th,
.cc-dashboard .table-light th {
  background: var(--sjolie-pearl) !important;
  color: var(--sjolie-mocha) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  font-weight: 600 !important;
  border-bottom: 2px solid var(--sjolie-border) !important;
  padding: 12px 16px !important;
}

.cc-dashboard .table tbody td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--sjolie-border) !important;
  font-size: 14px !important;
  vertical-align: middle !important;
}

.cc-dashboard .table tbody tr:hover {
  background: var(--sjolie-pearl) !important;
}

/* Status badges */
.cc-dashboard .badge-soft-success {
  background: rgba(90, 138, 94, 0.12) !important;
  color: var(--sjolie-success) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  padding: 5px 10px !important;
  border-radius: 4px !important;
}

.cc-dashboard .badge-soft-warning {
  background: rgba(230, 126, 34, 0.12) !important;
  color: var(--sjolie-warning) !important;
  font-family: var(--sjolie-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  padding: 5px 10px !important;
  border-radius: 4px !important;
}

/* ── NEW CLIENT CHECKLIST ─────────────── */
.cc-dashboard .progress {
  height: 28px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--sjolie-pearl) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

.cc-dashboard .progress-bar {
  background: linear-gradient(135deg, var(--sjolie-caramel), var(--sjolie-sand)) !important;
  color: var(--sjolie-espresso) !important;
  font-family: var(--sjolie-sans) !important;
}

.cc-dashboard .progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  ) !important;
  background-size: 1rem 1rem !important;
}

/* Checklist items */
.cc-dashboard .external-event.fonts {
  font-family: var(--sjolie-sans) !important;
  font-size: 14px !important;
  background: transparent !important;
  padding: 8px 4px !important;
  border-bottom: 1px solid rgba(232, 221, 212, 0.5) !important;
}

.cc-dashboard .external-event.fonts:last-child {
  border-bottom: none !important;
}

.cc-dashboard .external-event a {
  color: var(--sjolie-mocha) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.cc-dashboard .external-event a:hover {
  color: var(--sjolie-caramel) !important;
}

.cc-dashboard .enable_text_class a {
  color: var(--sjolie-espresso) !important;
}

.cc-dashboard .disable_text_class a {
  color: var(--sjolie-sand) !important;
}

/* Checklist checkboxes */
.cc-dashboard .radio_tik[type=checkbox]:checked + .disable_text_class:before {
  background-color: var(--sjolie-success) !important;
  border-color: var(--sjolie-success) !important;
}

.cc-dashboard .radio_btn[type=checkbox] + .enable_text_class:before,
.cc-dashboard .radio_tik[type=checkbox] + .disable_text_class:before {
  border-color: var(--sjolie-border) !important;
  border-radius: 50% !important;
}

.cc-dashboard .radio_btn[type=checkbox]:checked + .enable_text_class:before {
  background-color: var(--sjolie-pearl) !important;
  border-color: var(--sjolie-espresso) !important;
}

/* ── CARD WIDGETS CONTROLS ────────────── */
.cc-dashboard .card-widgets a {
  color: var(--sjolie-sand) !important;
}

.cc-dashboard .card-widgets a:hover {
  color: var(--sjolie-caramel) !important;
}

/* ── SUBSCRIBER EXPIRED OVERLAY ───────── */
.cc-dashboard .subscriberover {
  filter: blur(2px) !important;
  opacity: 0.5 !important;
  pointer-events: none !important;
}

/* ── RESPONSIVE: DASHBOARD ────────────── */
@media (max-width: 767.98px) {
  .cc-dashboard .card .icon-div h3 {
    font-size: 24px !important;
  }

  .cc-dashboard .card .icon-div i.fa-3x,
  .cc-dashboard .card .icon-div i.ri-3x {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
  }

  .cc-dashboard .page-title {
    font-size: 24px !important;
  }
}

/* ── ROUNDED CORNERS (DASHBOARD CARDS) ── */
.cc-dashboard .card {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* ── EMPTY STATE STYLING ──────────────── */
.cc-dashboard center img {
  opacity: 0.2 !important;
}

.cc-dashboard center .btn-primary {
  background: var(--sjolie-espresso) !important;
  border-color: var(--sjolie-espresso) !important;
  font-family: var(--sjolie-sans) !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  padding: 10px 24px !important;
}

.cc-dashboard center .btn-primary:hover {
  background: var(--sjolie-caramel) !important;
  border-color: var(--sjolie-caramel) !important;
}

/* ===== Floating Email Button – Sjolie Design System ===== */
#buttons {
    background: linear-gradient(135deg, #3a2d27 0%, #5a4a42 100%);
    width: 3.5em;
    height: 3.5em;
    border: none;
    border-radius: 50%;
    right: 24px;
    position: fixed;
    bottom: 2em;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(58, 45, 39, 0.35);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#buttons:hover {
    background: linear-gradient(135deg, #b4926e 0%, #c9a882 100%);
    box-shadow: 0 6px 20px rgba(180, 146, 110, 0.45);
    transform: translateY(-2px);
}
#buttons i {
    font-size: 1.4rem;
    color: #f3ece3;
    line-height: 1;
}
#buttons:hover i {
    color: #fff;
}

/* ============================================
   MYSUNLESS TEXT LOGO — Replaces image logos
   Font: Playfair Display, Color: Espresso
   ============================================ */
.mysunless-text-logo {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    color: #3a2d27;
    text-decoration: none;
    letter-spacing: -0.5px;
    line-height: 1;
    display: inline-block;
}

.mysunless-text-logo:hover {
    color: #3a2d27;
    text-decoration: none;
}

/* Size variants */
.mysunless-text-logo--xs { font-size: 1.1rem; }      /* sidebar collapsed */
.mysunless-text-logo--sm { font-size: 1.4rem; }    /* sidebar expanded */
.mysunless-text-logo--md { font-size: 2.2rem; }     /* top nav / headers */
.mysunless-text-logo--lg { font-size: 42px; }     /* login page */
.mysunless-text-logo--xl { font-size: 48px; }        /* registration hero */

/* Light variant (for dark backgrounds) */
.mysunless-text-logo--light {
    color: #f3ece3;
}
.mysunless-text-logo--light:hover {
    color: #ffffff;
}

/* Pagination warm override — override paginationjs-theme-blue entirely */
.paginationjs .paginationjs-pages li { border-color: #d5c9bc !important; }
.paginationjs .paginationjs-pages li:last-child { border-color: #d5c9bc !important; border-right-color: #d5c9bc !important; }
.paginationjs .paginationjs-pages li > a { color: #5a4a3a !important; border-color: #d5c9bc !important; background: #fff !important; }
.paginationjs .paginationjs-pages li > a:hover { background: #faf8f5 !important; border-color: #b89b7a !important; color: #5a4a3a !important; }
.paginationjs .paginationjs-pages li.active { border-color: #b89b7a !important; }
.paginationjs .paginationjs-pages li.active > a { background: #b89b7a !important; border-color: #b89b7a !important; color: #fff !important; }
.paginationjs .paginationjs-pages li.disabled > a { color: #ccc !important; background: #fff !important; }
.paginationjs .paginationjs-pages li.disabled > a:hover { background: #fff !important; }
.paginationjs.paginationjs-theme-blue .paginationjs-pages li { border-color: #d5c9bc !important; }
.paginationjs.paginationjs-theme-blue .paginationjs-pages li:last-child { border-color: #d5c9bc !important; }
.paginationjs.paginationjs-theme-blue .paginationjs-pages li > a { color: #5a4a3a !important; }
.paginationjs.paginationjs-theme-blue .paginationjs-pages li > a:hover { background: #faf8f5 !important; }
.paginationjs.paginationjs-theme-blue .paginationjs-pages li.active > a { background: #b89b7a !important; color: #fff !important; }
.paginationjs.paginationjs-theme-blue .paginationjs-go-input > input[type=text] { border-color: #d5c9bc !important; }
.paginationjs.paginationjs-theme-blue .paginationjs-go-button > input[type=button] { background: #b89b7a !important; border-color: #b89b7a !important; color: #fff !important; }
.paginationjs.paginationjs-theme-blue .paginationjs-go-button > input[type=button]:hover { background: #a08060 !important; }