/*
 * Yani Service Dashboard - Modern UI v7
 * Brand Color: #06A3DA (Cyan)
 * Clean, Minimal, Professional Design
 * Works with existing Material Dashboard HTML structure
 */

/* ========================================
   CSS VARIABLES - YANI SERVICE BRAND
   ======================================== */
:root {
    /* Brand Colors */
    --yani-primary: #06A3DA;
    --yani-primary-dark: #0589B8;
    --yani-primary-darker: #047097;
    --yani-primary-light: #E8F7FC;
    --yani-primary-50: #F0FAFF;

    /* Neutral Colors */
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* Status Colors */
    --success: #10B981;
    --success-light: #D1FAE5;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --info: #06A3DA;
    --info-light: #E8F7FC;

    /* Spacing & Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========================================
   BASE STYLES
   ======================================== */
.dashboard-modern {
    font-family: var(--font-family) !important;
    background: var(--gray-50) !important;
    color: var(--gray-700);
    -webkit-font-smoothing: antialiased;
}

.dashboard-modern *:not(.material-icons):not(.fa):not(.fas):not(.far):not(.fab) {
    font-family: var(--font-family) !important;
}

/* ========================================
   SIDEBAR - YANI SERVICE BRAND
   ======================================== */
.dashboard-modern .sidenav {
    background: linear-gradient(180deg, #084D5B 0%, #063847 100%) !important;
    border: none !important;
    box-shadow: var(--shadow-lg) !important;
    transition: all 0.3s ease !important;
}

.dashboard-modern .sidenav .nav-link,
.dashboard-modern .sidenav .nav-link svg,
.dashboard-modern .sidenav .nav-link-text,
.dashboard-modern .sidenav .avatar {
    transition: all 0.3s ease !important;
}

.dashboard-modern .sidenav .sidenav-header {
    padding: 12px 8px !important;
    transition: all 0.3s ease !important;
}

.dashboard-modern .sidenav .navbar-brand {
    transition: all 0.3s ease !important;
}

.dashboard-modern .sidenav .navbar-brand img {
    max-height: 38px !important;
    transition: all 0.3s ease !important;
}

.dashboard-modern .sidenav hr.horizontal {
    background: rgba(255, 255, 255, 0.1) !important;
    margin: 8px 4px !important;
}

.dashboard-modern .sidenav .navbar-collapse {
    padding: 0 4px !important;
}

.dashboard-modern .sidenav .navbar-nav {
    padding: 0 !important;
}

.dashboard-modern .sidenav .nav-link {
    padding: 10px !important;
    margin: 3px 4px !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
}

/* Nav link text */
.dashboard-modern .sidenav .nav-link-text {
    margin-left: 8px !important;
}

/* Dropdown arrow positioning */
.dashboard-modern .sidenav .nav-link[data-bs-toggle="collapse"]::after {
    margin-left: 5px !important;
    flex-shrink: 0 !important;
}

.dashboard-modern .sidenav .nav-link:hover {
    background: rgba(6, 163, 218, 0.15) !important;
    color: white !important;
}

.dashboard-modern .sidenav .nav-link.active {
    background: var(--yani-primary) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(6, 163, 218, 0.4) !important;
}

.dashboard-modern .sidenav .nav-link .icon {
    background: transparent !important;
    box-shadow: none !important;
}

.dashboard-modern .sidenav .nav-link i,
.dashboard-modern .sidenav .nav-link svg {
    color: inherit !important;
    opacity: 0.9 !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
}

/* Collapse sub-menu styling */
.dashboard-modern .sidenav .collapse .nav-link {
    padding: 8px 10px 8px 28px !important;
    font-size: 12px !important;
    margin: 2px 4px !important;
}

.dashboard-modern .sidenav .collapse .nav-link.active {
    background: rgba(6, 163, 218, 0.2) !important;
    box-shadow: none !important;
}

/* Hide mini-icon in expanded state */
.dashboard-modern .sidenav .sidenav-mini-icon {
    display: none !important;
}

.dashboard-modern .sidenav .avatar {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    width: 40px !important;
    height: 40px !important;
}

/* ========================================
   MAIN CONTENT AREA
   ======================================== */
.dashboard-modern .main-content {
    background: var(--gray-50) !important;
}

.dashboard-modern .container-fluid {
    padding: 24px 32px !important;
}

@media (max-width: 768px) {
    .dashboard-modern .container-fluid {
        padding: 16px !important;
    }
}

/* ========================================
   TOP NAVBAR
   ======================================== */
.dashboard-modern .navbar.navbar-main {
    background: transparent !important;
    box-shadow: none !important;
}

.dashboard-modern .breadcrumb-item a {
    color: var(--gray-500) !important;
}

.dashboard-modern .breadcrumb-item.active {
    color: var(--gray-800) !important;
    font-weight: 600 !important;
}

/* ========================================
   CARDS
   ======================================== */
.dashboard-modern .card {
    background: var(--white) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    overflow: visible !important;
}

.dashboard-modern .card:hover {
    box-shadow: var(--shadow-md) !important;
}

.dashboard-modern .card-header {
    background: var(--white) !important;
    border-bottom: 1px solid var(--gray-100) !important;
    padding: 16px 20px !important;
}

.dashboard-modern .card-header h5,
.dashboard-modern .card-header h6 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--gray-800) !important;
    margin: 0 !important;
}

.dashboard-modern .card-body {
    padding: 20px !important;
    overflow: visible !important;
}

/* Ensure card doesn't cut off table content */
.dashboard-modern .card {
    overflow: visible !important;
}

/* ========================================
   MODERN STAT CARDS (Icon Centered)
   ======================================== */
.dashboard-modern .stat-card-modern {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 20px !important;
    min-height: 100px !important;
}

.dashboard-modern .stat-icon-modern {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    border-radius: var(--radius-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.dashboard-modern .stat-icon-modern i,
.dashboard-modern .stat-icon-modern .material-icons {
    font-size: 26px !important;
    color: white !important;
    opacity: 1 !important;
    line-height: 1 !important;
}

.dashboard-modern .stat-content-modern {
    flex: 1 !important;
    text-align: right !important;
    min-width: 0 !important;
}

.dashboard-modern .stat-label-modern {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin: 0 0 2px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.dashboard-modern .stat-content-modern .text-xs {
    font-size: 11px !important;
    color: var(--gray-400) !important;
    margin-bottom: 4px !important;
}

.dashboard-modern .stat-value-modern {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--gray-900) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* ========================================
   LEGACY STAT CARDS (Floating Icon)
   For pages still using old structure
   ======================================== */
.dashboard-modern .card .card-header.bg-transparent {
    border-bottom: none !important;
    padding: 16px 20px !important;
}

.dashboard-modern .icon.icon-lg.icon-shape {
    width: 56px !important;
    height: 56px !important;
    border-radius: var(--radius-lg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dashboard-modern .icon.icon-lg.icon-shape i {
    font-size: 24px !important;
    color: white !important;
    opacity: 1 !important;
}

/* ========================================
   DATE FILTER GROUP
   ======================================== */
.dashboard-modern .date-filter-group {
    min-width: 160px !important;
}

.dashboard-modern .date-filter-group label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.dashboard-modern .date-filter-group .form-control {
    min-width: 150px !important;
}

/* Gradient backgrounds for icons */
.dashboard-modern .bg-gradient-dark {
    background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-900) 100%) !important;
}

.dashboard-modern .bg-gradient-info {
    background: linear-gradient(135deg, var(--yani-primary) 0%, var(--yani-primary-dark) 100%) !important;
}

.dashboard-modern .bg-gradient-success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}

.dashboard-modern .bg-gradient-warning {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
}

.dashboard-modern .bg-gradient-danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
}

.dashboard-modern .bg-gradient-primary {
    background: linear-gradient(135deg, var(--yani-primary) 0%, var(--yani-primary-dark) 100%) !important;
}

.dashboard-modern .bg-gradient-secondary {
    background: linear-gradient(135deg, var(--gray-500) 0%, var(--gray-700) 100%) !important;
}

/* Stat card text styling */
.dashboard-modern .card-header .text-end p.text-sm {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.dashboard-modern .card-header .text-end h4 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--gray-900) !important;
    margin: 4px 0 0 0 !important;
}

/* ========================================
   BUTTONS
   ======================================== */
.dashboard-modern .btn {
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 18px !important;
    transition: all 0.15s ease !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.dashboard-modern .btn:hover {
    transform: translateY(-1px) !important;
}

.dashboard-modern .btn-primary,
.dashboard-modern .btn.bg-gradient-primary {
    background: var(--yani-primary) !important;
    color: white !important;
}

.dashboard-modern .btn-primary:hover,
.dashboard-modern .btn.bg-gradient-primary:hover {
    background: var(--yani-primary-dark) !important;
    box-shadow: 0 4px 12px rgba(6, 163, 218, 0.3) !important;
}

.dashboard-modern .btn-success,
.dashboard-modern .btn.bg-gradient-success {
    background: var(--success) !important;
    color: white !important;
}

.dashboard-modern .btn-danger,
.dashboard-modern .btn.bg-gradient-danger {
    background: var(--danger) !important;
    color: white !important;
}

.dashboard-modern .btn-warning,
.dashboard-modern .btn.bg-gradient-warning {
    background: var(--warning) !important;
    color: white !important;
}

.dashboard-modern .btn-info,
.dashboard-modern .btn.bg-gradient-info {
    background: var(--yani-primary) !important;
    color: white !important;
}

.dashboard-modern .btn-secondary,
.dashboard-modern .btn.bg-gradient-secondary {
    background: var(--gray-100) !important;
    color: var(--gray-700) !important;
    border: 1px solid var(--gray-300) !important;
}

.dashboard-modern .btn.bg-gradient-dark {
    background: var(--gray-800) !important;
    color: white !important;
}

.dashboard-modern .btn-sm {
    padding: 6px 12px !important;
    font-size: 13px !important;
}

.dashboard-modern .btn-link {
    background: transparent !important;
    color: var(--gray-600) !important;
    box-shadow: none !important;
    padding: 8px !important;
}

.dashboard-modern .btn-link:hover {
    background: var(--gray-100) !important;
    color: var(--yani-primary) !important;
    transform: none !important;
}

/* ========================================
   FORM CONTROLS
   ======================================== */
.dashboard-modern label,
.dashboard-modern .form-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--gray-700) !important;
    margin-bottom: 6px !important;
}

.dashboard-modern .form-control {
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--gray-800) !important;
    background: var(--white) !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    height: auto !important;
}

.dashboard-modern .form-control:focus {
    border-color: var(--yani-primary) !important;
    box-shadow: 0 0 0 3px rgba(6, 163, 218, 0.15) !important;
    outline: none !important;
}

.dashboard-modern .form-control::placeholder {
    color: var(--gray-400) !important;
}

/* Select dropdown styling */
.dashboard-modern select.form-control {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
    cursor: pointer !important;
}

/* ========================================
   FILTER ROW ALIGNMENT
   ======================================== */
.dashboard-modern .row.d-flex.justify-content-end.input-group-static {
    background: var(--white) !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--gray-200) !important;
    gap: 12px !important;
    align-items: flex-end !important;
}

.dashboard-modern .row.d-flex.justify-content-end.input-group-static > div {
    margin-bottom: 0 !important;
}

/* Filter Reset Buttons - Override Bootstrap positioning */
.dashboard-modern .position-relative .btn.btn-sm.btn-danger.position-absolute,
.dashboard-modern .position-relative .btn.btn-sm.btn-danger.position-absolute.top-0,
.dashboard-modern .position-relative .btn.btn-sm.btn-danger.position-absolute.top-0.end-0,
.dashboard-modern .position-relative .btn.btn-sm.btn-danger.position-absolute.top-0.end-4 {
    top: 8px !important;
    right: 20px !important;
    transform: none !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    background: var(--danger) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
}

.dashboard-modern .position-relative .btn.btn-sm.btn-danger.position-absolute:hover {
    background: #DC2626 !important;
    transform: scale(1.05) !important;
}

/* Filter reset button specific for Choices.js containers */
.dashboard-modern .col-md-6.position-relative .btn.btn-sm.btn-danger {
    right: 8px !important;
}

/* Entries selector and search row */
.dashboard-modern .d-flex.flex-row.justify-content-between {
    padding: 12px 20px !important;
    align-items: center !important;
}

/* ========================================
   SALES PAGE DATE FILTERS
   ======================================== */
.dashboard-modern .row.col-12.mx-3 {
    margin: 0 0 0 0 !important;
    padding: 20px !important;
    background: var(--white) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 20px !important;
}

.dashboard-modern .row.col-12.mx-3 .form-group {
    margin-bottom: 0 !important;
}

.dashboard-modern .row.col-12.mx-3 label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--gray-600) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Account Balance styling */
.dashboard-modern h5.mb-1 {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.dashboard-modern h2.fw-bold {
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--gray-900) !important;
}

.dashboard-modern .d-flex.mt-0.align-items-center select {
    width: 70px !important;
}

.dashboard-modern .d-flex.mt-0.align-items-center p {
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--gray-600) !important;
}

/* ========================================
   IMPROVED FILTER ROW
   ======================================== */
.dashboard-modern .row.d-flex.justify-content-end {
    background: var(--white) !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--gray-200) !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.dashboard-modern .row.d-flex.justify-content-end > div {
    margin-bottom: 0 !important;
}

.dashboard-modern .row.d-flex.justify-content-end > div.col-lg-2,
.dashboard-modern .row.d-flex.justify-content-end > div.col-lg-4,
.dashboard-modern .row.d-flex.justify-content-end > div.col-md-3 {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Remove extra margin from mb-4, mb-2 in filter containers */
.dashboard-modern .row.d-flex.justify-content-end .mb-4,
.dashboard-modern .row.d-flex.justify-content-end .mb-2 {
    margin-bottom: 0 !important;
}

/* Province/City filter row inside filters */
.dashboard-modern .row.justify-content-center {
    gap: 8px !important;
}

.dashboard-modern .row.justify-content-center > div {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* ========================================
   USER MANAGEMENT PAGE SPECIFIC
   ======================================== */
/* Avatar cell in table - center horizontally and vertically */
.dashboard-modern .table td.avatar,
.dashboard-modern .table td.avatar.avatar-xl,
.dashboard-modern .table td.avatar.avatar-xl.position-relative {
    width: 70px !important;
    height: 70px !important;
    padding: 10px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Avatar image inside table cell */
.dashboard-modern .table td.avatar img,
.dashboard-modern .table td.avatar.avatar-xl img {
    width: 50px !important;
    height: 50px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Center photo column in tables */
.dashboard-modern .table td img.rounded-circle {
    display: block !important;
    margin: 0 auto !important;
}

/* Photo heading centering */
.dashboard-modern .table th:first-child {
    text-align: center !important;
}

/* Card header with button */
.dashboard-modern .card-header.d-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Filter row for user management - ensure proper alignment */
.dashboard-modern .row.d-flex.justify-content-end.mt-3 {
    margin-top: 0 !important;
}

/* Police clearance select - longer text */
.dashboard-modern .col-md-3.position-relative select {
    font-size: 13px !important;
}

/* ========================================
   TABLE ACTION BUTTONS - MODERN DESIGN
   ======================================== */
/* Base action button container */
.dashboard-modern .table-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
}

/* Modern action button base */
.dashboard-modern .btn-action {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: var(--radius-md) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    background: var(--gray-50) !important;
    color: var(--gray-600) !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.dashboard-modern .btn-action:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.dashboard-modern .btn-action i,
.dashboard-modern .btn-action .material-icons {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* View/Edit - Cyan */
.dashboard-modern .btn-action-view,
.dashboard-modern .btn-action-edit {
    background: var(--yani-primary-light) !important;
    color: var(--yani-primary) !important;
    border-color: var(--yani-primary-light) !important;
}

.dashboard-modern .btn-action-view:hover,
.dashboard-modern .btn-action-edit:hover {
    background: var(--yani-primary) !important;
    color: white !important;
    border-color: var(--yani-primary) !important;
    box-shadow: 0 4px 12px rgba(6, 163, 218, 0.3) !important;
}

/* Delete - Red */
.dashboard-modern .btn-action-delete {
    background: var(--danger-light) !important;
    color: var(--danger) !important;
    border-color: var(--danger-light) !important;
}

.dashboard-modern .btn-action-delete:hover {
    background: var(--danger) !important;
    color: white !important;
    border-color: var(--danger) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Chat/Info - Blue */
.dashboard-modern .btn-action-chat,
.dashboard-modern .btn-action-info {
    background: var(--info-light) !important;
    color: var(--yani-primary) !important;
    border-color: var(--info-light) !important;
}

.dashboard-modern .btn-action-chat:hover,
.dashboard-modern .btn-action-info:hover {
    background: var(--yani-primary) !important;
    color: white !important;
    border-color: var(--yani-primary) !important;
    box-shadow: 0 4px 12px rgba(6, 163, 218, 0.3) !important;
}

/* Approve - Green */
.dashboard-modern .btn-action-approve {
    background: var(--success-light) !important;
    color: var(--success) !important;
    border-color: var(--success-light) !important;
}

.dashboard-modern .btn-action-approve:hover {
    background: var(--success) !important;
    color: white !important;
    border-color: var(--success) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Warning - Amber */
.dashboard-modern .btn-action-warning {
    background: var(--warning-light) !important;
    color: var(--warning) !important;
    border-color: var(--warning-light) !important;
}

.dashboard-modern .btn-action-warning:hover {
    background: var(--warning) !important;
    color: white !important;
    border-color: var(--warning) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Legacy support for old button classes */
.dashboard-modern .btn.btn-success.btn-link,
.dashboard-modern .btn.btn-danger.btn-link,
.dashboard-modern .btn.btn-info.btn-link,
.dashboard-modern .btn.btn-primary.btn-link {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border-radius: var(--radius-md) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    position: relative !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* Hide ripple container - it interferes with icon centering */
.dashboard-modern .btn.btn-link .ripple-container {
    display: none !important;
}

.dashboard-modern .btn.btn-success.btn-link {
    background: var(--yani-primary-light) !important;
    color: var(--yani-primary) !important;
}

.dashboard-modern .btn.btn-success.btn-link:hover {
    background: var(--yani-primary) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(6, 163, 218, 0.3) !important;
    transform: translateY(-1px) !important;
}

.dashboard-modern .btn.btn-danger.btn-link {
    background: var(--danger-light) !important;
    color: var(--danger) !important;
}

.dashboard-modern .btn.btn-danger.btn-link:hover {
    background: var(--danger) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    transform: translateY(-1px) !important;
}

.dashboard-modern .btn.btn-info.btn-link {
    background: var(--info-light) !important;
    color: var(--yani-primary) !important;
}

.dashboard-modern .btn.btn-info.btn-link:hover {
    background: var(--yani-primary) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(6, 163, 218, 0.3) !important;
    transform: translateY(-1px) !important;
}

.dashboard-modern .btn.btn-primary.btn-link {
    background: var(--yani-primary-light) !important;
    color: var(--yani-primary) !important;
}

.dashboard-modern .btn.btn-primary.btn-link:hover {
    background: var(--yani-primary) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(6, 163, 218, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Icon centering in action buttons - FIXED */
.dashboard-modern .btn.btn-link i:not(.material-icons),
.dashboard-modern .btn.btn-link i.fa,
.dashboard-modern .btn.btn-link i.fas,
.dashboard-modern .btn.btn-link i.far {
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Material Icons in buttons - preserve font rendering */
.dashboard-modern .btn .material-icons {
    font-family: 'Material Icons Round', 'Material Icons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-feature-settings: 'liga' !important;
}

/* Notification dot on buttons */
.dashboard-modern .btn.btn-link .notification-dot,
.dashboard-modern .btn-action .notification-dot {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 10px !important;
    height: 10px !important;
    background: var(--danger) !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
}

/* ========================================
   ICON CENTERING IN ALL BUTTONS
   ======================================== */
/* General icon centering for all buttons */
.dashboard-modern .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.dashboard-modern .btn i,
.dashboard-modern .btn .material-icons {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Icon-only buttons (no text) - square shape */
.dashboard-modern .btn.btn-link i:only-child,
.dashboard-modern .btn.btn-link .material-icons:only-child {
    margin: 0 !important;
}

/* Buttons with icon and text */
.dashboard-modern .btn:not(.btn-link) i,
.dashboard-modern .btn:not(.btn-link) .material-icons {
    font-size: 18px !important;
}

/* Fix for table action buttons specifically */
.dashboard-modern table .btn.btn-link,
.dashboard-modern .table .btn.btn-link,
.dashboard-modern td .btn.btn-link {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

.dashboard-modern table .btn.btn-link .material-icons,
.dashboard-modern .table .btn.btn-link .material-icons,
.dashboard-modern td .btn.btn-link .material-icons {
    position: static !important;
    width: auto !important;
    height: auto !important;
    font-size: 20px !important;
}

/* Badge sizes */
.dashboard-modern .badge.badge-lg {
    padding: 6px 12px !important;
    font-size: 11px !important;
}

/* ========================================
   ADD/CREATE BUTTON STYLING (Top of Tables)
   ======================================== */
/* Primary action button (Add Item, Add Category, etc.) */
.dashboard-modern .btn.bg-gradient-dark {
    background: var(--yani-primary) !important;
    background-image: none !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(6, 163, 218, 0.3) !important;
    transition: all 0.2s ease !important;
}

.dashboard-modern .btn.bg-gradient-dark:hover {
    background: #0592c2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(6, 163, 218, 0.4) !important;
}

.dashboard-modern .btn.bg-gradient-dark i,
.dashboard-modern .btn.bg-gradient-dark .material-icons {
    font-size: 16px !important;
    margin-right: 6px !important;
}

/* Card header with button layout */
.dashboard-modern .card > .col-12.text-end {
    padding: 0 24px 16px 24px !important;
}

/* Card header styling */
.dashboard-modern .card > .card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid var(--gray-100) !important;
}

.dashboard-modern .card > .card-header h5 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--gray-800) !important;
}

/* Button container at top of table */
.dashboard-modern .card .text-end .btn.bg-gradient-dark {
    margin-bottom: 0 !important;
}

/* ========================================
   STAT CARD ICON CENTERING
   ======================================== */
/* Fix icon centering in stat cards */
.dashboard-modern .icon.icon-lg.icon-shape {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    border-radius: 12px !important;
}

/* Fix opacity and centering for icons inside shape */
.dashboard-modern .icon.icon-lg.icon-shape i,
.dashboard-modern .icon.icon-lg.icon-shape .material-icons,
.dashboard-modern .icon.icon-lg.icon-shape i.material-icons {
    font-size: 28px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    opacity: 1 !important;
    position: static !important;
}

/* Override opacity-10 class */
.dashboard-modern .icon.icon-lg.icon-shape .opacity-10 {
    opacity: 1 !important;
}

/* Force text-center to work */
.dashboard-modern .icon.icon-lg.icon-shape.text-center {
    text-align: center !important;
}

/* Stat card layout improvement - horizontal layout */
.dashboard-modern .card-header.p-3.py-2 {
    display: flex !important;
    align-items: center !important;
    min-height: 90px !important;
    padding: 20px !important;
}

.dashboard-modern .card-header.p-3.py-2 .icon.position-absolute {
    position: relative !important;
    margin-top: 0 !important;
    margin-right: 16px !important;
    flex-shrink: 0 !important;
}

/* Remove negative margin that causes offset */
.dashboard-modern .card-header.p-3.py-2 .icon.mt-n4 {
    margin-top: 0 !important;
}

/* Remove border-radius-xl override if needed */
.dashboard-modern .card-header.p-3.py-2 .icon.border-radius-xl {
    border-radius: 12px !important;
}

.dashboard-modern .card-header.p-3.py-2 .text-end {
    text-align: left !important;
    flex: 1 !important;
}

.dashboard-modern .card-header.p-3.py-2 .text-end .text-sm,
.dashboard-modern .card-header.p-3.py-2 .text-end p.text-sm {
    font-size: 11px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: var(--gray-500) !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.5px !important;
}

.dashboard-modern .card-header.p-3.py-2 .text-end h4 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--gray-800) !important;
    margin: 0 !important;
}

/* Override pt-1 padding */
.dashboard-modern .card-header.p-3.py-2 .text-end.pt-1 {
    padding-top: 0 !important;
}

/* ========================================
   MODERN FILTER DESIGN
   ======================================== */
.dashboard-modern .filters-modern {
    padding: 20px 0 !important;
}

.dashboard-modern .filters-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.dashboard-modern .filter-item {
    flex: 1 1 180px !important;
    min-width: 160px !important;
    max-width: 220px !important;
}

.dashboard-modern .filter-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

.dashboard-modern .filter-select-wrapper {
    position: relative !important;
}

.dashboard-modern .filter-select {
    width: 100% !important;
    height: 42px !important;
    padding: 0 36px 0 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--gray-700) !important;
    background-color: var(--white) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.dashboard-modern .filter-select:hover {
    border-color: var(--gray-300) !important;
}

.dashboard-modern .filter-select:focus {
    outline: none !important;
    border-color: var(--yani-primary) !important;
    box-shadow: 0 0 0 3px rgba(6, 163, 218, 0.1) !important;
}

.dashboard-modern .filter-clear-btn {
    position: absolute !important;
    top: 50% !important;
    right: 28px !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    background: var(--gray-200) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    z-index: 5 !important;
}

.dashboard-modern .filter-clear-btn i {
    font-size: 14px !important;
    color: var(--gray-600) !important;
}

.dashboard-modern .filter-clear-btn:hover {
    background: var(--danger) !important;
}

.dashboard-modern .filter-clear-btn:hover i {
    color: white !important;
}

/* Choices.js integration */
.dashboard-modern .filter-choices .choices {
    margin-bottom: 0 !important;
}

.dashboard-modern .filter-choices .choices__inner {
    min-height: 42px !important;
    padding: 8px 36px 8px 14px !important;
    background: var(--white) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
}

.dashboard-modern .filter-choices .choices__inner:focus-within {
    border-color: var(--yani-primary) !important;
    box-shadow: 0 0 0 3px rgba(6, 163, 218, 0.1) !important;
}

.dashboard-modern .filter-choices .choices__list--single {
    padding: 0 !important;
}

.dashboard-modern .filter-choices .choices__list--single .choices__item {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--gray-700) !important;
}

.dashboard-modern .filter-choices .choices__list--dropdown {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--gray-200) !important;
    box-shadow: var(--shadow-lg) !important;
    margin-top: 4px !important;
}

.dashboard-modern .filter-choices .choices__list--dropdown .choices__item--selectable {
    padding: 10px 14px !important;
    font-size: 14px !important;
}

.dashboard-modern .filter-choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: var(--yani-primary-light) !important;
    color: var(--yani-primary-dark) !important;
}

/* Choices.js Remove Item Button */
.dashboard-modern .filter-choices .choices__button {
    border: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3e%3cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    margin-left: 4px !important;
    opacity: 0.6 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

.dashboard-modern .filter-choices .choices__button:hover {
    opacity: 1 !important;
    background-color: var(--danger-light) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ef4444'%3e%3cpath fill-rule='evenodd' d='M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3e%3c/svg%3e") !important;
}

.dashboard-modern .filter-choices .choices__item--selectable {
    padding-right: 28px !important;
}

/* Choices.js Placeholder Styling */
.dashboard-modern .filter-choices .choices__placeholder {
    color: var(--gray-500) !important;
    opacity: 1 !important;
}

.dashboard-modern .filter-choices .choices__item[data-value=""] {
    color: var(--gray-500) !important;
}

.dashboard-modern .filter-choices .choices__list--single .choices__item {
    padding-right: 0 !important;
}

/* Search and Entries Row */
.dashboard-modern .filters-bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--gray-100) !important;
}

.dashboard-modern .entries-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.dashboard-modern .entries-label {
    font-size: 14px !important;
    color: var(--gray-500) !important;
    font-weight: 500 !important;
}

.dashboard-modern .entries-select {
    width: 70px !important;
    height: 38px !important;
    padding: 0 28px 0 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--gray-700) !important;
    background-color: var(--white) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
    background-position: right 6px center !important;
    background-repeat: no-repeat !important;
    background-size: 18px !important;
    cursor: pointer !important;
}

.dashboard-modern .search-wrapper {
    position: relative !important;
    width: 280px !important;
    max-width: 100% !important;
}

.dashboard-modern .search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    color: var(--gray-400) !important;
    pointer-events: none !important;
}

.dashboard-modern .search-input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 14px 0 42px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--gray-700) !important;
    background-color: var(--gray-50) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.2s ease !important;
}

.dashboard-modern .search-input:hover {
    background-color: var(--white) !important;
    border-color: var(--gray-300) !important;
}

.dashboard-modern .search-input:focus {
    outline: none !important;
    background-color: var(--white) !important;
    border-color: var(--yani-primary) !important;
    box-shadow: 0 0 0 3px rgba(6, 163, 218, 0.1) !important;
}

.dashboard-modern .search-input::placeholder {
    color: var(--gray-400) !important;
}

/* Filter input (for date pickers) */
.dashboard-modern input.filter-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3e%3c/svg%3e") !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 18px !important;
}

.dashboard-modern input.filter-select::placeholder {
    color: var(--gray-400) !important;
}

/* Flatpickr altInput styling */
.dashboard-modern .filter-select-wrapper input.flatpickr-input + input.form-control,
.dashboard-modern .filter-select-wrapper input.flatpickr-input + input {
    width: 100% !important;
    height: 42px !important;
    padding: 0 36px 0 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--gray-700) !important;
    background-color: var(--white) !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3e%3c/svg%3e") !important;
    background-position: right 10px center !important;
    background-repeat: no-repeat !important;
    background-size: 18px !important;
}

.dashboard-modern .filter-select-wrapper input.flatpickr-input + input:focus {
    border-color: var(--yani-primary) !important;
    box-shadow: 0 0 0 3px rgba(6, 163, 218, 0.1) !important;
    outline: none !important;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .dashboard-modern .filter-item {
        flex: 1 1 150px !important;
        max-width: none !important;
    }
}

@media (max-width: 768px) {
    .dashboard-modern .filters-row {
        gap: 12px !important;
    }

    .dashboard-modern .filter-item {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 140px !important;
    }

    .dashboard-modern .filters-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .dashboard-modern .search-wrapper {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .dashboard-modern .filter-item {
        flex: 1 1 100% !important;
    }
}

/* User table text */
.dashboard-modern td .text-sm {
    font-size: 13px !important;
    color: var(--gray-500) !important;
}

/* Store names in cells */
.dashboard-modern td br + br {
    display: none !important;
}

/* Notification dot on chat icon */
.dashboard-modern .btn.btn-link .material-icons[style*="color: red"] {
    color: var(--danger) !important;
}

/* Show Service List button in table */
.dashboard-modern td .btn.bg-gradient-primary {
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
}

.dashboard-modern td .btn.bg-gradient-primary:hover {
    box-shadow: 0 4px 12px rgba(6, 163, 218, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* ========================================
   TOGGLE SWITCH - MODERN (Single Circle)
   ======================================== */
.dashboard-modern .form-check.form-switch {
    padding-left: 0 !important;
    min-height: auto !important;
}

.dashboard-modern .form-switch .form-check-input {
    width: 44px !important;
    height: 24px !important;
    margin: 0 !important;
    border-radius: 24px !important;
    background-color: var(--gray-300) !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    background-image: none !important;
}

.dashboard-modern .form-switch .form-check-input::before {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 20px !important;
    height: 20px !important;
    background: white !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.2s ease !important;
}

.dashboard-modern .form-switch .form-check-input::after {
    display: none !important;
    content: none !important;
}

.dashboard-modern .form-switch .form-check-input:checked {
    background-color: var(--yani-primary) !important;
    background-image: none !important;
}

.dashboard-modern .form-switch .form-check-input:checked::before {
    transform: translateX(20px) !important;
}

.dashboard-modern .form-switch .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(6, 163, 218, 0.2) !important;
}

/* ========================================
   CHOICES.JS DROPDOWN (Single Arrow)
   ======================================== */
.dashboard-modern .choices {
    margin-bottom: 0 !important;
}

.dashboard-modern .choices__inner {
    background: var(--white) !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 36px 8px 12px !important;
    min-height: 42px !important;
    font-size: 14px !important;
    box-shadow: var(--shadow-sm) !important;
    display: flex !important;
    align-items: center !important;
}

.dashboard-modern .choices.is-focused .choices__inner,
.dashboard-modern .choices.is-open .choices__inner {
    border-color: var(--yani-primary) !important;
    box-shadow: 0 0 0 3px rgba(6, 163, 218, 0.15) !important;
}

.dashboard-modern .choices__list--single {
    padding: 0 !important;
}

.dashboard-modern .choices__list--single .choices__item {
    font-size: 14px !important;
    color: var(--gray-700) !important;
    padding: 0 !important;
}

.dashboard-modern .choices__list--single .choices__placeholder {
    color: var(--gray-400) !important;
    opacity: 1 !important;
}

/* Single Arrow - Hide default and use custom */
.dashboard-modern .choices[data-type*="select-one"]::after {
    content: "" !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    border: none !important;
    margin: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.dashboard-modern .choices[data-type*="select-one"].is-open::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Dropdown List */
.dashboard-modern .choices__list--dropdown {
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    margin-top: 4px !important;
    background: var(--white) !important;
    z-index: 100 !important;
}

.dashboard-modern .choices__list--dropdown .choices__list {
    max-height: 200px !important;
}

.dashboard-modern .choices__list--dropdown .choices__item {
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--gray-700) !important;
}

.dashboard-modern .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background: var(--yani-primary-light) !important;
    color: var(--yani-primary-dark) !important;
}

/* Search input in Choices dropdown */
.dashboard-modern .choices__input {
    background: var(--gray-50) !important;
    border: none !important;
    border-bottom: 1px solid var(--gray-200) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.dashboard-modern .choices[data-type*="select-one"] .choices__inner .choices__input {
    display: none !important;
}

/* ========================================
   TABLES
   ======================================== */
.dashboard-modern .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
}

.dashboard-modern .table {
    margin-bottom: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
}

.dashboard-modern .table thead th {
    background: var(--gray-50) !important;
    border-bottom: 1px solid var(--gray-200) !important;
    border-top: none !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--gray-600) !important;
    white-space: nowrap !important;
}

.dashboard-modern .table tbody tr {
    transition: background 0.1s ease !important;
}

.dashboard-modern .table tbody tr:hover {
    background: var(--gray-50) !important;
}

.dashboard-modern .table tbody td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--gray-100) !important;
    font-size: 14px !important;
    color: var(--gray-700) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.dashboard-modern .table tbody tr:last-child td {
    border-bottom: none !important;
}

.dashboard-modern .table td img {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-md) !important;
    object-fit: cover !important;
}

/* Ensure action buttons cell has proper width and alignment */
.dashboard-modern .table td:last-child,
.dashboard-modern .table th:last-child {
    min-width: 100px !important;
    text-align: center !important;
}

/* Action cell button container */
.dashboard-modern .table td:last-child {
    white-space: nowrap !important;
}

/* Fix button icon centering in tables */
.dashboard-modern .table .btn.btn-link {
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Prevent text cutoff in table cells */
.dashboard-modern .table td,
.dashboard-modern .table th {
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: none !important;
}

/* Card and table container overflow fix */
.dashboard-modern .card .table-responsive,
.dashboard-modern .card-body .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure proper table width */
.dashboard-modern .table-responsive > .table {
    min-width: 100% !important;
    width: max-content !important;
}

/* ========================================
   BADGES
   ======================================== */
.dashboard-modern .badge {
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
}

.dashboard-modern .badge.bg-gradient-success,
.dashboard-modern .badge.bg-success {
    background: var(--success-light) !important;
    color: #065F46 !important;
}

.dashboard-modern .badge.bg-gradient-warning,
.dashboard-modern .badge.bg-warning {
    background: var(--warning-light) !important;
    color: #92400E !important;
}

.dashboard-modern .badge.bg-gradient-danger,
.dashboard-modern .badge.bg-danger {
    background: var(--danger-light) !important;
    color: #991B1B !important;
}

.dashboard-modern .badge.bg-gradient-info,
.dashboard-modern .badge.bg-info {
    background: var(--info-light) !important;
    color: var(--yani-primary-dark) !important;
}

.dashboard-modern .badge.bg-gradient-dark,
.dashboard-modern .badge.bg-dark {
    background: var(--gray-100) !important;
    color: var(--gray-700) !important;
}

.dashboard-modern .badge.bg-gradient-secondary,
.dashboard-modern .badge.bg-secondary {
    background: var(--gray-100) !important;
    color: var(--gray-600) !important;
}

.dashboard-modern .badge.bg-gradient-primary {
    background: var(--yani-primary-light) !important;
    color: var(--yani-primary-dark) !important;
}

.dashboard-modern .badge.bg-default {
    background: var(--gray-100) !important;
    color: var(--gray-700) !important;
}

/* ========================================
   PAGINATION
   ======================================== */
.dashboard-modern #datatable-bottom {
    padding: 16px 20px !important;
    border-top: 1px solid var(--gray-100) !important;
}

.dashboard-modern .pagination {
    gap: 4px !important;
    margin: 0 !important;
    justify-content: center !important;
}

.dashboard-modern .page-item .page-link {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--gray-700) !important;
    background: var(--white) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dashboard-modern .page-item .page-link:hover {
    background: var(--gray-50) !important;
    border-color: var(--gray-300) !important;
}

.dashboard-modern .page-item.active .page-link {
    background: var(--yani-primary) !important;
    border-color: var(--yani-primary) !important;
    color: white !important;
}

.dashboard-modern .page-item.disabled .page-link {
    background: var(--gray-50) !important;
    color: var(--gray-400) !important;
}

/* ========================================
   MODALS
   ======================================== */
.dashboard-modern .modal-content {
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dashboard-modern .modal-header {
    border-bottom: 1px solid var(--gray-100) !important;
    padding: 16px 20px !important;
}

.dashboard-modern .modal-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--gray-800) !important;
}

.dashboard-modern .modal-body {
    padding: 20px !important;
}

.dashboard-modern .modal-footer {
    border-top: 1px solid var(--gray-100) !important;
    padding: 16px 20px !important;
}

/* ========================================
   ALERTS
   ======================================== */
.dashboard-modern .alert {
    border-radius: var(--radius-md) !important;
    border: none !important;
    padding: 14px 18px !important;
}

.dashboard-modern .alert-success {
    background: var(--success-light) !important;
    color: #065F46 !important;
}

.dashboard-modern .alert-danger {
    background: var(--danger-light) !important;
    color: #991B1B !important;
}

.dashboard-modern .alert-warning {
    background: var(--warning-light) !important;
    color: #92400E !important;
}

.dashboard-modern .alert-info {
    background: var(--info-light) !important;
    color: var(--yani-primary-dark) !important;
}

/* ========================================
   FLATPICKR - CALENDAR STYLING
   ======================================== */
.dashboard-modern .flatpickr-calendar {
    background: var(--white) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    font-family: var(--font-family) !important;
    padding: 8px !important;
}

/* Dropdown calendar - fixed width */
.dashboard-modern .flatpickr-calendar.open {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    width: 280px !important;
    max-width: 280px !important;
}

/* Hide input */
.dashboard-modern #mini-calendar-wrapper input,
.dashboard-modern #mini-calendar-wrapper .form-control {
    display: none !important;
}

/* Month Header Container */
.dashboard-modern .flatpickr-calendar .flatpickr-months {
    height: 48px !important;
    padding: 8px 0 !important;
    margin-bottom: 8px !important;
    position: relative !important;
    display: block !important;
}

.dashboard-modern .flatpickr-calendar .flatpickr-months .flatpickr-month {
    height: 32px !important;
    line-height: 32px !important;
}

/* Month/Year Text - Centered with Flexbox */
.dashboard-modern .flatpickr-calendar .flatpickr-current-month {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--gray-800) !important;
    height: 32px !important;
    padding-top: 6px !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    position: relative !important;
}

.dashboard-modern .flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: 16px !important;
    font-weight: 600 !important;
    background: none !important;
    border: none !important;
    -webkit-appearance: none !important;
    margin-right: 4px !important;
}

/* Year Input Wrapper - Must be visible */
.dashboard-modern .flatpickr-calendar .flatpickr-current-month .numInputWrapper {
    width: 70px !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    position: relative !important;
}

/* Year Input - Must be visible and interactive */
.dashboard-modern .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--gray-800) !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 60px !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: none !important;
    pointer-events: auto !important;
}

/* Year input when disabled - still show it */
.dashboard-modern .flatpickr-calendar .flatpickr-current-month .numInputWrapper input.cur-year[disabled] {
    color: var(--gray-800) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Year arrows - show on hover */
.dashboard-modern .flatpickr-calendar .flatpickr-current-month .numInputWrapper span.arrowUp,
.dashboard-modern .flatpickr-calendar .flatpickr-current-month .numInputWrapper span.arrowDown {
    display: block !important;
    visibility: visible !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
}

.dashboard-modern .flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover span.arrowUp,
.dashboard-modern .flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover span.arrowDown {
    opacity: 0.6 !important;
}

/* Prev/Next Arrows - FIXED VERTICAL CENTER */
.dashboard-modern .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.dashboard-modern .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    height: 32px !important;
    width: 32px !important;
    padding: 8px !important;
    top: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
}

.dashboard-modern .flatpickr-calendar .flatpickr-months .flatpickr-prev-month {
    left: 4px !important;
}

.dashboard-modern .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
    right: 4px !important;
}

.dashboard-modern .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
.dashboard-modern .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
    background: var(--gray-100) !important;
}

.dashboard-modern .flatpickr-calendar .flatpickr-prev-month svg,
.dashboard-modern .flatpickr-calendar .flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
    fill: var(--gray-600) !important;
}

.dashboard-modern .flatpickr-calendar .flatpickr-prev-month:hover svg,
.dashboard-modern .flatpickr-calendar .flatpickr-next-month:hover svg {
    fill: var(--yani-primary) !important;
}

/* Weekday Row */
.dashboard-modern .flatpickr-calendar .flatpickr-weekdays {
    height: 36px !important;
    background: transparent !important;
}

.dashboard-modern .flatpickr-calendar .flatpickr-weekdaycontainer {
    display: flex !important;
}

.dashboard-modern .flatpickr-calendar span.flatpickr-weekday {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--gray-400) !important;
    text-transform: uppercase !important;
    flex: 1 !important;
    line-height: 36px !important;
}

/* Days Grid - FIXED ALIGNMENT */
.dashboard-modern .flatpickr-calendar .flatpickr-days {
    width: 100% !important;
}

.dashboard-modern .flatpickr-calendar .dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

/* Each Day Cell - FIXED */
.dashboard-modern .flatpickr-calendar .flatpickr-day {
    flex-basis: 14.2857143% !important;
    max-width: 14.2857143% !important;
    width: 14.2857143% !important;
    height: 38px !important;
    line-height: 38px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--gray-700) !important;
}

.dashboard-modern .flatpickr-calendar .flatpickr-day:hover {
    background: var(--gray-100) !important;
}

.dashboard-modern .flatpickr-calendar .flatpickr-day.prevMonthDay,
.dashboard-modern .flatpickr-calendar .flatpickr-day.nextMonthDay {
    color: var(--gray-300) !important;
}

/* TODAY - Cyan outline */
.dashboard-modern .flatpickr-calendar .flatpickr-day.today {
    border: 2px solid var(--yani-primary) !important;
    color: var(--yani-primary) !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* SELECTED - Filled cyan */
.dashboard-modern .flatpickr-calendar .flatpickr-day.selected,
.dashboard-modern .flatpickr-calendar .flatpickr-day.selected:hover,
.dashboard-modern .flatpickr-calendar .flatpickr-day.selected.today {
    background: var(--yani-primary) !important;
    border-color: var(--yani-primary) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(6, 163, 218, 0.35) !important;
}

/* Mini Calendar Wrapper */
.dashboard-modern #mini-calendar-wrapper {
    padding: 0 8px 8px 8px !important;
    overflow: visible !important;
}

/* Fix mini calendar cutoff issue */
.dashboard-modern #mini-calendar-wrapper .flatpickr-calendar {
    position: relative !important;
    left: 0 !important;
    margin: 0 auto !important;
}

.dashboard-modern #mini-calendar-wrapper .flatpickr-innerContainer {
    width: 100% !important;
    overflow: visible !important;
}

.dashboard-modern #mini-calendar-wrapper .flatpickr-rContainer {
    width: 100% !important;
}

.dashboard-modern #mini-calendar-wrapper .flatpickr-weekdays,
.dashboard-modern #mini-calendar-wrapper .flatpickr-weekdaycontainer {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dashboard-modern #mini-calendar-wrapper .flatpickr-days {
    width: 100% !important;
}

.dashboard-modern #mini-calendar-wrapper .dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fix flatpickr dropdown calendar cutoff */
.flatpickr-calendar.open {
    z-index: 9999 !important;
}

/* Inline flatpickr - constrain to proper size */
.dashboard-modern .flatpickr-calendar.inline {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    box-shadow: none !important;
}

/* ========================================
   FULLCALENDAR
   ======================================== */
.dashboard-modern .fc {
    font-family: var(--font-family) !important;
}

.dashboard-modern .fc .fc-toolbar {
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

.dashboard-modern .fc .fc-toolbar-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--gray-800) !important;
}

/* Button Group Container */
.dashboard-modern .fc .fc-toolbar-chunk {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.dashboard-modern .fc .fc-button-group {
    display: flex !important;
    gap: 8px !important;
    border: none !important;
    box-shadow: none !important;
}

.dashboard-modern .fc .fc-button-group .fc-button {
    border-radius: 8px !important;
}

/* Base Button Styling */
.dashboard-modern .fc .fc-button {
    background: var(--white) !important;
    border: 1px solid var(--gray-300) !important;
    color: var(--gray-700) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.15s ease !important;
    text-transform: capitalize !important;
    margin: 0 !important;
}

.dashboard-modern .fc .fc-button:hover {
    background: var(--gray-50) !important;
    border-color: var(--gray-400) !important;
}

.dashboard-modern .fc .fc-button:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Active/Selected Button */
.dashboard-modern .fc .fc-button-primary:not(:disabled).fc-button-active,
.dashboard-modern .fc .fc-button-primary:not(:disabled):active {
    background: var(--yani-primary) !important;
    border-color: var(--yani-primary) !important;
    color: white !important;
}

/* Prev/Next Navigation Buttons - CENTERED */
.dashboard-modern .fc .fc-prev-button,
.dashboard-modern .fc .fc-next-button {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    background: var(--white) !important;
    border: 1px solid var(--gray-300) !important;
    border-radius: var(--radius-md) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dashboard-modern .fc .fc-prev-button:hover,
.dashboard-modern .fc .fc-next-button:hover {
    background: var(--gray-50) !important;
    border-color: var(--gray-400) !important;
}

/* Arrow Icons - CENTERED */
.dashboard-modern .fc .fc-button .fc-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

.dashboard-modern .fc .fc-icon-chevron-left,
.dashboard-modern .fc .fc-icon-chevron-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dashboard-modern .fc .fc-icon-chevron-left::before {
    content: "‹" !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
    display: block !important;
}

.dashboard-modern .fc .fc-icon-chevron-right::before {
    content: "›" !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
    display: block !important;
}

/* Today Button */
.dashboard-modern .fc .fc-today-button {
    background: var(--yani-primary) !important;
    border-color: var(--yani-primary) !important;
    color: white !important;
    padding: 10px 20px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dashboard-modern .fc .fc-today-button:hover {
    background: var(--yani-primary-dark) !important;
    border-color: var(--yani-primary-dark) !important;
}

.dashboard-modern .fc .fc-today-button:disabled {
    background: var(--gray-200) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-500) !important;
    opacity: 1 !important;
}

/* View Toggle Buttons */
.dashboard-modern .fc .fc-dayGridMonth-button,
.dashboard-modern .fc .fc-timeGridWeek-button,
.dashboard-modern .fc .fc-timeGridDay-button {
    padding: 10px 16px !important;
    height: 40px !important;
}

/* Today's Date Highlight */
.dashboard-modern .fc .fc-daygrid-day.fc-day-today {
    background: var(--yani-primary-50) !important;
}

.dashboard-modern .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    background: var(--yani-primary) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Column Headers (Day Names) */
.dashboard-modern .fc .fc-col-header-cell {
    background: var(--gray-50) !important;
    padding: 12px 0 !important;
    border-color: var(--gray-200) !important;
}

.dashboard-modern .fc .fc-col-header-cell-cushion {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--gray-600) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
}

/* Day Numbers */
.dashboard-modern .fc .fc-daygrid-day-number {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--gray-700) !important;
    padding: 8px !important;
    text-decoration: none !important;
}

/* Calendar Grid */
.dashboard-modern .fc .fc-scrollgrid {
    border-color: var(--gray-200) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
}

.dashboard-modern .fc .fc-scrollgrid td,
.dashboard-modern .fc .fc-scrollgrid th {
    border-color: var(--gray-200) !important;
}

/* Day Cells */
.dashboard-modern .fc .fc-daygrid-day {
    transition: background 0.1s ease !important;
}

.dashboard-modern .fc .fc-daygrid-day:hover {
    background: var(--gray-50) !important;
}

/* Events */
.dashboard-modern .fc .fc-event {
    border-radius: var(--radius-sm) !important;
    border: none !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    background: var(--yani-primary) !important;
    cursor: pointer !important;
}

.dashboard-modern .fc .fc-event:hover {
    background: var(--yani-primary-dark) !important;
}

.dashboard-modern .fc .fc-event-title {
    font-weight: 500 !important;
}

.dashboard-modern .fc .fc-event-time {
    font-weight: 400 !important;
    opacity: 0.9 !important;
}

/* More Events Link */
.dashboard-modern .fc .fc-daygrid-more-link {
    color: var(--yani-primary) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
}

.dashboard-modern .fc .fc-daygrid-more-link:hover {
    color: var(--yani-primary-dark) !important;
    text-decoration: underline !important;
}

/* Time Grid (Week/Day View) */
.dashboard-modern .fc .fc-timegrid-slot {
    height: 48px !important;
}

.dashboard-modern .fc .fc-timegrid-slot-label {
    font-size: 12px !important;
    color: var(--gray-500) !important;
}

.dashboard-modern .fc .fc-timegrid-now-indicator-line {
    border-color: var(--danger) !important;
}

.dashboard-modern .fc .fc-timegrid-now-indicator-arrow {
    border-color: var(--danger) !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* Calendar Card */
.dashboard-modern .card-calendar {
    border: 1px solid var(--gray-200) !important;
}

.dashboard-modern .card-calendar .card-body {
    padding: 20px !important;
}

/* ========================================
   CALENDAR PAGE - EVENT LIST & POPUP
   ======================================== */
/* Event List Items */
.dashboard-modern .event-list-item {
    padding: 12px !important;
    border-radius: var(--radius-md) !important;
    transition: background 0.15s ease !important;
    cursor: pointer !important;
}

.dashboard-modern .event-list-item:hover {
    background: var(--gray-50) !important;
}

.dashboard-modern .event-list-item .icon.icon-shape {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--yani-primary) !important;
}

.dashboard-modern .event-list-item .icon.icon-shape i {
    font-size: 20px !important;
    color: white !important;
}

.dashboard-modern .event-list-item .numbers h6 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--gray-800) !important;
    margin-bottom: 4px !important;
}

.dashboard-modern .event-list-item .numbers span {
    font-size: 12px !important;
    color: var(--gray-500) !important;
}

/* Event Popup */
.dashboard-modern #event-popup {
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--gray-200) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

.dashboard-modern #event-popup h5 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--gray-800) !important;
}

.dashboard-modern #event-popup h6 {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--gray-500) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.dashboard-modern #event-popup p {
    font-size: 14px !important;
    color: var(--gray-700) !important;
}

.dashboard-modern #event-popup hr {
    border-color: var(--gray-200) !important;
    opacity: 1 !important;
}

.dashboard-modern #event-popup .btn-danger {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    border-radius: var(--radius-md) !important;
}

.dashboard-modern #event-popup .table {
    margin: 0 !important;
}

.dashboard-modern #event-popup .table td {
    padding: 8px 0 !important;
    border: none !important;
    font-size: 14px !important;
}

.dashboard-modern #event-popup .table tr.border-top td {
    border-top: 1px solid var(--gray-200) !important;
    padding-top: 12px !important;
}

/* Edit Booking Button in Popup */
.dashboard-modern #event-popup #popup-edit-link {
    background: var(--success) !important;
    color: white !important;
    padding: 10px 16px !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.dashboard-modern #event-popup #popup-edit-link:hover {
    background: #059669 !important;
}

/* ========================================
   CHARTS
   ======================================== */
.dashboard-modern .badge.badge-dot {
    background: transparent !important;
    padding: 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.dashboard-modern .badge.badge-dot i {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
}

/* ========================================
   STAR RATINGS
   ======================================== */
.dashboard-modern .fa-star,
.dashboard-modern .fa-star-half-alt {
    color: #FBBF24 !important;
}

/* ========================================
   EMPTY STATES
   ======================================== */
.dashboard-modern .text-center.py-4 {
    padding: 40px 20px !important;
}

.dashboard-modern .text-muted {
    color: var(--gray-500) !important;
}

/* ========================================
   SCROLLBAR
   ======================================== */
.dashboard-modern ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.dashboard-modern ::-webkit-scrollbar-track {
    background: var(--gray-100);
}

.dashboard-modern ::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
}

.dashboard-modern ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-400);
}

/* ========================================
   UTILITIES
   ======================================== */
.dashboard-modern .text-primary {
    color: var(--yani-primary) !important;
}

.dashboard-modern .text-success {
    color: var(--success) !important;
}

.dashboard-modern .text-warning {
    color: var(--warning) !important;
}

.dashboard-modern .text-danger {
    color: var(--danger) !important;
}

.dashboard-modern .text-dark {
    color: var(--gray-800) !important;
}

.dashboard-modern .text-secondary {
    color: var(--gray-500) !important;
}

.dashboard-modern .opacity-10 {
    opacity: 1 !important;
}

/* ========================================
   PROFILE PAGE STYLES
   ======================================== */
/* Profile cover gradient */
.dashboard-modern .profile-cover {
    background: linear-gradient(135deg, var(--yani-primary) 0%, #0d6efd 100%) !important;
}

/* Profile avatar */
.dashboard-modern .avatar-xxl {
    width: 120px !important;
    height: 120px !important;
}

.dashboard-modern .avatar-xxl img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Profile info list */
.dashboard-modern .list-group-flush .list-group-item {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--gray-100) !important;
}

.dashboard-modern .list-group-flush .list-group-item:last-child {
    border-bottom: none !important;
}

/* Notification items hover */
.dashboard-modern a.d-block.rounded-3:hover {
    background-color: var(--gray-200) !important;
}

/* Card border top style */
.dashboard-modern .card-border-top {
    border-top: 3px solid var(--yani-primary) !important;
}

/* Conversation items hover */
.dashboard-modern .d-flex.align-items-center.rounded-3:hover {
    background-color: var(--gray-200) !important;
}

/* Profile button styling */
.dashboard-modern .btn-outline-primary {
    border-color: var(--yani-primary) !important;
    color: var(--yani-primary) !important;
}

.dashboard-modern .btn-outline-primary:hover {
    background-color: var(--yani-primary) !important;
    color: white !important;
}

.dashboard-modern .btn-outline-success {
    border-color: var(--success) !important;
    color: var(--success) !important;
}

.dashboard-modern .btn-outline-success:hover {
    background-color: var(--success) !important;
    color: white !important;
}

/* Store cards hover effect */
.dashboard-modern .card.card-border-top {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.dashboard-modern .card.card-border-top:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;
}

/* Gap utility */
.dashboard-modern .gap-2 {
    gap: 8px !important;
}

/* Flex grow */
.dashboard-modern .flex-grow-1 {
    flex-grow: 1 !important;
}

/* Text truncate */
.dashboard-modern .text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ========================================
   MINIMIZED SIDEBAR (g-sidenav-hidden)
   ======================================== */

/* Base sidebar - remove borders, shadows, margins, and rounded corners at bottom */
.g-sidenav-hidden .navbar-vertical,
.g-sidenav-hidden .sidenav {
    box-shadow: none !important;
    border: none !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
}

/* Remove ALL borders and lines from sidebar */
.g-sidenav-hidden .navbar-vertical *,
.g-sidenav-hidden .sidenav * {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
}

.g-sidenav-hidden .navbar-vertical::after,
.g-sidenav-hidden .navbar-vertical::before,
.g-sidenav-hidden .sidenav::after,
.g-sidenav-hidden .sidenav::before,
.g-sidenav-hidden .navbar-vertical *::after,
.g-sidenav-hidden .navbar-vertical *::before,
.g-sidenav-hidden .sidenav *::after,
.g-sidenav-hidden .sidenav *::before {
    display: none !important;
    border: none !important;
    background: none !important;
}

/* Hide scrollbar */
.g-sidenav-hidden .navbar-vertical::-webkit-scrollbar,
.g-sidenav-hidden .sidenav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

/* Hide perfect-scrollbar rails */
.g-sidenav-hidden .navbar-vertical .ps__rail-x,
.g-sidenav-hidden .navbar-vertical .ps__rail-y,
.g-sidenav-hidden .sidenav .ps__rail-x,
.g-sidenav-hidden .sidenav .ps__rail-y {
    display: none !important;
    opacity: 0 !important;
}

/* Hide card/footer at bottom */
.g-sidenav-hidden .navbar-vertical .card,
.g-sidenav-hidden .sidenav .card,
.g-sidenav-hidden .navbar-vertical .sidenav-footer,
.g-sidenav-hidden .sidenav .sidenav-footer {
    display: none !important;
}

/* Hide mini-icon text abbreviations */
.g-sidenav-hidden .sidenav-mini-icon {
    display: none !important;
}

/* Hide horizontal rules */
.g-sidenav-hidden .navbar-vertical hr.horizontal,
.g-sidenav-hidden .sidenav hr.horizontal {
    display: none !important;
}

/* Hide sub-menu collapses */
.g-sidenav-hidden .navbar-vertical .nav-item .collapse,
.g-sidenav-hidden .sidenav .nav-item .collapse {
    display: none !important;
}

/* Keep navbar-collapse visible and remove overflow */
.g-sidenav-hidden .navbar-vertical .navbar-collapse,
.g-sidenav-hidden .sidenav .navbar-collapse,
.g-sidenav-hidden .navbar-vertical.navbar-expand-xs .navbar-collapse {
    display: block !important;
    visibility: visible !important;
    overflow: hidden !important;
    height: auto !important;
}

/* Logo - centered */
.g-sidenav-hidden .navbar-vertical .sidenav-header,
.g-sidenav-hidden .sidenav .sidenav-header {
    padding: 16px !important;
    text-align: center !important;
}

.g-sidenav-hidden .navbar-vertical .navbar-brand,
.g-sidenav-hidden .sidenav .navbar-brand {
    justify-content: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.g-sidenav-hidden .navbar-vertical .navbar-brand img,
.g-sidenav-hidden .sidenav .navbar-brand img {
    max-height: 38px !important;
}

.g-sidenav-hidden .navbar-vertical .navbar-brand span,
.g-sidenav-hidden .sidenav .navbar-brand span {
    display: none !important;
}

/* Avatar section - centered */
.g-sidenav-hidden .navbar-vertical .nav-item.mb-2,
.g-sidenav-hidden .sidenav .nav-item.mb-2 {
    text-align: center !important;
    margin: 3px 4px !important;
}

.g-sidenav-hidden .navbar-vertical .nav-item.mb-2 > .nav-link,
.g-sidenav-hidden .sidenav .nav-item.mb-2 > .nav-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px !important;
    margin: 0 auto !important;
    min-height: 46px !important;
}

.g-sidenav-hidden .navbar-vertical .avatar,
.g-sidenav-hidden .sidenav .avatar {
    width: 40px !important;
    height: 40px !important;
}

/* ALL nav-links - consistent icon button style */
.g-sidenav-hidden .navbar-vertical .navbar-nav > .nav-item > .nav-link,
.g-sidenav-hidden .sidenav .navbar-nav > .nav-item > .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 12px !important;
    margin: 4px auto !important;
    border-radius: 12px !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}

/* SVG icons */
.g-sidenav-hidden .navbar-vertical .nav-link svg,
.g-sidenav-hidden .sidenav .nav-link svg {
    width: 20px !important;
    height: 20px !important;
    fill: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
}

.g-sidenav-hidden .navbar-vertical .nav-link svg path,
.g-sidenav-hidden .sidenav .nav-link svg path {
    fill: rgba(255, 255, 255, 0.6) !important;
}

/* Hover state */
.g-sidenav-hidden .navbar-vertical .navbar-nav > .nav-item > .nav-link:hover,
.g-sidenav-hidden .sidenav .navbar-nav > .nav-item > .nav-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.g-sidenav-hidden .navbar-vertical .nav-link:hover svg,
.g-sidenav-hidden .navbar-vertical .nav-link:hover svg path,
.g-sidenav-hidden .sidenav .nav-link:hover svg,
.g-sidenav-hidden .sidenav .nav-link:hover svg path {
    fill: rgba(255, 255, 255, 0.9) !important;
}

/* Active state */
.g-sidenav-hidden .navbar-vertical .navbar-nav > .nav-item > .nav-link.active,
.g-sidenav-hidden .sidenav .navbar-nav > .nav-item > .nav-link.active {
    background: var(--yani-primary) !important;
    box-shadow: 0 4px 15px rgba(6, 163, 218, 0.35) !important;
}

.g-sidenav-hidden .navbar-vertical .nav-link.active svg,
.g-sidenav-hidden .navbar-vertical .nav-link.active svg path,
.g-sidenav-hidden .sidenav .nav-link.active svg,
.g-sidenav-hidden .sidenav .nav-link.active svg path {
    fill: white !important;
}

/* ========================================
   MINIMIZED SIDEBAR - HOVER EXPANSION
   ======================================== */

.g-sidenav-hidden .navbar-vertical:hover .nav-item .collapse.show,
.g-sidenav-hidden .sidenav:hover .nav-item .collapse.show {
    display: block !important;
}

.g-sidenav-hidden .navbar-vertical:hover .navbar-nav > .nav-item > .nav-link,
.g-sidenav-hidden .sidenav:hover .navbar-nav > .nav-item > .nav-link {
    width: auto !important;
    height: auto !important;
    min-height: 46px !important;
    justify-content: flex-start !important;
    padding: 12px !important;
    margin: 4px 8px !important;
}

.g-sidenav-hidden .navbar-vertical:hover .nav-link svg,
.g-sidenav-hidden .sidenav:hover .nav-link svg {
    margin-right: 12px !important;
}

.g-sidenav-hidden .navbar-vertical:hover hr.horizontal,
.g-sidenav-hidden .sidenav:hover hr.horizontal {
    display: block !important;
}

.g-sidenav-hidden .navbar-vertical:hover .nav-item.mb-2 > .nav-link,
.g-sidenav-hidden .sidenav:hover .nav-item.mb-2 > .nav-link {
    width: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding: 10px !important;
    margin: 3px 4px !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 991.98px) {
    .dashboard-modern .sidenav {
        transform: translateX(-100%);
    }

    .dashboard-modern .g-sidenav-pinned .sidenav {
        transform: translateX(0);
    }
}

@media (max-width: 767.98px) {
    .dashboard-modern .row.d-flex.justify-content-end.input-group-static {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .dashboard-modern .row.d-flex.justify-content-end.input-group-static > div {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}