/* App-wide design system */
:root {
--app-bg: #f2f4f7;
--surface: #ffffff;
--surface-soft: #f6f8fc;
--text-main: #0f172a;
--text-muted: #64748b;
--border-subtle: #e2e8f0;
--primary: #ac201f;
--primary-hover: #9a1c1b;
--success: #28a745;
--danger: #ff1928;
--sidebar-bg: #ffffff;
--sidebar-text: #212528;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 18px;
--shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.05);
--shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08);
}

html > body {
background:
radial-gradient(circle at top right, rgba(23, 113, 230, 0.07) 0%, rgba(23, 113, 230, 0) 35%),
linear-gradient(180deg, #f8fbff 0%, var(--app-bg) 220px);
background-color: var(--app-bg) !important;
color: var(--text-main);
}

.main-content {
min-height: 100vh;
}

.card {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}

.card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation {
background-color: #dcdee0!important;
}

.navbar.lw-sidebar-container {
background: linear-gradient(180deg, #ffffff 0%, var(--sidebar-bg) 100%) !important;
border-right: 1px solid var(--border-subtle);
box-shadow: 0 0 30px rgba(15, 23, 42, 0.06);
}

.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link[data-toggle=collapse]:after,
.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link,
.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link .fa {
color: var(--sidebar-text) !important;
}

#navbar-main {
background: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border-subtle);
}

.btn {
border-radius: var(--radius-sm);
font-weight: 600;
}

.btn.btn-primary,
.lw-btn.btn-primary {
background: linear-gradient(135deg, var(--primary) 0%, #2893ff 100%) !important;
border-color: transparent !important;
box-shadow: 0 8px 18px rgba(23, 113, 230, 0.25);
}

.btn.btn-primary:hover,
.lw-btn.btn-primary:hover {
background: linear-gradient(135deg, var(--primary-hover) 0%, #1b7ee0 100%) !important;
}

.btn.btn-success {
background: linear-gradient(135deg, var(--success) 0%, #0ba874 100%) !important;
border-color: transparent !important;
}

.table {
border-collapse: separate;
border-spacing: 0;
}

.table thead th,
th {
background: #f8fbff !important;
color: #1e293b !important;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .04em;
border-bottom: 1px solid var(--border-subtle) !important;
}

.table td,
td {
background: #ffffff !important;
color: #334155;
border-top: 1px solid #f1f5f9 !important;
}

.form-control,
.custom-select,
.select2-selection,
.dataTables_wrapper .dataTables_filter input {
border-radius: 10px !important;
border-color: #cbd5e1 !important;
}

.form-control:focus,
.custom-select:focus {
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px rgba(23, 113, 230, 0.12) !important;
}

.modal-content {
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-md);
}

.dropdown-menu {
border-radius: 12px;
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-sm);
}

.alert {
border-radius: 12px;
}

.lw-page-title, a {
color: var(--primary);
}

.lw-page-title:hover, a:hover {
color: var(--primary-hover);
}

/* Shared page sections */
.app-page-header-card {
background: rgba(255, 255, 255, 0.94);
border: 1px solid var(--border-subtle);
border-radius: 14px;
padding: 8px 14px;
box-shadow: var(--shadow-sm);
}

.app-page-header-card .lw-page-title {
color: #1e293b !important;
font-weight: 700;
margin-bottom: 6px;
}

/* Vendor hero / dashboard blocks */
.welcome-card {
background: linear-gradient(120deg, #0f63d6, #1f8fff 58%, #4bc1ff) !important;
border-radius: var(--radius-lg);
box-shadow: 0 20px 35px rgba(20, 87, 181, 0.22);
overflow: hidden;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.25);
}

.welcome-title {
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.2;
}

.welcome-subtitle {
font-size: .95rem;
max-width: 620px;
}

.welcome-cta-btn {
padding: 10px 18px;
border-radius: 10px !important;
transition: transform .2s ease, box-shadow .2s ease;
}

.welcome-cta-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(2, 31, 77, 0.22);
}

.welcome-shape-1 {
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
}

.welcome-shape-2 {
position: absolute;
bottom: -80px;
left: -80px;
width: 250px;
height: 250px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.10);
}

.card-modern-soft {
border-radius: var(--radius-md) !important;
border: 1px solid var(--border-subtle) !important;
box-shadow: var(--shadow-sm) !important;
}

.donut-chart-wrap {
position: relative;
}

.donut-chart-canvas {
max-height: 220px;
}

.legend-color {
width: 12px;
height: 12px;
border-radius: 999px;
margin-right: 8px;
}

.legend-color-sent {
background-color: #22D571;
}

.legend-color-pending {
background-color: #FFD166;
}

.stat-kpi-text {
font-size: 15px;
}

.stat-kpi-value {
font-size: 20px;
}

.feature-description-tight {
margin: 0 !important;
}

/* Navigation tabs and pills */
.nav-tabs {
border-bottom: 1px solid var(--border-subtle);
}

.nav-tabs .nav-link {
border: 1px solid transparent;
border-radius: 10px 10px 0 0;
color: #475569;
font-weight: 600;
}

.nav-tabs .nav-link:hover {
color: #0f172a;
background: #f8fbff;
}

.nav-tabs .nav-link.active {
color: var(--primary);
background: #eef5ff;
border-color: #dbeafe #dbeafe #eef5ff;
}

/* DataTables refinement */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
border-radius: 10px !important;
border: 1px solid #cbd5e1 !important;
padding: 6px 10px !important;
min-height: 36px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
border-radius: 8px !important;
border: 1px solid #e2e8f0 !important;
background: #fff !important;
color: #334155 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: #eaf3ff !important;
border-color: #bfdbfe !important;
color: #1d4ed8 !important;
}

/* WhatsApp chat UI */
.lw-whatsapp-chat-block-container {
border: 1px solid var(--border-subtle) !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-sm);
}

.lw-whatsapp-chat-window {
background: #f8fbff !important;
border-radius: var(--radius-md);
}

.lw-whatsapp-chat-window .user-bar {
background: linear-gradient(135deg, #0f63d6, #2d95ff) !important;
border-radius: 12px 12px 0 0;
}

.lw-whatsapp-chat-window .conversation {
border: 1px solid #e2e8f0;
border-top: 0;
background: #fbfdff !important;
}

.lw-whatsapp-chat-window .conversation .message.received {
background: #ffffff !important;
border: 1px solid #e6edf8;
}

.lw-whatsapp-chat-window .conversation .message.sent {
background: #deecff !important;
border: 1px solid #cfe1ff;
}

.lw-whatsapp-chat-window .conversation-compose {
border: 1px solid #e2e8f0;
border-top: 0;
background: #fff;
border-radius: 0 0 12px 12px;
}

.lw-contact-list {
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
}

.lw-contact-list .list-group-item {
border-color: #edf2fb !important;
}

.lw-contact-list .list-group-item:hover {
background: #eef5ff;
}

/* Misc controls */
.badge {
border-radius: 999px;
padding: .36em .62em;
font-weight: 600;
}

.btn-api {
color: #fff !important;
background: linear-gradient(135deg, #1f2937, #334155) !important;
border: 0 !important;
border-radius: 10px !important;
}

.btn-api:hover {
background: linear-gradient(135deg, #111827, #1f2937) !important;
}

@media (max-width: 991.98px) {
.main-content {
padding-bottom: 1rem;
}

.header {
padding-top: 1rem !important;
}
}

/* Auth pages */
.lw-guest-page .form-bg {
background: linear-gradient(135deg, #0f5fcf 0%, #2f96ff 60%, #4ebdfd 100%) !important;
}

.lw-guest-page .form-container {
background: rgba(255, 255, 255, 0.95) !important;
border: 1px solid #dbeafe;
border-radius: 18px !important;
box-shadow: 0 20px 34px rgba(15, 23, 42, 0.12) !important;
}

.lw-guest-page .form-container .title {
color: #0f172a !important;
letter-spacing: 0 !important;
text-transform: none !important;
}

.lw-guest-page .form-container .form-control {
border: 1px solid #cbd5e1 !important;
background: #fff !important;
border-radius: 10px !important;
height: 46px !important;
box-shadow: none !important;
}

.lw-guest-page .form-container .form-control:focus {
border-color: var(--primary) !important;
box-shadow: 0 0 0 3px rgba(23, 113, 230, 0.12) !important;
}

.lw-guest-page .form-container .btn-success,
.lw-guest-page .form-container .btn.btn-success {
background: linear-gradient(135deg, #1771e6, #2f96ff) !important;
border: 0 !important;
border-radius: 10px !important;
box-shadow: 0 10px 18px rgba(23, 113, 230, 0.25) !important;
color: #fff !important;
}

.card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar {
background-color: #6f1414!important;
}
.card.lw-whatsapp-chat-block-container .nav-tabs {
border-color: #ac201f !important;
}
.card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .send .circle {
background-color: #ac201f;
border-color: #9a1c1b;
}
.mdtoast.mdt--primary
,.lw-minimized-menu .navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active:before,
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm, .dropdown-item.active, .dropdown-item:active
,.main-content .navbar-top
{
background-color: #ac201f;
border-color: #9a1c1b;
color: #ffffff;
}
.mdtoast.mdt--secondary
{
background-color: #6c757d;
border-color: #616970;
color: #ffffff;
}
.mdtoast.mdt--success
{
background-color: #28a745;
border-color: #24963e;
color: #ffffff;
}
.mdtoast.mdt--danger
{
background-color: #ff1928;
border-color: #e51624;
color: #ffffff;
}
.mdtoast.mdt--warning
{
background-color: #ffc107;
border-color: #e5ad06;
color: #ffffff;
}
.mdtoast.mdt--info
{
background-color: #17a2b8;
border-color: #1491a5;
color: #ffffff;
}
.mdtoast.mdt--light
{
background-color: #adb5bd;
border-color: #9ba2aa;
color: #ffffff;
}
.mdtoast.mdt--dark
{
background-color: #212528;
border-color: #1d2124;
color: #ffffff;
}
.mdtoast.mdt--muted
{
background-color: #8898aa;
border-color: #7a8899;
color: #ffffff;
}
.bg-primary { background-color: #ac201f !important; }
.text-primary { color: #ac201f !important; }
.btn.btn-primary { background-color: #ac201f !important; border-color: #ac201f !important; color:
#fff !important; }
.btn.btn-primary:hover { background-color: #9a1c1b !important;
border-color: #9a1c1b !important; }
.btn.btn-outline-primary { color: #ac201f !important; border-color: #ac201f !important; }
.btn.btn-outline-primary:hover { background-color: #ac201f !important; color: #fff !important; }
.alert.alert-primary { background-color: #ac201f !important; border-color: #a31e1d !important; color: #fff !important; }
.badge.badge-primary { background-color: #ac201f !important; color: #fff !important; }
.card.card-primary { background-color: #ac201f !important; border-color: #a31e1d !important; color: #fff !important; }
.list-group-item.list-group-item-primary { background-color: #ac201f !important; border-color: #a31e1d !important; color: #fff !important; }
.table.table-primary { background-color: #ac201f !important; color: #fff !important; }
.border.border-primary { border-color: #ac201f !important; }
.bg-secondary { background-color: #6c757d !important; }
.text-secondary { color: #6c757d !important; }
.btn.btn-secondary { background-color: #6c757d !important; border-color: #6c757d !important; color:
#fff !important; }
.btn.btn-secondary:hover { background-color: #616970 !important;
border-color: #616970 !important; }
.btn.btn-outline-secondary { color: #6c757d !important; border-color: #6c757d !important; }
.btn.btn-outline-secondary:hover { background-color: #6c757d !important; color: #fff !important; }
.alert.alert-secondary { background-color: #6c757d !important; border-color: #666f76 !important; color: #fff !important; }
.badge.badge-secondary { background-color: #6c757d !important; color: #fff !important; }
.card.card-secondary { background-color: #6c757d !important; border-color: #666f76 !important; color: #fff !important; }
.list-group-item.list-group-item-secondary { background-color: #6c757d !important; border-color: #666f76 !important; color: #fff !important; }
.table.table-secondary { background-color: #6c757d !important; color: #fff !important; }
.border.border-secondary { border-color: #6c757d !important; }
.bg-success { background-color: #28a745 !important; }
.text-success { color: #28a745 !important; }
.btn.btn-success { background-color: #28a745 !important; border-color: #28a745 !important; color:
#fff !important; }
.btn.btn-success:hover { background-color: #24963e !important;
border-color: #24963e !important; }
.btn.btn-outline-success { color: #28a745 !important; border-color: #28a745 !important; }
.btn.btn-outline-success:hover { background-color: #28a745 !important; color: #fff !important; }
.alert.alert-success { background-color: #28a745 !important; border-color: #269e41 !important; color: #fff !important; }
.badge.badge-success { background-color: #28a745 !important; color: #fff !important; }
.card.card-success { background-color: #28a745 !important; border-color: #269e41 !important; color: #fff !important; }
.list-group-item.list-group-item-success { background-color: #28a745 !important; border-color: #269e41 !important; color: #fff !important; }
.table.table-success { background-color: #28a745 !important; color: #fff !important; }
.border.border-success { border-color: #28a745 !important; }
.bg-danger { background-color: #ff1928 !important; }
.text-danger { color: #ff1928 !important; }
.btn.btn-danger { background-color: #ff1928 !important; border-color: #ff1928 !important; color:
#fff !important; }
.btn.btn-danger:hover { background-color: #e51624 !important;
border-color: #e51624 !important; }
.btn.btn-outline-danger { color: #ff1928 !important; border-color: #ff1928 !important; }
.btn.btn-outline-danger:hover { background-color: #ff1928 !important; color: #fff !important; }
.alert.alert-danger { background-color: #ff1928 !important; border-color: #f21726 !important; color: #fff !important; }
.badge.badge-danger { background-color: #ff1928 !important; color: #fff !important; }
.card.card-danger { background-color: #ff1928 !important; border-color: #f21726 !important; color: #fff !important; }
.list-group-item.list-group-item-danger { background-color: #ff1928 !important; border-color: #f21726 !important; color: #fff !important; }
.table.table-danger { background-color: #ff1928 !important; color: #fff !important; }
.border.border-danger { border-color: #ff1928 !important; }
.bg-warning { background-color: #ffc107 !important; }
.text-warning { color: #ffc107 !important; }
.btn.btn-warning { background-color: #ffc107 !important; border-color: #ffc107 !important; color:
#fff !important; }
.btn.btn-warning:hover { background-color: #e5ad06 !important;
border-color: #e5ad06 !important; }
.btn.btn-outline-warning { color: #ffc107 !important; border-color: #ffc107 !important; }
.btn.btn-outline-warning:hover { background-color: #ffc107 !important; color: #fff !important; }
.alert.alert-warning { background-color: #ffc107 !important; border-color: #f2b706 !important; color: #fff !important; }
.badge.badge-warning { background-color: #ffc107 !important; color: #fff !important; }
.card.card-warning { background-color: #ffc107 !important; border-color: #f2b706 !important; color: #fff !important; }
.list-group-item.list-group-item-warning { background-color: #ffc107 !important; border-color: #f2b706 !important; color: #fff !important; }
.table.table-warning { background-color: #ffc107 !important; color: #fff !important; }
.border.border-warning { border-color: #ffc107 !important; }
.bg-info { background-color: #17a2b8 !important; }
.text-info { color: #17a2b8 !important; }
.btn.btn-info { background-color: #17a2b8 !important; border-color: #17a2b8 !important; color:
#fff !important; }
.btn.btn-info:hover { background-color: #1491a5 !important;
border-color: #1491a5 !important; }
.btn.btn-outline-info { color: #17a2b8 !important; border-color: #17a2b8 !important; }
.btn.btn-outline-info:hover { background-color: #17a2b8 !important; color: #fff !important; }
.alert.alert-info { background-color: #17a2b8 !important; border-color: #1599ae !important; color: #fff !important; }
.badge.badge-info { background-color: #17a2b8 !important; color: #fff !important; }
.card.card-info { background-color: #17a2b8 !important; border-color: #1599ae !important; color: #fff !important; }
.list-group-item.list-group-item-info { background-color: #17a2b8 !important; border-color: #1599ae !important; color: #fff !important; }
.table.table-info { background-color: #17a2b8 !important; color: #fff !important; }
.border.border-info { border-color: #17a2b8 !important; }
.bg-light { background-color: #adb5bd !important; }
.text-light { color: #adb5bd !important; }
.btn.btn-light { background-color: #adb5bd !important; border-color: #adb5bd !important; color:
#fff !important; }
.btn.btn-light:hover { background-color: #9ba2aa !important;
border-color: #9ba2aa !important; }
.btn.btn-outline-light { color: #adb5bd !important; border-color: #adb5bd !important; }
.btn.btn-outline-light:hover { background-color: #adb5bd !important; color: #fff !important; }
.alert.alert-light { background-color: #adb5bd !important; border-color: #a4abb3 !important; color: #fff !important; }
.badge.badge-light { background-color: #adb5bd !important; color: #fff !important; }
.card.card-light { background-color: #adb5bd !important; border-color: #a4abb3 !important; color: #fff !important; }
.list-group-item.list-group-item-light { background-color: #adb5bd !important; border-color: #a4abb3 !important; color: #fff !important; }
.table.table-light { background-color: #adb5bd !important; color: #fff !important; }
.border.border-light { border-color: #adb5bd !important; }
.bg-dark { background-color: #212528 !important; }
.text-dark { color: #212528 !important; }
.btn.btn-dark { background-color: #212528 !important; border-color: #212528 !important; color:
#fff !important; }
.btn.btn-dark:hover { background-color: #1d2124 !important;
border-color: #1d2124 !important; }
.btn.btn-outline-dark { color: #212528 !important; border-color: #212528 !important; }
.btn.btn-outline-dark:hover { background-color: #212528 !important; color: #fff !important; }
.alert.alert-dark { background-color: #212528 !important; border-color: #1f2326 !important; color: #fff !important; }
.badge.badge-dark { background-color: #212528 !important; color: #fff !important; }
.card.card-dark { background-color: #212528 !important; border-color: #1f2326 !important; color: #fff !important; }
.list-group-item.list-group-item-dark { background-color: #212528 !important; border-color: #1f2326 !important; color: #fff !important; }
.table.table-dark { background-color: #212528 !important; color: #fff !important; }
.border.border-dark { border-color: #212528 !important; }
.bg-muted { background-color: #8898aa !important; }
.text-muted { color: #8898aa !important; }
.btn.btn-muted { background-color: #8898aa !important; border-color: #8898aa !important; color:
#fff !important; }
.btn.btn-muted:hover { background-color: #7a8899 !important;
border-color: #7a8899 !important; }
.btn.btn-outline-muted { color: #8898aa !important; border-color: #8898aa !important; }
.btn.btn-outline-muted:hover { background-color: #8898aa !important; color: #fff !important; }
.alert.alert-muted { background-color: #8898aa !important; border-color: #8190a1 !important; color: #fff !important; }
.badge.badge-muted { background-color: #8898aa !important; color: #fff !important; }
.card.card-muted { background-color: #8898aa !important; border-color: #8190a1 !important; color: #fff !important; }
.list-group-item.list-group-item-muted { background-color: #8898aa !important; border-color: #8190a1 !important; color: #fff !important; }
.table.table-muted { background-color: #8898aa !important; color: #fff !important; }
.border.border-muted { border-color: #8898aa !important; }

html > body {
    background: #f2f4f7!important;
}