/* Fatoorix ERPNext Custom Branding */

/* Primary Brand Colors */
:root {
    --fatoorix-primary: #2563eb;
    --fatoorix-secondary: #1e40af;
    --fatoorix-accent: #3b82f6;
    --fatoorix-success: #10b981;
    --fatoorix-warning: #f59e0b;
    --fatoorix-danger: #ef4444;
    --fatoorix-dark: #1f2937;
    --fatoorix-light: #f8fafc;
    
    /* Override ERPNext sidebar hover colors */
    --sidebar-select-color: #2563eb;
    --gray-100: #2563eb;
    --gray-200: #2563eb;
    --gray-300: #2563eb;
}

/* Header Branding */
.navbar-brand img {
    content: url('/files/Fatoorix_Logo.png') !important;
    max-height: 32px !important;
    width: auto !important;
    background: white !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
}

/* Sidebar Logo */
.sidebar .sidebar-brand img {
    content: url('/files/Fatoorix_Logo.png') !important;
    max-height: 28px !important;
    width: auto !important;
    background: white !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* Primary Color Overrides */
.btn-primary {
    background-color: var(--fatoorix-primary) !important;
    border-color: var(--fatoorix-primary) !important;
}

.btn-primary:hover {
    background-color: var(--fatoorix-secondary) !important;
    border-color: var(--fatoorix-secondary) !important;
}

/* Navigation Bar */
.navbar {
    background-color: var(--fatoorix-primary) !important;
}

.navbar-nav .nav-link {
    color: white !important;
}

.navbar-nav .nav-link:hover {
    color: var(--fatoorix-light) !important;
}

/* Top Search Field - Better contrast */
.navbar .form-control,
.navbar input[type="search"],
.navbar .search-bar input {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    color: #1f2937 !important;
    border-radius: 6px !important;
}

.navbar .form-control::placeholder,
.navbar input[type="search"]::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

.navbar .form-control:focus,
.navbar input[type="search"]:focus {
    background-color: white !important;
    border-color: #e5e7eb !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
    color: #1f2937 !important;
}

/* Search Dropdown - Better contrast */
.navbar .search-results,
.navbar .dropdown-menu,
.search-dropdown,
.awesomplete > ul {
    background-color: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    margin-top: 4px !important;
}

.navbar .search-results li,
.navbar .dropdown-menu li,
.search-dropdown li,
.awesomplete > ul > li {
    background-color: white !important;
    color: #1f2937 !important;
    padding: 8px 16px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.navbar .search-results li:hover,
.navbar .dropdown-menu li:hover,
.search-dropdown li:hover,
.awesomplete > ul > li:hover,
.awesomplete > ul > li[aria-selected="true"] {
    background-color: #f8fafc !important;
    color: #1f2937 !important;
}

.navbar .search-results a,
.navbar .dropdown-menu a,
.search-dropdown a,
.awesomplete > ul > li a {
    color: #1f2937 !important;
    text-decoration: none !important;
}

.navbar .search-results a:hover,
.navbar .dropdown-menu a:hover,
.search-dropdown a:hover,
.awesomplete > ul > li a:hover {
    color: var(--fatoorix-primary) !important;
}

/* Sidebar */
.sidebar,
.desk-sidebar,
.layout-side-section {
    background-color: #1e293b !important;
    border-right: 1px solid #334155 !important;
}

.sidebar .nav-link,
.desk-sidebar .nav-link,
.sidebar-item,
.sidebar-item a {
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    margin: 2px 8px !important;
}

/* Force icon visibility */
.sidebar .nav-link svg,
.sidebar .nav-link use,
.sidebar .nav-link path,
.sidebar .standard-sidebar-item::before,
.sidebar .sidebar-item-container::before,
.sidebar .sidebar-item-label::before {
    fill: white !important;
    stroke: white !important;
    color: white !important;
}

/* Target specific ERPNext sidebar classes */
.standard-sidebar .sidebar-item-container,
.standard-sidebar .sidebar-item-label,
.standard-sidebar .standard-sidebar-item {
    color: white !important;
}

.standard-sidebar .sidebar-item-container::before,
.standard-sidebar .sidebar-item-label::before {
    color: white !important;
    opacity: 1 !important;
}

.sidebar .nav-link:hover,
.desk-sidebar .nav-link:hover,
.sidebar-item:hover,
.sidebar-item a:hover,
.standard-sidebar .sidebar-item-container:hover,
.sidebar .standard-sidebar-item:hover,
.sidebar .sidebar-item-label:hover {
    background-color: #2563eb !important;
    color: white !important;
}

.sidebar .nav-link.active,
.desk-sidebar .nav-link.active,
.sidebar-item.active,
.sidebar-item.active a,
.standard-sidebar .sidebar-item-container.selected,
.sidebar .standard-sidebar-item.selected {
    background-color: #2563eb !important;
    color: white !important;
}

/* Remove existing hover styles and apply Fatoorix blue */
.sidebar .standard-sidebar-item:hover,
.sidebar .sidebar-item-container:hover,
.sidebar .sidebar-item-label:hover,
.standard-sidebar .standard-sidebar-item:hover {
    background-color: #2563eb !important;
    background: #2563eb !important;
}

/* Override any existing hover background */
.sidebar [style*="background"] {
    background-color: #2563eb !important;
    background: #2563eb !important;
}

/* Hide ERPNext Settings from sidebar since we have Fatoorix Settings */
.sidebar .sidebar-item-container[data-name="ERPNext Settings"],
.sidebar .standard-sidebar-item[data-name="ERPNext Settings"],
.sidebar a[href*="ERPNext Settings"] {
    display: none !important;
}

/* Sidebar - simple white text */
.sidebar *,
.desk-sidebar *,
.layout-side-section *,
.standard-sidebar * {
    color: white !important;
    fill: white !important;
}

/* Cards and Panels */
.card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.card-header {
    background-color: var(--fatoorix-light) !important;
    border-bottom: 1px solid #e5e7eb;
}

/* Form Controls - Better contrast */
.form-control {
    background-color: white !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
}

.form-control::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

.form-control:focus {
    border-color: var(--fatoorix-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25) !important;
    background-color: white !important;
    color: #1f2937 !important;
}

/* Fix blue background form fields */
.btn-primary input,
.btn-primary .form-control,
.bg-primary input,
.bg-primary .form-control {
    background-color: white !important;
    color: #1f2937 !important;
    border: 1px solid #d1d5db !important;
}

.btn-primary input::placeholder,
.btn-primary .form-control::placeholder,
.bg-primary input::placeholder,
.bg-primary .form-control::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

/* Links */
a {
    color: var(--fatoorix-primary) !important;
}

a:hover {
    color: var(--fatoorix-secondary) !important;
}

/* Login Page Branding */
.login-content {
    background: linear-gradient(135deg, var(--fatoorix-primary) 0%, var(--fatoorix-secondary) 100%) !important;
}

.login-content .card {
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Login Page Logo */
.login-content .navbar-brand img,
.page-card .navbar-brand img,
.login-page .navbar-brand img,
.page-card-head img {
    border-radius: 12px !important;
    padding: 8px !important;
    background: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Replace login page text with logo */
.page-card-head .indicator-pill,
.login-content h1,
.page-card h1 {
    background-image: url('/files/Fatoorix_Logo.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    height: 60px !important;
    width: 200px !important;
    margin: 0 auto 20px auto !important;
    text-indent: -9999px !important;
    color: transparent !important;
    background-color: white !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

/* Footer Customization */
.footer {
    background-color: var(--fatoorix-dark) !important;
    color: #d1d5db !important;
}

.footer a {
    color: var(--fatoorix-accent) !important;
}

/* Custom Fatoorix Branding Elements */
.fatoorix-brand-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    color: var(--fatoorix-primary);
}

/* Dashboard Widgets */
.widget {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.widget-head {
    background-color: var(--fatoorix-light);
    border-bottom: 1px solid #e5e7eb;
}

/* Status Indicators */
.indicator.blue {
    background-color: var(--fatoorix-primary) !important;
}

.indicator.green {
    background-color: var(--fatoorix-success) !important;
}

.indicator.orange {
    background-color: var(--fatoorix-warning) !important;
}

.indicator.red {
    background-color: var(--fatoorix-danger) !important;
}

/* Custom Page Title */
.page-title .title-text::before {
    content: "Fatoorix ERP - ";
    color: var(--fatoorix-primary);
    font-weight: 600;
}

/* Hide ERPNext Branding */
.navbar-brand .navbar-brand-text {
    display: none !important;
}

/* Custom Loading Spinner */
.loading-indicator {
    border-top-color: var(--fatoorix-primary) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .navbar-brand img {
        max-height: 28px !important;
    }
    
    .sidebar .sidebar-brand img {
        max-height: 24px !important;
    }
}

/* Print Styles */
@media print {
    .navbar-brand img {
        content: url('/files/Fatoorix_Logo.png') !important;
    }
}

/* Login Page Text Fix */
body.login-page *,
.page-card *,
.page-card-body * {
    color: white !important;
}

body.login-page input,
.page-card input,
body.login-page .btn,
.page-card .btn {
    color: #333 !important;
}

/* Main Content Area Styling */
.layout-main-section,
.page-container,
.container-page {
    background-color: #f8fafc !important;
}

/* Dashboard Cards - Better contrast */
.onboarding-step,
.dashboard-graph,
.widget-group,
.shortcut-widget-box {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    color: #1f2937 !important;
}

/* Fix any blue background elements with poor contrast */
.bg-primary,
.btn-primary {
    color: white !important;
}

.bg-primary input,
.bg-primary select,
.bg-primary textarea,
.btn-primary input,
.btn-primary select,
.btn-primary textarea {
    background-color: white !important;
    color: #1f2937 !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

.bg-primary input::placeholder,
.bg-primary select::placeholder,
.bg-primary textarea::placeholder,
.btn-primary input::placeholder,
.btn-primary select::placeholder,
.btn-primary textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

/* Page Headers */
.page-head,
.page-title {
    background: white !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 1rem 1.5rem !important;
}

/* Buttons in main area */
.btn-primary {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    border-radius: 6px !important;
}

.btn-primary:hover {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

/* Links in main content */
.layout-main-section a {
    color: #2563eb !important;
}

.layout-main-section a:hover {
    color: #1d4ed8 !important;
}

/* Hide unwanted help menu items */
.navbar .dropdown-menu a[href*="discuss.erpnext.com"],
.navbar .dropdown-menu a[href*="frappe.school"],
.navbar .dropdown-menu a[href*="github.com"],
.navbar .dropdown-menu a[href*="forum"],
.navbar .dropdown-menu .dropdown-item[data-label="User Forum"],
.navbar .dropdown-menu .dropdown-item[data-label="Frappe School"],
.navbar .dropdown-menu .dropdown-item[data-label="Report an Issue"],
.navbar .dropdown-menu .dropdown-item[data-label="Frappe Support"] {
    display: none !important;
}

/* Hide by text content using attribute selectors */
.dropdown-item[onclick*="frappe.help.show_results"],
.dropdown-item[onclick*="window.open"] {
    display: none !important;
}

/* Hide specific menu items by position */
.navbar .dropdown-menu .dropdown-item:nth-child(2),
.navbar .dropdown-menu .dropdown-item:nth-child(3) {
    display: none !important;
}

/* Hide specific help menu items only */
.navbar .dropdown-menu .dropdown-item[onclick*="discuss.erpnext.com"],
.navbar .dropdown-menu .dropdown-item[onclick*="frappe.school"],
.navbar .dropdown-menu .dropdown-item[onclick*="github.com/frappe/erpnext/issues"] {
    display: none !important;
}

/* Removed :contains() selectors that don't work in modern browsers */

/* Removed all problematic CSS that was causing blue boxes and content hiding */

/* Removed problematic :contains() selectors */
/* Fix for grid header text color */
.grid-heading-row .static-area.ellipsis {
    color: white !important;
}
.grid-heading-row {
    --gray-600: white;
    --text-muted: white;
    --text-color: white;
}

/* Make breadcrumbs white */
#navbar-breadcrumbs,
#navbar-breadcrumbs a,
#navbar-breadcrumbs .nav-link,
.navbar-nav .nav-link {
    color: white !important;
}
#navbar-breadcrumbs a:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

    padding-left: 0 !important;
}

/* Minimize left white space while keeping clean design */
.layout-side-section {
    padding-left: 5px !important;
}
.layout-main {
    padding-left: 5px !important;
}

/* Reduce container padding to minimize white space */
.container.page-body {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.page-wrapper {
    padding-left: 5px !important;
}

/* Minimize all left padding/margins to maximum extent */
.container.page-body {
    padding-left: 2px !important;
    padding-right: 2px !important;
}
.page-wrapper {
    padding-left: 0px !important;
    margin-left: 0px !important;
}
.layout-main {
    padding-left: 0px !important;
    margin-left: 0px !important;
}
.main-section {
    padding-left: 0px !important;
    margin-left: 0px !important;
}

/* Target the actual elements controlling sidebar spacing */
body[data-sidebar="1"] .main-section {
    margin-left: 0px !important;
    padding-left: 0px !important;
}
body[data-sidebar="1"] #body {
    margin-left: 0px !important;
    padding-left: 0px !important;
}
.layout-main-section-wrapper {
    margin-left: 0px !important;
    padding-left: 0px !important;
}

/* Remove Bootstrap container padding that creates white space */
.container {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.container.page-body {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* Make keyboard shortcuts dialog text white */
.modal-body table td {
    color: white !important;
}
.modal-body kbd {
    color: white !important;
    background-color: #2563eb !important;
}

/* Fix keyboard shortcuts dialog colors */
.modal-body table td {
    color: #374151 !important; /* Dark text for descriptions */
}
.modal-body table td:first-child {
    color: white !important; /* White for kbd column */
}
.modal-body kbd {
    color: white !important;
    background-color: #2563eb !important;
}
/* Replace SAR and ر.س with new Saudi Riyal symbol */
@font-face {
    font-family: 'RiyalSymbol';
    src: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xOCAySDZjLTEuMSAwLTIgLjktMiAydjE2YzAgMS4xLjkgMiAyIDJoMTJjMS4xIDAgMi0uOSAyLTJWNGMwLTEuMS0uOS0yLTItMnptLTYgMTZoLTJ2LTJoMnYyem0wLTRoLTJ2LTZoMnY2eiIvPjwvc3ZnPg==') format('svg');
}

/* Replace text content with Riyal symbol */
.currency-symbol::before {
    content: "﷼";
    font-size: 1.2em;
}

/* Hide original SAR/ر.س text and show symbol */
*:contains("SAR")::after,
*:contains("ر.س")::after {
    content: " ﷼";
    font-weight: bold;
}

/* Specific replacements for common currency displays */
.currency:contains("SAR"),
.amount:contains("SAR"),
td:contains("SAR"),
span:contains("SAR") {
    position: relative;
}

.currency:contains("SAR")::after,
.amount:contains("SAR")::after,
td:contains("SAR")::after,
span:contains("SAR")::after {
    content: " ﷼";
    font-weight: bold;
    margin-left: 2px;
}
/* Only change text to white when BOTH conditions are met: blue background AND gray text */
*[style*="background-color: rgb(37, 99, 235)"][style*="color: rgb(82, 82, 82)"] {
    color: white !important;
}

*[style*="background-color:rgb(37,99,235)"][style*="color:rgb(82,82,82)"] {
    color: white !important;
}

/* Target the specific class from screenshot */
.level.list-row-head.text-muted {
    color: white !important;
}

header.level.list-row-head.text-muted {
    color: white !important;
}

/* Target filter buttons with blue background */
.btn.btn-default.btn-sm.filter-button {
    color: white !important;
}

button.btn.btn-default.btn-sm.filter-button {
    color: white !important;
}

/* Target ellipsis buttons with blue background */
.btn.btn-default.btn-sm.ellipsis {
    color: white !important;
}

button.btn.btn-default.btn-sm.ellipsis {
    color: white !important;
}

/* Target sort selector buttons with blue background */
.btn.btn-default.btn-sm.sort-selector-button {
    color: white !important;
}

button.btn.btn-default.btn-sm.sort-selector-button {
    color: white !important;
}

/* Target dropdown text inside sort selector */
.btn.btn-default.btn-sm.sort-selector-button .dropdown-text {
    color: white !important;
}

/* Target new doc buttons with blue background */
.btn.btn-default.btn-sm.btn-new-doc {
    color: white !important;
}

button.btn.btn-default.btn-sm.btn-new-doc {
    color: white !important;
}

.btn.btn-default.btn-sm.btn-new-doc.hidden-xs {
    color: white !important;
}

/* Target secondary buttons with blue background */
.btn.btn-sm.btn-secondary.small {
    color: white !important;
}

div.btn.btn-sm.btn-secondary.small {
    color: white !important;
}

/* Target workspace buttons with blue background */
.btn.btn-default.ellipsis.btn-new-workspace {
    color: white !important;
}

.btn.btn-default.btn-sm.mr-2.btn-edit-workspace {
    color: white !important;
}

button.btn.btn-default.ellipsis.btn-new-workspace {
    color: white !important;
}

button.btn.btn-default.btn-sm.mr-2.btn-edit-workspace {
    color: white !important;
}

/* Target generic btn-default btn-sm buttons with blue background */
.onboarding-step-footer .btn.btn-default.btn-sm {
    color: white !important;
}

button.btn.btn-default.btn-sm {
    color: white !important;
}

/* Target es-icon icons with blue background */
.es-icon.icon-sm {
    fill: white !important;
    stroke: white !important;
}

svg.es-icon.icon-sm {
    fill: white !important;
    stroke: white !important;
}

/* Target icons inside blue background elements */
*[style*="background-color: rgb(37, 99, 235)"] .es-icon {
    fill: white !important;
    stroke: white !important;
}

/* Target indicator-pill with blue background */
.indicator-pill.no-indicator-dot.ellipsis.gray {
    color: white !important;
}

div.indicator-pill.no-indicator-dot.ellipsis.gray {
    color: white !important;
}

/* Target any indicator-pill on blue background */
.indicator-pill {
    color: white !important;
}

/* Override green indicator pills to use Fatoorix blue */
.indicator-pill.green {
    background: rgb(37, 99, 235) !important;
    color: white !important;
}

/* Override CSS variable for green background */
:root {
    --bg-green: rgb(37, 99, 235) !important;
}

/* Target specific green indicator elements */
span.indicator-pill.green {
    background: rgb(37, 99, 235) !important;
    color: white !important;
}

/* Override CSS variable for blue background */
:root {
    --bg-blue: rgb(37, 99, 235) !important;
}

/* Also override any blue indicator pills */
.indicator-pill.blue {
    background: rgb(37, 99, 235) !important;
    color: white !important;
}

/* Override light gray background to darker gray */
*[style*="background-color: rgb(248, 248, 248)"] {
    background-color: rgb(89, 87, 87) !important;
}

*[style*="background-color:rgb(248,248,248)"] {
    background-color: rgb(89, 87, 87) !important;
}

/* Override CSS variable if it exists */
:root {
    --bg-light-gray: rgb(89, 87, 87) !important;
}

/* More aggressive override for light gray backgrounds */
body *[style*="248, 248, 248"] {
    background-color: rgb(89, 87, 87) !important;
}

/* Target common classes that might use light gray */
.bg-light,
.bg-light-gray,
.list-row:nth-child(even),
.frappe-list .list-row:nth-child(even) {
    background-color: rgb(89, 87, 87) !important;
}

/* Override any CSS variables for light colors */
:root {
    --gray-100: rgb(89, 87, 87) !important;
    --gray-50: rgb(89, 87, 87) !important;
    --light-bg: rgb(89, 87, 87) !important;
}