/* Import Cairo font from Google Fonts mido */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

/* Apply Cairo font to all text elements with high specificity */
* {
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

html, body, .layout-main, .container, .page-container, .content, .page-content {
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* Form elements and inputs */
.form-control, .btn, .awesomplete input, input, textarea, select, .select2-container .select2-selection {
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* Headers and titles */
h1, h2, h3, h4, h5, h6, .page-title, .ellipsis, .control-label, .modal-title, .section-head {
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* List and grid elements */
.list-row, .grid-body, .data-row, .grid-heading-row, .list-header, .list-item {
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* Navbar and navigation elements */
.navbar, .navbar-brand, .nav-link, .dropdown-menu, .sidebar {
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* Modals and dialogs */
.modal, .modal-content, .modal-header, .modal-body, .modal-footer {
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* Cards and widgets */
.card, .widget, .dashboard-graph, .number-widget-box {
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* Header background color - targeting all possible navbar selectors */
.navbar, 
.navbar.navbar-expand, 
.navbar.navbar-light, 
.navbar.navbar-dark,
header.navbar,
.desk-header,
.top-navbar,
body .navbar {
  background-color: #f5c1c1 !important;
  background: #f5c1c1 !important;
  color: #1f1f1f !important;
}

/* Navbar text and links color for readability */
.navbar .navbar-brand, 
.navbar .nav-link, 
.navbar .nav-item > a, 
.navbar .btn-link, 
.navbar .indicator-pill,
.navbar .dropdown-toggle,
.navbar .navbar-text,
.navbar a {
  color: #1f1f1f !important;
}

/* Navbar brand and logo */
.navbar-brand {
  color: #1f1f1f !important;
  font-weight: 600 !important;
}

/* Dropdown menus from navbar */
.navbar .dropdown-menu {
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* Ensure buttons in navbar maintain readability */
.navbar .btn {
  color: #1f1f1f !important;
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

/* Notification indicators and badges */
.navbar .indicator, .navbar .badge {
  background-color: #8a3b3b !important;
  color: #ffffff !important;
}

/* Force font on any remaining elements that might be missed */
div, span, p, li, td, th, label, button, a {
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}


/* sidebar mido */
/* Sidebar menu improvements */
.desk-sidebar {
  width: 257px !important; /* Wider sidebar for better readability */
  background: #ffffff !important;
  border-right: 1px solid #e9ecef !important;
}

/* Sidebar menu items - larger font and icons */
.desk-sidebar .standard-sidebar-item a,
.desk-sidebar .sidebar-item-container a,
.sidebar-menu .sidebar-item a {
  font-size: 16px !important; /* Larger font */
  font-weight: 500 !important;
  padding: 12px 16px !important; /* More padding for better spacing */
  color: #374151 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
}

/* Sidebar icons - make them larger */
.desk-sidebar .standard-sidebar-item a .sidebar-item-icon,
.desk-sidebar .sidebar-item-container a .sidebar-item-icon,
.sidebar-menu .sidebar-item a .sidebar-item-icon,
.desk-sidebar .standard-sidebar-item a svg,
.desk-sidebar .sidebar-item-container a svg {
  width: 20px !important;
  height: 20px !important;
  margin-left: 12px !important; /* Right margin for RTL */
  margin-right: 8px !important;
  font-size: 18px !important;
}

/* Active sidebar item styling */
.desk-sidebar .standard-sidebar-item.selected a,
.desk-sidebar .sidebar-item-container.selected a,
.sidebar-menu .sidebar-item.selected a,
.desk-sidebar .standard-sidebar-item a.selected,
.desk-sidebar .sidebar-item-container a.selected {
  background: linear-gradient(135deg, #f5c1c1 0%, #f1b5b5 100%) !important;
  color: #1f1f1f !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(245, 193, 193, 0.3) !important;
  border-left: 4px solid #8a3b3b !important; /* Active indicator */
}

/* Hover effect for sidebar items */
.desk-sidebar .standard-sidebar-item a:hover,
.desk-sidebar .sidebar-item-container a:hover,
.sidebar-menu .sidebar-item a:hover {
  background: #f8f9fa !important;
  color: #1f1f1f !important;
  transform: translateX(-2px) !important; /* Subtle hover animation */
}

/* Sidebar section headers */
.desk-sidebar .sidebar-section,
.sidebar-menu .sidebar-section {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  padding: 16px 16px 8px 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Module icons in sidebar */
.desk-sidebar .standard-sidebar-item a[data-route*="buying"] .sidebar-item-icon,
.desk-sidebar .standard-sidebar-item a[href*="buying"] .sidebar-item-icon {
  color: #8a3b3b !important; /* Accent color for buying module */
}

/* Ensure proper RTL support for Arabic text */
.desk-sidebar .standard-sidebar-item a,
.desk-sidebar .sidebar-item-container a {
  direction:ctrl + K rtl !important;
  text-align: right !important;
}

/* Sidebar collapse/expand button */
.sidebar-toggle-btn {
  background: #f5c1c1 !important;
  color: #1f1f1f !important;
  border: none !important;
  padding: 8px !important;
  border-radius: 4px !important;
}

/* Sub-items in sidebar (if any) */
.desk-sidebar .standard-sidebar-item .sidebar-child-item a,
.desk-sidebar .sidebar-item-container .sidebar-child-item a {
  font-size: 14px !important;
  padding: 8px 16px 8px 40px !important; /* Indented sub-items */
  color: #6b7280 !important;
}

.desk-sidebar .standard-sidebar-item .sidebar-child-item.selected a,
.desk-sidebar .sidebar-item-container .sidebar-child-item.selected a {
  background: #f5c1c1 !important;
  color: #1f1f1f !important;
  font-weight: 500 !important;
}

/* Make sidebar scrollable if needed */
.desk-sidebar {
  overflow-y: auto !important;
  max-height: calc(100vh - 60px) !important;
}

/* Custom scrollbar for sidebar */
.desk-sidebar::-webkit-scrollbar {
  width: 6px !important;
}

.desk-sidebar::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
}

.desk-sidebar::-webkit-scrollbar-thumb {
  background: #c1c1c1 !important;
  border-radius: 3px !important;
}

.desk-sidebar::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8 !important;
}

/* Sidebar background color */
.desk-sidebar {
  width: 260px !important;
  background: #f3f9ff !important; /* Light blue background */
  background-color: #f3f9ff !important; /* Light blue background */
  border-right: 1px solid #e9ecef !important;
}

/* Sidebar menu items - bold font weight */
.desk-sidebar .standard-sidebar-item a,
.desk-sidebar .sidebar-item-container a,
.sidebar-menu .sidebar-item a {
  font-size: 16px !important;
  font-weight: 600 !important; /* Bold font weight */
  padding: 12px 16px !important;
  color: #374151 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
}

/* Active sidebar item styling with the new background */
.desk-sidebar .standard-sidebar-item.selected a,
.desk-sidebar .sidebar-item-container.selected a,
.sidebar-menu .sidebar-item.selected a,
.desk-sidebar .standard-sidebar-item a.selected,
.desk-sidebar .sidebar-item-container a.selected {
  background: linear-gradient(135deg, #f5c1c1 0%, #f1b5b5 100%) !important;
  color: #1f1f1f !important;
  font-weight: 700 !important; /* Keep bold for active items */
  box-shadow: 0 2px 8px rgba(245, 193, 193, 0.3) !important;
  border-left: 4px solid #8a3b3b !important;
}

/* Hover effect for sidebar items */
.desk-sidebar .standard-sidebar-item a:hover,
.desk-sidebar .sidebar-item-container a:hover,
.sidebar-menu .sidebar-item a:hover {
  background: rgba(255, 255, 255, 0.7) !important; /* White overlay on light blue background */
  color: #1f1f1f !important;
  font-weight: 700 !important; /* Bold on hover */
  transform: translateX(-2px) !important;
}

/* Sidebar section headers with bold font */
.desk-sidebar .sidebar-section,
.sidebar-menu .sidebar-section {
  font-size: 13px !important;
  font-weight: 700 !important; /* Bold section headers */
  color: #6b7280 !important;
  padding: 16px 16px 8px 16px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Sub-items in sidebar with bold font */
.desk-sidebar .standard-sidebar-item .sidebar-child-item a,
.desk-sidebar .sidebar-item-container .sidebar-child-item a {
  font-size: 14px !important;
  font-weight: 700 !important; /* Bold sub-items */
  padding: 8px 16px 8px 40px !important;
  color: #6b7280 !important;
}

.desk-sidebar .standard-sidebar-item .sidebar-child-item.selected a,
.desk-sidebar .sidebar-item-container .sidebar-child-item.selected a {
  background: #f5c1c1 !important;
  color: #1f1f1f !important;
  font-weight: 600 !important; /* Bold selected sub-items */
}

/* Ensure sidebar container maintains the light blue background */
.layout-side-section {
  background: #f3f9ff !important;
}

.desk-sidebar .desk-sidebar-contents {
  background: #f3f9ff !important;
}

/* Make sure the entire sidebar area is light blue */
.layout-main .layout-side-section {
  background: #f3f9ff !important;
}
/* Make sure login form is visible */
#page-login {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5c1c1;
}

/* Background image with opacity */
#page-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/solly/images/bk.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: 0;
}

/* Hide navbar and footer */


/* Ensure login content is visible */
.login-content {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: 420px;
}

/* Make sure page card is visible */
.page-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Center the main container */
main.container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Form styling */
.form-control {
    border-radius: 10px;
    border: 1px solid rgba(33, 150, 243, 0.3);
    padding: 12px 15px;
    margin-bottom: 15px;
}

.btn-primary {
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    border: none;
    border-radius: 25px;
    padding: 12px 30px;
    font-weight: 600;
    width: 100%;
}
/*  login card */
.for-login {
    width: 400px;
    direction: rtl;
    background-color: #fff;
    border-radius: 10%;
}

/* Move Show password toggle to the left for RTL */
.toggle-password {
    position: absolute;
    left: 32px !important; /* Move to left instead of right */
    right: auto !important;
    top: 13px !important;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    background: none;
    border: none;
    color: #666;
    font-size: 12px;
}

/* Position the password input container */
.input-with-feedback {
    position: relative;
    direction: rtl;
}

/* Adjust password input padding for RTL */
input[type="password"],
.form-control[type="password"] {
    padding-left: 50px !important; /* Add space on left for the toggle */
    padding-right: 15px !important;
    direction: rtl;
    text-align: right;
}

/* Alternative approach - target the show/hide button specifically */
.btn-password-toggle {
    position: absolute;
    left: 8px !important;
    right: auto !important;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #007bff;
    font-size: 12px;
    cursor: pointer;
    z-index: 5;
}

/* Style for the show password text */
.password-strength-indicator + .btn,
.form-control + .btn {
    left: 10px !important;
    right: auto !important;
}