/* =========================================================================
   ENTERPRISE GRADE DASHBOARD LAYOUT - Classic2
   Professional SMS Portal Design
   ========================================================================= */

/* -------------------------------------------------------------------------
   SIDEBAR - Deep Blue Enterprise Design
   ------------------------------------------------------------------------- */

/* Main sidebar background - Deep Blue */
.main-menu.menu-classic2-enterprise {
    background: linear-gradient(180deg, #2B40AC 0%, #1E2F7A 100%) !important;
    background-color: #2B40AC !important;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
}

/* Sidebar header (logo area) - Darker Blue */
.main-menu.menu-classic2-enterprise .navbar-header {
    background: #1E2F7A !important;
    background-color: #1E2F7A !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.25rem 1.5rem;
    min-height: 80px;
    display: flex;
    align-items: center;
}

/* Logo link wrapper */
.main-menu.menu-classic2-enterprise .navbar-header .navbar-brand {
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    padding: 0;
}

/* Logo container - Enterprise card style */
.main-menu.menu-classic2-enterprise .navbar-header .brand-logo {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Logo hover effect */
.main-menu.menu-classic2-enterprise .navbar-header .navbar-brand:hover .brand-logo {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Logo image */
.main-menu.menu-classic2-enterprise .navbar-header .brand-logo img {
    max-height: 42px;
    height: auto;
    width: auto;
    max-width: 160px;
    filter: brightness(1.2) contrast(1.1);
    transition: all 0.3s ease;
}

/* Logo image hover effect */
.main-menu.menu-classic2-enterprise .navbar-header .navbar-brand:hover .brand-logo img {
    filter: brightness(1.3) contrast(1.15);
    transform: scale(1.02);
}

/* Toggle icons - White */
.main-menu.menu-classic2-enterprise .navbar-header .toggle-icon,
.main-menu.menu-classic2-enterprise .navbar-header .collapse-toggle-icon {
    color: rgba(255, 255, 255, 0.9) !important;
    stroke: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.2s ease;
}

.main-menu.menu-classic2-enterprise .navbar-header .toggle-icon:hover,
.main-menu.menu-classic2-enterprise .navbar-header .collapse-toggle-icon:hover {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Navigation section */
.main-menu.menu-classic2-enterprise .main-menu-content {
    padding: 1rem 0;
}

/* Navigation headers */
.main-menu.menu-classic2-enterprise .navigation .navigation-header {
    padding: 1.5rem 1.5rem 0.75rem;
    margin-top: 0.5rem;
}

.main-menu.menu-classic2-enterprise .navigation .navigation-header span {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.main-menu.menu-classic2-enterprise .navigation .navigation-header i {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Menu items - Base styling */
.main-menu.menu-classic2-enterprise .navigation li a {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.75rem 1.5rem;
    margin: 0.25rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* Menu item text */
.main-menu.menu-classic2-enterprise .navigation li a span.menu-title {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
    font-size: 0.95rem;
}

/* Menu icons - White with slight transparency */
.main-menu.menu-classic2-enterprise .navigation li a i,
.main-menu.menu-classic2-enterprise .navigation li a svg {
    color: rgba(255, 255, 255, 0.85) !important;
    stroke: rgba(255, 255, 255, 0.85) !important;
    margin-right: 0.75rem;
}

/* Menu hover effect - Lighter background */
.main-menu.menu-classic2-enterprise .navigation li:hover > a {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    transform: translateX(4px);
}

.main-menu.menu-classic2-enterprise .navigation li:hover > a span.menu-title,
.main-menu.menu-classic2-enterprise .navigation li:hover > a i,
.main-menu.menu-classic2-enterprise .navigation li:hover > a svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Active menu item - Brightest */
.main-menu.menu-classic2-enterprise .navigation li.active > a {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.main-menu.menu-classic2-enterprise .navigation li.active > a span.menu-title,
.main-menu.menu-classic2-enterprise .navigation li.active > a i,
.main-menu.menu-classic2-enterprise .navigation li.active > a svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Submenu items */
.main-menu.menu-classic2-enterprise .menu-content {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    margin: 0.25rem 1rem;
    padding: 0.5rem 0;
}

.main-menu.menu-classic2-enterprise .menu-content li a {
    color: rgba(255, 255, 255, 0.75) !important;
    padding: 0.5rem 1rem 0.5rem 3rem;
    margin: 0.125rem 0.5rem;
    font-size: 0.9rem;
}

.main-menu.menu-classic2-enterprise .menu-content li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.main-menu.menu-classic2-enterprise .menu-content li.active a {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Shadow at bottom of sidebar */
.main-menu.menu-classic2-enterprise .shadow-bottom {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%) !important;
}

/* Badge styling in menu */
.main-menu.menu-classic2-enterprise .navigation .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   NAVBAR - Deep Blue Enterprise Top Bar
   ------------------------------------------------------------------------- */

/* Main navbar with classic2 - Deep Blue Theme */
body[data-col="content-left-sidebar"] .header-navbar,
body .header-navbar.navbar-shadow {
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.15) !important;
}

/* Navbar background - Deep Blue matching sidebar */
.header-navbar {
    background: linear-gradient(90deg, #2B40AC 0%, #1E2F7A 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navbar items styling */
.header-navbar .navbar-container {
    padding: 0.8rem 2rem;
}

/* Navbar links and icons - White */
.header-navbar .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.2s ease;
}

.header-navbar .nav-link:hover {
    color: #ffffff !important;
}

/* Navbar icons - White */
.header-navbar .nav-link i,
.header-navbar .nav-link svg,
.header-navbar .ficon {
    color: rgba(255, 255, 255, 0.9) !important;
    stroke: rgba(255, 255, 255, 0.9) !important;
}

.header-navbar .nav-link:hover i,
.header-navbar .nav-link:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* User name and status - White */
.header-navbar .user-name,
.header-navbar .user-status {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Language dropdown text - White */
.header-navbar .selected-language {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Dropdown styling */
.header-navbar .dropdown-menu {
    border: none;
    box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
    border-radius: 8px;
}

/* User dropdown */
.header-navbar .dropdown-user .dropdown-menu {
    min-width: 240px;
}

/* Badge notifications - White on red */
.header-navbar .badge {
    color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   DATE/TIME CALENDAR WIDGET - Enterprise Blue Theme
   ------------------------------------------------------------------------- */

/* Calendar card - Deep Blue gradient matching sidebar */
.header-navbar .card {
    background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-left: 3px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Calendar avatar icon background - White */
.header-navbar .card .avatar.bg-white {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Calendar icon - Deep Blue */
.header-navbar .card .avatar i,
.header-navbar .card .avatar svg {
    color: #2B40AC !important;
    stroke: #2B40AC !important;
}

/* Calendar text - All white */
.header-navbar .card .text-white {
    color: #ffffff !important;
}

/* Calendar opacity text */
.header-navbar .card .opacity-75 {
    opacity: 0.85 !important;
}

/* Clock icon in calendar - White */
.header-navbar .card i[data-feather="clock"],
.header-navbar .card svg[data-feather="clock"] {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* -------------------------------------------------------------------------
   STAT CARDS - Colorful Enterprise Avatars
   ------------------------------------------------------------------------- */

/* Base avatar styling */
.avatar.bg-light-primary,
.avatar.bg-light-success,
.avatar.bg-light-danger,
.avatar.bg-light-warning,
.avatar.bg-light-info,
.avatar.bg-light-secondary {
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Blue - Primary */
.bg-light-primary,
.avatar.bg-light-primary {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%) !important;
}

/* Green - Success */
.bg-light-success,
.avatar.bg-light-success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}

/* Red - Danger */
.bg-light-danger,
.avatar.bg-light-danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
}

/* Orange - Warning */
.bg-light-warning,
.avatar.bg-light-warning {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
}

/* Cyan - Info */
.bg-light-info,
.avatar.bg-light-info {
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%) !important;
}

/* Purple - Secondary */
.bg-light-secondary,
.avatar.bg-light-secondary {
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%) !important;
}

/* White icons inside colored avatars */
.avatar.bg-light-primary svg,
.avatar.bg-light-primary i,
.avatar.bg-light-success svg,
.avatar.bg-light-success i,
.avatar.bg-light-danger svg,
.avatar.bg-light-danger i,
.avatar.bg-light-warning svg,
.avatar.bg-light-warning i,
.avatar.bg-light-info svg,
.avatar.bg-light-info i,
.avatar.bg-light-secondary svg,
.avatar.bg-light-secondary i {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Avatar content centering */
.avatar .avatar-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* -------------------------------------------------------------------------
   CARDS - Modern Enterprise Design
   ------------------------------------------------------------------------- */

/* Base card styling */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.08);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 32px 0 rgba(34, 41, 47, 0.12);
}

/* Card headers */
.card-header {
    background-color: transparent;
    border-bottom: 1px solid #ebe9f1;
    padding: 1.5rem;
}

.card-header h4,
.card-header .card-title {
    color: #5e5873;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* Card body */
.card-body {
    padding: 1.5rem;
}

/* -------------------------------------------------------------------------
   BUTTONS - Modern Professional Style
   ------------------------------------------------------------------------- */

.btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 0.65rem 1.5rem;
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-primary {
    background: linear-gradient(135deg, #2B40AC 0%, #1E2F7A 100%);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1E2F7A 0%, #162361 100%);
}

/* -------------------------------------------------------------------------
   TABLES - Clean Modern Design
   ------------------------------------------------------------------------- */

.table {
    border-radius: 8px;
    overflow: hidden;
}

.table thead th {
    background-color: #f8f8f8;
    color: #5e5873;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    border: none;
    padding: 1rem;
}

.table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #ebe9f1;
}

.table tbody tr:hover {
    background-color: #f8f8f8;
}

/* -------------------------------------------------------------------------
   BREADCRUMBS - Clean Navigation
   ------------------------------------------------------------------------- */

.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 1.5rem;
}

.breadcrumb-item {
    color: #6e6b7b;
}

.breadcrumb-item.active {
    color: #5e5873;
    font-weight: 500;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #b9b9c3;
}

/* -------------------------------------------------------------------------
   BADGES & LABELS - Modern Tags
   ------------------------------------------------------------------------- */

.badge {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
}

/* -------------------------------------------------------------------------
   SCROLLBAR - Custom Styling
   ------------------------------------------------------------------------- */

.main-menu.menu-classic2-enterprise::-webkit-scrollbar {
    width: 6px;
}

.main-menu.menu-classic2-enterprise::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.main-menu.menu-classic2-enterprise::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.main-menu.menu-classic2-enterprise::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* -------------------------------------------------------------------------
   PAGE BACKGROUND - Light Gray for Depth (Enterprise Standard)
   ------------------------------------------------------------------------- */

/* Main content area - Light background like Salesforce, Microsoft */
.app-content {
    background-color: #F8F9FA !important;
}

.content-wrapper {
    background-color: transparent;
}

/* -------------------------------------------------------------------------
   ENHANCED PAGE HEADERS - Professional Typography
   ------------------------------------------------------------------------- */

/* Page titles */
.content-header-title,
.content-body > h1,
.content-body > h2,
.content-body > h3,
.content-body > h4 {
    color: #2B40AC;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Section headers inside content */
section > .row > .col-12 > h4 {
    color: #1E2F7A;
    font-weight: 600;
    font-size: 1.15rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e3e6f0;
    margin-bottom: 1.5rem;
}

/* Card titles enhancement */
.card-header h4,
.card-header .card-title {
    color: #2B40AC;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   ENHANCED DATA TABLES - Modern Enterprise Style
   ------------------------------------------------------------------------- */

/* DataTables wrapper */
.dataTables_wrapper {
    padding: 0;
}

/* Table container */
.table-responsive {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Enhanced table styling */
.table {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
    background: #ffffff;
}

/* Table header - Stronger styling */
.table thead th {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
    color: #2B40AC;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.8px;
    border: none;
    padding: 1rem 1.25rem;
    white-space: nowrap;
    border-bottom: 2px solid #2B40AC;
}

/* Table body cells */
.table tbody td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
    border-bottom: 1px solid #e9ecef;
    color: #5e5873;
    font-size: 0.95rem;
}

/* Striped rows */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa;
}

/* Hover effect */
.table tbody tr:hover {
    background-color: #e3f2fd !important;
    transition: background-color 0.2s ease;
}

/* Table actions column */
.table tbody td:last-child {
    text-align: right;
}

/* DataTables pagination */
.dataTables_paginate .pagination {
    margin-top: 1.5rem;
}

.dataTables_paginate .page-link {
    border-radius: 6px;
    margin: 0 0.25rem;
    color: #2B40AC;
    border: 1px solid #e9ecef;
}

.dataTables_paginate .page-link:hover {
    background-color: #2B40AC;
    color: #ffffff;
    border-color: #2B40AC;
}

.dataTables_paginate .page-item.active .page-link {
    background-color: #2B40AC;
    border-color: #2B40AC;
}

/* -------------------------------------------------------------------------
   PROFESSIONAL FORMS - Enhanced Input Styling
   ------------------------------------------------------------------------- */

/* Form labels */
.form-label {
    color: #2B40AC;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.3px;
}

.form-label.required::after {
    content: " *";
    color: #EF4444;
}

/* Form controls - Inputs, textareas, selects */
.form-control,
.form-select {
    border: 1.5px solid #dce1e7;
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background-color: #ffffff;
}

.form-control:focus,
.form-select:focus {
    border-color: #2B40AC;
    box-shadow: 0 0 0 0.2rem rgba(43, 64, 172, 0.15);
    background-color: #ffffff;
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
    border-color: #2B40AC;
}

/* Form control sizing */
.form-control-sm {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.form-control-lg {
    padding: 0.85rem 1.25rem;
    font-size: 1.05rem;
}

/* Input groups */
.input-group-text {
    background-color: #f8f9fa;
    border: 1.5px solid #dce1e7;
    color: #5e5873;
    font-weight: 500;
}

/* Checkboxes and radios */
.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #dce1e7;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #2B40AC;
    border-color: #2B40AC;
}

.form-check-label {
    color: #5e5873;
    font-weight: 500;
    margin-left: 0.5rem;
    cursor: pointer;
}

/* Form switches */
.form-switch .form-check-input {
    width: 2.5rem;
    height: 1.25rem;
}

.form-switch .form-check-input:checked {
    background-color: #10B981;
    border-color: #10B981;
}

/* Select2 dropdown enhancement */
.select2-container--default .select2-selection--single {
    border: 1.5px solid #dce1e7;
    border-radius: 8px;
    height: auto;
    padding: 0.45rem 1rem;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #2B40AC;
}

/* -------------------------------------------------------------------------
   ALERTS - Professional Notifications
   ------------------------------------------------------------------------- */

.alert {
    border: none;
    border-left: 4px solid;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.alert-success {
    background-color: #f0fdf4;
    border-left-color: #10B981;
    color: #065f46;
}

.alert-danger {
    background-color: #fef2f2;
    border-left-color: #EF4444;
    color: #991b1b;
}

.alert-warning {
    background-color: #fffbeb;
    border-left-color: #F59E0B;
    color: #92400e;
}

.alert-info {
    background-color: #eff6ff;
    border-left-color: #06B6D4;
    color: #0c4a6e;
}

.alert-heading {
    color: inherit;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------------------
   DROPDOWN MENUS - Modern Style
   ------------------------------------------------------------------------- */

.dropdown-menu {
    border: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.dropdown-item {
    border-radius: 6px;
    padding: 0.65rem 1rem;
    color: #5e5873;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #2B40AC;
    transform: translateX(4px);
}

.dropdown-item:active {
    background-color: #2B40AC;
    color: #ffffff;
}

.dropdown-divider {
    margin: 0.5rem 0;
    border-top: 1px solid #e9ecef;
}

.dropdown-header {
    color: #2B40AC;
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1rem;
}

/* -------------------------------------------------------------------------
   MODALS - Professional Dialog Styling
   ------------------------------------------------------------------------- */

.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
}

.modal-header {
    background: linear-gradient(135deg, #2B40AC 0%, #1E2F7A 100%);
    color: #ffffff;
    border-radius: 12px 12px 0 0;
    padding: 1.25rem 1.5rem;
    border-bottom: none;
}

.modal-header .modal-title {
    color: #ffffff;
    font-weight: 600;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
}

/* -------------------------------------------------------------------------
   TOOLTIPS & POPOVERS - Subtle Enhancements
   ------------------------------------------------------------------------- */

.tooltip-inner {
    background-color: #2B40AC;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #2B40AC;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #2B40AC;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #2B40AC;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #2B40AC;
}

/* -------------------------------------------------------------------------
   PAGINATION - Modern Style
   ------------------------------------------------------------------------- */

.pagination {
    gap: 0.5rem;
}

.page-link {
    border-radius: 8px;
    border: 1px solid #dce1e7;
    color: #2B40AC;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease;
}

.page-link:hover {
    background-color: #2B40AC;
    color: #ffffff;
    border-color: #2B40AC;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(43, 64, 172, 0.2);
}

.page-item.active .page-link {
    background-color: #2B40AC;
    border-color: #2B40AC;
    box-shadow: 0 4px 8px rgba(43, 64, 172, 0.2);
}

.page-item.disabled .page-link {
    color: #b9b9c3;
    background-color: #f8f9fa;
    border-color: #e9ecef;
}

/* -------------------------------------------------------------------------
   PROGRESS BARS - Enhanced Styling
   ------------------------------------------------------------------------- */

.progress {
    height: 0.75rem;
    border-radius: 8px;
    background-color: #e9ecef;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-bar {
    border-radius: 8px;
    background: linear-gradient(90deg, #2B40AC 0%, #3B82F6 100%);
}

.progress-bar.bg-success {
    background: linear-gradient(90deg, #10B981 0%, #059669 100%);
}

.progress-bar.bg-danger {
    background: linear-gradient(90deg, #EF4444 0%, #DC2626 100%);
}

.progress-bar.bg-warning {
    background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
}

/* -------------------------------------------------------------------------
   LIST GROUPS - Clean Modern Lists
   ------------------------------------------------------------------------- */

.list-group-item {
    border: 1px solid #e9ecef;
    padding: 1rem 1.25rem;
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background-color: #f8f9fa;
    border-left: 3px solid #2B40AC;
}

.list-group-item.active {
    background-color: #2B40AC;
    border-color: #2B40AC;
}

/* -------------------------------------------------------------------------
   TABS - Professional Navigation
   ------------------------------------------------------------------------- */

.nav-tabs {
    border-bottom: 2px solid #e9ecef;
}

.nav-tabs .nav-link {
    color: #5e5873;
    font-weight: 500;
    border: none;
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
}

.nav-tabs .nav-link:hover {
    color: #2B40AC;
    border-bottom: 2px solid #2B40AC;
}

.nav-tabs .nav-link.active {
    color: #2B40AC;
    background-color: transparent;
    border-bottom: 2px solid #2B40AC;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   SPINNERS & LOADERS - Branded Colors
   ------------------------------------------------------------------------- */

.spinner-border,
.spinner-grow {
    color: #2B40AC;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* -------------------------------------------------------------------------
   UTILITY ENHANCEMENTS
   ------------------------------------------------------------------------- */

/* Better text colors */
.text-primary {
    color: #2B40AC !important;
}

.text-muted {
    color: #6e6b7b !important;
}

/* Better background utilities */
.bg-light {
    background-color: #f8f9fa !important;
}

/* Shadows */
.shadow-sm {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.shadow {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

.shadow-lg {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

/* Border utilities */
.border {
    border: 1px solid #e9ecef !important;
}

.border-primary {
    border-color: #2B40AC !important;
}

/* Rounded corners */
.rounded {
    border-radius: 8px !important;
}

.rounded-lg {
    border-radius: 12px !important;
}

/* -------------------------------------------------------------------------
   SMS STATISTICS CHARTS - Modern Data Visualization (2-Column Grid)
   ------------------------------------------------------------------------- */

/* SMS Statistics Grid Container */
.row:has([id*="_sms_data"]) {
    margin-bottom: 2rem;
}

.row:has([id*="_sms_data"]) > [class*="col-"] {
    margin-bottom: 1.5rem;
}

/* Clean SMS Statistics Card */
.card:has([id*="_sms_data"]) {
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card:has([id*="_sms_data"]):hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Simple Clean Header */
.card:has([id*="_sms_data"]) .card-header {
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    padding: 1.25rem 1.5rem;
    flex-shrink: 0;
}

.card:has([id*="_sms_data"]) .card-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #2B40AC;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Chart Container - Focus on the Chart */
.card:has([id*="_sms_data"]) .card-body {
    padding: 0.5rem 1rem 1.25rem;
    background: #ffffff;
    flex: 1;
    display: flex;
    align-items: center;
}

[id$="_sms_data"] {
    min-height: 350px;
    width: 100%;
}

/* -------------------------------------------------------------------------
   APEXCHARTS MODERN STYLING - Professional Data Viz
   ------------------------------------------------------------------------- */

/* Chart Canvas */
.apexcharts-canvas {
    margin: 0 auto;
}

/* Modern Chart Colors - Vibrant & Professional */
.apexcharts-series path,
.apexcharts-series rect {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Area/Line Chart Gradients */
.apexcharts-area {
    fill-opacity: 0.4;
}

/* Bar Chart Styling */
.apexcharts-bar-area {
    border-radius: 4px;
}

/* Grid Lines - Subtle */
.apexcharts-gridline {
    stroke: #e9ecef;
    stroke-width: 1;
    stroke-dasharray: 3;
}

.apexcharts-xaxis line,
.apexcharts-yaxis line {
    stroke: #e9ecef;
}

/* Axis Labels - Modern Typography */
.apexcharts-xaxis-label,
.apexcharts-yaxis-label {
    fill: #6e6b7b;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}

/* Axis Titles */
.apexcharts-xaxis-title-text,
.apexcharts-yaxis-title-text {
    fill: #5e5873;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Chart Legend - Enhanced */
.apexcharts-legend {
    padding: 1.5rem 0 0.5rem !important;
}

.apexcharts-legend-series {
    margin: 0 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
}

.apexcharts-legend-marker {
    width: 12px !important;
    height: 12px !important;
    border-radius: 3px !important;
    margin-right: 0.5rem !important;
}

.apexcharts-legend-text {
    color: #5e5873 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* Data Labels - Clean */
.apexcharts-datalabel {
    fill: #5e5873;
    font-size: 0.85rem;
    font-weight: 600;
}

.apexcharts-datalabel-label {
    fill: #6e6b7b;
    font-size: 0.75rem;
}

/* -------------------------------------------------------------------------
   CHART TOOLTIPS - Premium Design
   ------------------------------------------------------------------------- */

.apexcharts-tooltip {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.apexcharts-tooltip-title {
    background: linear-gradient(135deg, #2B40AC 0%, #3B82F6 100%) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.75rem 1rem !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.apexcharts-tooltip-series-group {
    padding: 0.75rem 1rem !important;
    background: #ffffff !important;
}

.apexcharts-tooltip-marker {
    width: 10px !important;
    height: 10px !important;
    border-radius: 3px !important;
    margin-right: 0.75rem !important;
}

.apexcharts-tooltip-text {
    color: #5e5873 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

.apexcharts-tooltip-text-y-label {
    color: #6e6b7b !important;
    margin-right: 0.5rem !important;
}

.apexcharts-tooltip-text-y-value {
    color: #2B40AC !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
}

/* -------------------------------------------------------------------------
   CHART HOVER & ACTIVE STATES
   ------------------------------------------------------------------------- */

.apexcharts-series:hover path,
.apexcharts-series:hover rect {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    transition: all 0.2s ease;
}

.apexcharts-active path,
.apexcharts-active rect {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

/* Data Point Markers */
.apexcharts-marker {
    stroke-width: 3;
    stroke: #ffffff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.apexcharts-marker:hover {
    r: 7;
    transition: all 0.2s ease;
}

/* -------------------------------------------------------------------------
   PIE/DONUT CHART ENHANCEMENTS
   ------------------------------------------------------------------------- */

.apexcharts-pie-slice path,
.apexcharts-donut-slice path {
    stroke: #ffffff;
    stroke-width: 3;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}

.apexcharts-pie-slice:hover path,
.apexcharts-donut-slice:hover path {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.apexcharts-pie-label,
.apexcharts-datalabels-group text {
    fill: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* -------------------------------------------------------------------------
   RADIAL BAR / GAUGE CHARTS
   ------------------------------------------------------------------------- */

.apexcharts-radialbar-track {
    stroke: #e9ecef;
}

.apexcharts-radialbar-area {
    stroke-width: 12;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12));
}

.apexcharts-radialbar-hollow {
    fill: #f8f9fa;
}

/* -------------------------------------------------------------------------
   CHART ANIMATIONS
   ------------------------------------------------------------------------- */

.apexcharts-series-entering path,
.apexcharts-series-entering rect,
.apexcharts-series-entering circle {
    animation: chartFadeIn 0.8s ease-in-out;
}

@keyframes chartFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* -------------------------------------------------------------------------
   CHART ZOOM & PAN CONTROLS
   ------------------------------------------------------------------------- */

.apexcharts-zoom-icon,
.apexcharts-pan-icon,
.apexcharts-reset-icon,
.apexcharts-menu-icon {
    fill: #6e6b7b;
    stroke: #6e6b7b;
}

.apexcharts-zoom-icon:hover,
.apexcharts-pan-icon:hover,
.apexcharts-reset-icon:hover,
.apexcharts-menu-icon:hover {
    fill: #2B40AC;
    stroke: #2B40AC;
}

.apexcharts-toolbar {
    z-index: 10;
}

.apexcharts-menu {
    background: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.apexcharts-menu-item {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    color: #5e5873 !important;
}

.apexcharts-menu-item:hover {
    background: #f8f9fa !important;
    color: #2B40AC !important;
}

/* -------------------------------------------------------------------------
   CHART SELECTION & BRUSH
   ------------------------------------------------------------------------- */

.apexcharts-selection-rect {
    fill: #2B40AC;
    fill-opacity: 0.1;
    stroke: #2B40AC;
    stroke-width: 2;
    stroke-dasharray: 4;
}

.apexcharts-brush-area {
    fill: #2B40AC;
    fill-opacity: 0.1;
}

/* -------------------------------------------------------------------------
   CHART TITLE & SUBTITLE
   ------------------------------------------------------------------------- */

.apexcharts-title-text {
    fill: #2B40AC;
    font-size: 1.1rem;
    font-weight: 700;
}

.apexcharts-subtitle-text {
    fill: #6e6b7b;
    font-size: 0.875rem;
    font-weight: 500;
}

/* -------------------------------------------------------------------------
   ANALYTICS CHARTS - Enterprise Grade Design
   ------------------------------------------------------------------------- */

/* Analytics Charts Row */
.analytics-charts-row {
    margin-bottom: 2rem;
}

/* Chart Cards - Enhanced Styling */
.chart-card {
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.chart-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Chart Card Headers - Professional Design */
.chart-card .card-header {
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    padding: 1.5rem;
}

.chart-card .card-header .avatar {
    width: 48px;
    height: 48px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chart-card .card-header .avatar i,
.chart-card .card-header .avatar svg {
    width: 24px;
    height: 24px;
}

.chart-card .card-header h4 {
    color: #2B40AC;
    font-size: 1.1rem;
    font-weight: 600;
}

.chart-card .card-header small {
    color: #6e6b7b;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Chart Body */
.chart-card .card-body {
    padding: 1.5rem;
}

/* Customer Growth Chart */
#customer-growth {
    min-height: 320px;
}

/* SMS Reports Chart */
#sms-reports {
    min-height: 320px;
}

/* Revenue Chart */
#revenue-chart {
    min-height: 350px;
}

/* Chart Container Enhancements */
#customer-growth,
#sms-reports,
#revenue-chart {
    width: 100%;
}

/* Recent Sender ID Table Enhancement */
.card:has(.table-hover-animation) {
    overflow: hidden;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.card:has(.table-hover-animation):hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.card:has(.table-hover-animation) .card-header {
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    padding: 1.5rem;
}

.card:has(.table-hover-animation) .card-header h4 {
    color: #2B40AC;
    font-size: 1.1rem;
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   RESPONSIVE DESIGN
   ------------------------------------------------------------------------- */

/* Large Desktop (1400px+) - 2 columns comfortable */
@media (min-width: 1400px) {
    [id$="_sms_data"] {
        min-height: 400px;
    }
}

/* Desktop (1200px - 1399px) - 2 columns */
@media (max-width: 1399.98px) {
    [id$="_sms_data"] {
        min-height: 350px;
    }
}

/* Tablet Landscape & Small Desktop (992px - 1199px) - Still 2 columns */
@media (max-width: 1199.98px) {
    .main-menu.menu-classic2-enterprise .navigation li a {
        padding: 0.65rem 1.25rem;
        margin: 0.25rem 0.75rem;
    }

    .card-body {
        padding: 1.25rem;
    }

    [id$="_sms_data"] {
        min-height: 320px;
    }

    .card:has([id*="_sms_data"]) .card-header h4 {
        font-size: 0.95rem;
    }

    /* Analytics Charts */
    #customer-growth,
    #sms-reports {
        min-height: 300px;
    }

    #revenue-chart {
        min-height: 320px;
    }

    .chart-card .card-header .avatar {
        width: 44px;
        height: 44px;
    }

    .chart-card .card-header h4 {
        font-size: 1rem;
    }
}

/* Tablet Portrait (768px - 991px) - Switch to 1 column */
@media (max-width: 991.98px) {
    .row:has([id*="_sms_data"]) > [class*="col-"] {
        margin-bottom: 1.25rem;
    }

    [id$="_sms_data"] {
        min-height: 300px;
    }

    /* Analytics Charts - Tablet */
    .analytics-charts-row > [class*="col-"] {
        margin-bottom: 1.25rem;
    }

    #customer-growth,
    #sms-reports {
        min-height: 280px;
    }

    #revenue-chart {
        min-height: 300px;
    }

    .chart-card .card-header {
        padding: 1.25rem;
    }

    .chart-card .card-body {
        padding: 1.25rem;
    }
}

/* Mobile (< 768px) - 1 column, compact */
@media (max-width: 767.98px) {
    .card {
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    .header-navbar .navbar-container {
        padding: 0.8rem 1rem;
    }

    .table thead th,
    .table tbody td {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .row:has([id*="_sms_data"]) > [class*="col-"] {
        margin-bottom: 1rem;
    }

    [id$="_sms_data"] {
        min-height: 280px;
    }

    .card:has([id*="_sms_data"]) .card-body {
        padding: 0.5rem 0.75rem 1rem;
    }

    .card:has([id*="_sms_data"]) .card-header {
        padding: 1rem 1.25rem;
    }

    .card:has([id*="_sms_data"]) .card-header h4 {
        font-size: 0.9rem;
    }

    /* Analytics Charts - Mobile */
    .analytics-charts-row > [class*="col-"] {
        margin-bottom: 1rem;
    }

    #customer-growth,
    #sms-reports,
    #revenue-chart {
        min-height: 250px;
    }

    .chart-card .card-header {
        padding: 1rem 1.25rem;
    }

    .chart-card .card-header .avatar {
        width: 40px;
        height: 40px;
    }

    .chart-card .card-header .avatar i,
    .chart-card .card-header .avatar svg {
        width: 20px;
        height: 20px;
    }

    .chart-card .card-header h4 {
        font-size: 0.95rem;
    }

    .chart-card .card-header small {
        font-size: 0.8rem;
    }

    .chart-card .card-body {
        padding: 1rem;
    }

    /* Smaller chart legend on mobile */
    .apexcharts-legend-text {
        font-size: 0.8rem !important;
    }

    .apexcharts-legend-marker {
        width: 10px !important;
        height: 10px !important;
    }
}

/* END OF DASHBOARD CLASSIC2 CSS */