@import '../../vendor/filament/filament/resources/css/index.css';

/* Custom Css */
.bg-primary {
    background-color: #0d6efd !important
}

.bg-secondary {
    background-color: #6c757d !important
}

.bg-success {
    background-color: #198754 !important
}

.bg-danger {
    background-color: #dc3545 !important
}

.bg-warning {
    background-color: #ffc107 !important
}

.bg-info {
    background-color: #0dcaf0 !important
}

.flex-shrink-0 {
    margin-right: 10px;
}

.p-20 {
    padding: 20px;
}

.m-20 {
    margin: 20px;
    padding: 20px;
}

.text-11px {
    font-size: 11px;
}

.text-10px {
    font-size: 10px;
}

.text-primary-600 {
    margin-right: 10px;
}

.border {
    border-radius: 5px;
}

.bg-25D366 {
    background-color: #25D366;
}

.dark\:text-white:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

:root {
    --font-family: 'Inter';
    --sidebar-width: 90px;
    --collapsed-sidebar-width: 90px;
    --default-theme-mode: system;
}

.px-6 {
    padding-left: 0rem;
    padding-right: 0rem
}

/* Hide Topbar */
.fi-topbar {
    display: none !important;
}

/* Sidebar Styles */
.fi-sidebar {
    background-color: #1e323e !important;
    width: 70px !important;
}

.fi-sidebar-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hide labels in sidebar */
.fi-sidebar-header,
.fi-sidebar-group-label,
.fi-sidebar-item-label {
    display: none !important;
}

/* Center icons and set height */
.fi-sidebar-item-button {
    justify-content: center !important;
    height: 45px !important;
    width: 60px !important;
    margin: 0px 13px !important;
    border-radius: 5px;
    background-color: #1e323e;
}

.fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: #009966 !important;
}

.fi-sidebar-item-icon {
    margin: 0 !important;
    color: #fff !important;
}

/* Active item state */
.fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: #009966 !important;
}

.sidebar-logo {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #333;
}

.sidebar-logo img {
    height: 50px;
    width: 50px;
    object-fit: contain;
}

/* Custom Css */
.bg-primary {
    background-color: #0d6efd !important
}

.bg-secondary {
    background-color: #6c757d !important
}

.bg-success {
    background-color: #198754 !important
}

.bg-danger {
    background-color: #dc3545 !important
}

.bg-warning {
    background-color: #ffc107 !important
}

.bg-info {
    background-color: #0dcaf0 !important
}

.flex-shrink-0 {
    margin-right: 10px;
}

.bg-emerald-500 {
    background-color: #198754 !important
}

.bg-emerald-500:hover {
    background-color: #198754 !important
}

.bg-amber-500 {
    background-color: #ffc107 !important
}

.bg-amber-500:hover {
    background-color: #ffc107 !important
}

.bg-rose-500 {
    background-color: #dc3545 !important
}

.bg-rose-500:hover {
    background-color: #dc3545 !important
}

.bg-gray-500 {
    background-color: #6c757d !important
}

.bg-gray-500:hover {
    background-color: #6c757d !important
}

.text-gray-700 {
    color: #6c757d !important
}

.text-gray-700:hover {
    color: #6c757d !important
}

.text-rose-700 {
    color: #dc3545 !important
}

.text-rose-700:hover {
    color: #dc3545 !important
}

.text-emerald-700 {
    color: #198754 !important
}

.text-emerald-700:hover {
    color: #198754 !important
}

.text-amber-700 {
    color: #ffc107 !important
}

.text-amber-700:hover {
    color: #ffc107 !important
}

.bg-blue-500 {
    background-color: #0d6efd !important
}

.bg-purple-500 {
    background-color: #6f53ac !important
}

.bg-yellow-500 {
    background-color: #ffc107 !important
}

.bg-green-500 {
    background-color: #198754 !important
}

.bg-indigo-500 {
    background-color: #ac536f !important
}

.bg-pink-500 {
    background-color: #dc3545 !important
}

.bg-blue-500:hover {
    background-color: #0d6efd !important
}

.bg-purple-500:hover {
    background-color: #6f53ac !important
}

.bg-yellow-500:hover {
    background-color: #ffc107 !important
}

.bg-green-500:hover {
    background-color: #198754 !important
}

.bg-indigo-500:hover {
    background-color: #ac536f !important
}

.bg-pink-500:hover {
    background-color: #dc3545 !important
}