/* 
 * Super CRM - Custom Brand Styles
 * Additional customizations for Softify Techs brand
 */

/* ============================================
   ICONS STYLING - Brand Guidelines
   ============================================
   Icons should be:
   - Line icons (Font Awesome Regular)
   - Color: #0E4857 for normal icons
   - Color: #E76B2B for active/hover icons
   - Size: 24px for buttons, 16px for text
   ============================================ */

/* Base icon styles */
.fa,
.fas,
.far,
.fab,
[class^="fa-"],
[class*=" fa-"] {
  color: #0E4857;
  transition: color 0.2s ease;
}

/* Icon sizes according to brand guidelines */
.fa-lg,
.fa-lg:before {
  font-size: 24px !important;
}

.fa-sm,
.fa-sm:before {
  font-size: 16px !important;
}

/* Menu icons in sidebar */
.sidebar .menu-icon,
.sidebar ul.nav li a .menu-icon,
.sidebar ul.nav li a i {
  color: #0E4857 !important;
  font-size: 18px !important;
  transition: color 0.2s ease;
}

.sidebar ul.nav li.active > a .menu-icon,
.sidebar ul.nav li.active > a i {
  color: #FFFFFF !important;
}

.sidebar ul.nav > li > a:hover .menu-icon,
.sidebar ul.nav > li > a:hover i {
  color: #E76B2B !important;
}

/* Header icons */
#header .fa,
#header [class^="fa-"],
#header [class*=" fa-"] {
  color: #FFFFFF !important;
  transition: color 0.2s ease;
}

#header .fa:hover,
#header [class^="fa-"]:hover,
#header [class*=" fa-"]:hover {
  color: #E76B2B !important;
}

/* Button icons */
.btn .fa,
.btn [class^="fa-"],
.btn [class*=" fa-"] {
  color: inherit;
}

.btn-primary .fa,
.btn-primary [class^="fa-"],
.btn-primary [class*=" fa-"] {
  color: #FFFFFF !important;
}

.btn-secondary .fa,
.btn-secondary [class^="fa-"],
.btn-secondary [class*=" fa-"] {
  color: #0E4857 !important;
}

.btn-secondary:hover .fa,
.btn-secondary:hover [class^="fa-"],
.btn-secondary:hover [class*=" fa-"] {
  color: #FFFFFF !important;
}

/* Table action icons */
table .fa,
table [class^="fa-"],
table [class*=" fa-"] {
  color: #0E4857;
  font-size: 16px;
  transition: color 0.2s ease;
}

table .fa:hover,
table [class^="fa-"]:hover,
table [class*=" fa-"]:hover {
  color: #E76B2B;
}

/* Link icons */
a .fa,
a [class^="fa-"],
a [class*=" fa-"] {
  color: #E76B2B;
  transition: color 0.2s ease;
}

a:hover .fa,
a:hover [class^="fa-"],
a:hover [class*=" fa-"] {
  color: #D45A1F;
}

/* Form input icons */
.input-group-addon .fa,
.input-group-addon [class^="fa-"],
.input-group-addon [class*=" fa-"] {
  color: #0E4857;
}

/* Alert icons */
.alert-success .fa,
.alert-success [class^="fa-"],
.alert-success [class*=" fa-"] {
  color: #00A676;
}

.alert-warning .fa,
.alert-warning [class^="fa-"],
.alert-warning [class*=" fa-"] {
  color: #FFD23F;
}

.alert-danger .fa,
.alert-danger [class^="fa-"],
.alert-danger [class*=" fa-"] {
  color: #FF4757;
}

.alert-info .fa,
.alert-info [class^="fa-"],
.alert-info [class*=" fa-"] {
  color: #0E4857;
}

/* Badge icons */
.badge .fa,
.badge [class^="fa-"],
.badge [class*=" fa-"] {
  color: inherit;
  font-size: 12px;
}

/* Dropdown menu icons */
.dropdown-menu .fa,
.dropdown-menu [class^="fa-"],
.dropdown-menu [class*=" fa-"] {
  color: #0E4857;
  font-size: 16px;
  margin-right: 8px;
}

.dropdown-menu > li > a:hover .fa,
.dropdown-menu > li > a:hover [class^="fa-"],
.dropdown-menu > li > a:hover [class*=" fa-"] {
  color: #E76B2B;
}

/* Navigation icons */
.navbar-nav .fa,
.navbar-nav [class^="fa-"],
.navbar-nav [class*=" fa-"] {
  color: #FFFFFF;
  transition: color 0.2s ease;
}

.navbar-nav > li > a:hover .fa,
.navbar-nav > li > a:hover [class^="fa-"],
.navbar-nav > li > a:hover [class*=" fa-"] {
  color: #E76B2B;
}

/* Card/Panel icons */
.panel .fa,
.card .fa,
.panel [class^="fa-"],
.card [class^="fa-"],
.panel [class*=" fa-"],
.card [class*=" fa-"] {
  color: #0E4857;
}

.panel-heading .fa,
.card-header .fa,
.panel-heading [class^="fa-"],
.card-header [class^="fa-"],
.panel-heading [class*=" fa-"],
.card-header [class*=" fa-"] {
  color: #0E4857;
  margin-right: 8px;
}

/* Search icon */
#top_search .fa-search,
#top_search [class*="fa-search"] {
  color: rgba(255, 255, 255, 0.8) !important;
}

#top_search:focus-within .fa-search,
#top_search:focus-within [class*="fa-search"] {
  color: #FFFFFF !important;
}

#top_search:hover .fa-search,
#top_search:hover [class*="fa-search"] {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Notification icons */
.notifications-wrapper .fa-bell,
.notifications-wrapper [class*="fa-bell"] {
  color: #FFFFFF !important;
  opacity: 0.95;
}

.notifications-wrapper:hover .fa-bell,
.notifications-wrapper:hover [class*="fa-bell"] {
  color: #FFFFFF !important;
  opacity: 1;
}

/* Timer icons */
.header-timers .fa-clock,
.header-timers [class*="fa-clock"] {
  color: #FFFFFF !important;
  opacity: 0.95;
}

.header-timers:hover .fa-clock,
.header-timers:hover [class*="fa-clock"] {
  color: #FFFFFF !important;
  opacity: 1;
}

/* Todo icons */
.header-todo .fa-square-check,
.header-todo [class*="fa-square-check"] {
  color: #FFFFFF !important;
  opacity: 0.95;
}

.header-todo:hover .fa-square-check,
.header-todo:hover [class*="fa-square-check"] {
  color: #FFFFFF !important;
  opacity: 1;
}

/* Quick action plus icon */
.icon .fa-plus,
.icon [class*="fa-plus"] {
  color: #0E4857 !important;
  font-weight: 600;
}

/* Quick action button background */
#header .icon .tw-bg-primary-600 {
  background-color: #FFFFFF !important;
}

#header .icon .tw-bg-primary-600:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Settings/Cog icon */
.fa-cog,
[class*="fa-cog"] {
  color: #0E4857;
}

.sidebar .fa-cog,
.sidebar [class*="fa-cog"] {
  color: #0E4857;
}

.sidebar li.active .fa-cog,
.sidebar li.active [class*="fa-cog"] {
  color: #FFFFFF !important;
}

/* Arrow icons */
.fa-arrow,
.fa-chevron-down,
.fa-chevron-up,
.fa-chevron-left,
.fa-chevron-right,
[class*="fa-arrow"],
[class*="fa-chevron"] {
  color: #0E4857;
}

.sidebar .fa-arrow,
.sidebar [class*="fa-arrow"],
.sidebar [class*="fa-chevron"] {
  color: #0E4857;
}

/* Active state for all icons */
.active .fa,
.active [class^="fa-"],
.active [class*=" fa-"] {
  color: #E76B2B;
}

/* Disabled icons */
.disabled .fa,
[disabled] .fa,
.disabled [class^="fa-"],
[disabled] [class^="fa-"],
.disabled [class*=" fa-"],
[disabled] [class*=" fa-"] {
  color: #CCCCCC !important;
  opacity: 0.5;
}

/* Icon in text */
.text-muted .fa,
.text-muted [class^="fa-"],
.text-muted [class*=" fa-"] {
  color: #999999;
}

/* Success/Warning/Danger/Info icon colors */
.text-success .fa,
.text-success [class^="fa-"],
.text-success [class*=" fa-"] {
  color: #00A676;
}

.text-warning .fa,
.text-warning [class^="fa-"],
.text-warning [class*=" fa-"] {
  color: #FFD23F;
}

.text-danger .fa,
.text-danger [class^="fa-"],
.text-danger [class*=" fa-"] {
  color: #FF4757;
}

.text-info .fa,
.text-info [class^="fa-"],
.text-info [class*=" fa-"] {
  color: #0E4857;
}

.text-primary .fa,
.text-primary [class^="fa-"],
.text-primary [class*=" fa-"] {
  color: #0E4857;
}

/* Mobile menu icons */
.mobile-menu .fa,
.mobile-menu [class^="fa-"],
.mobile-menu [class*=" fa-"] {
  color: #FFFFFF;
}

/* Ensure icons maintain proper spacing */
.fa,
[class^="fa-"],
[class*=" fa-"] {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure logo displays correctly */
#logo img {
  max-height: 36px;
  height: auto;
  width: auto;
}

/* Header text color adjustments */
#header .logo-text {
  color: #0E4857 !important;
  font-weight: 600 !important;
}

#header nav a {
  color: #0E4857 !important;
  font-weight: 500 !important;
}

#header nav a:hover {
  color: #E76B2B !important;
  opacity: 1;
}

#header .navbar-nav > li > a {
  color: #FFFFFF !important;
  font-weight: 500 !important;
  opacity: 0.95;
}

#header .navbar-nav > li > a:hover {
  color: #FFFFFF !important;
  opacity: 1;
}

/* Hamburger menu button */
#header .hide-menu {
  color: #0E4857 !important;
}

#header .hide-menu:hover {
  background-color: rgba(231, 107, 43, 0.1) !important;
  color: #E76B2B !important;
}

#header .hide-menu svg {
  color: #0E4857 !important;
  stroke: #0E4857 !important;
  stroke-width: 2;
}

#header .hide-menu:hover svg {
  color: #E76B2B !important;
  stroke: #E76B2B !important;
}

/* Header text and icons - Dark colors for white background */
#header {
  color: #1F1F1F !important;
  background-color: #FFFFFF !important;
}

/* Force all header content to use dark colors except dropdowns */
#header *:not(.dropdown-menu):not(.dropdown-menu *):not(.search-results):not(.search-results *):not(.bg-success):not(.bg-warning):not(.bg-info):not(.bg-danger) {
  color: #0E4857 !important;
}

/* Ensure search input icon is visible */
#top_search_button i.fa-search {
  color: #0E4857 !important;
}

#top_search_button:hover i.fa-search,
#top_search:focus-within #top_search_button i.fa-search {
  color: #E76B2B !important;
}

/* Override any neutral/gray colors in header - use dark colors */
#header .tw-text-neutral-500,
#header .tw-text-neutral-600,
#header .tw-text-neutral-700,
#header .tw-text-neutral-800,
#header .tw-text-gray-500,
#header .tw-text-gray-600,
#header .tw-text-gray-700,
#header .tw-text-gray-800 {
  color: #0E4857 !important;
}

#header .navbar-nav > li > a,
#header nav a,
#header .logo-text,
#header span,
#header p,
#header div {
  color: #0E4857 !important;
  font-weight: 500 !important;
}

/* Header icons - use dark colors for white background */
#header .fa,
#header [class^="fa-"],
#header [class*=" fa-"],
#header svg,
#header i {
  color: #0E4857 !important;
  fill: #0E4857 !important;
  stroke: #0E4857 !important;
}

#header .fa:hover,
#header [class^="fa-"]:hover,
#header [class*=" fa-"]:hover,
#header svg:hover,
#header i:hover {
  color: #E76B2B !important;
  opacity: 1 !important;
}

/* Force dark colors for all text elements */
#header button:not(.dropdown-toggle):not([data-toggle="dropdown"]),
#header a:not(.dropdown-toggle):not([data-toggle="dropdown"]),
#header span:not(.bg-success):not(.bg-warning):not(.bg-info):not(.bg-danger),
#header div,
#header label {
  color: #0E4857 !important;
}

#header button:hover:not(.dropdown-toggle),
#header a:hover:not(.dropdown-toggle) {
  color: #E76B2B !important;
}

/* Ensure all links in header are visible */
#header .navbar-nav > li > a,
#header nav > div > ul > li > a {
  color: #0E4857 !important;
  font-weight: 500 !important;
}

#header .navbar-nav > li > a:hover,
#header nav > div > ul > li > a:hover {
  color: #E76B2B !important;
}

/* Search input text - dark colors for white background */
#top_search {
  position: relative;
}

#top_search input {
  color: #1F1F1F !important;
  background-color: #F5F6F7 !important;
  border: 1px solid #0E4857 !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

#top_search input::placeholder {
  color: #999999 !important;
  font-weight: 400 !important;
  font-style: italic;
}

#top_search input:focus {
  border-color: #E76B2B !important;
  box-shadow: 0 0 0 2px rgba(231, 107, 43, 0.1) !important;
  background-color: #FFFFFF !important;
}

#top_search input:hover {
  border-color: #0E4857 !important;
  background-color: #FFFFFF !important;
}

/* Override ALL neutral colors in header - use dark colors */
#header .tw-text-neutral-100,
#header .tw-text-neutral-200,
#header .tw-text-neutral-300,
#header .tw-text-neutral-400,
#header .tw-text-neutral-500,
#header .tw-text-neutral-600,
#header .tw-text-neutral-700,
#header .tw-text-neutral-800,
#header .tw-text-neutral-900,
#header .tw-text-gray-100,
#header .tw-text-gray-200,
#header .tw-text-gray-300,
#header .tw-text-gray-400,
#header .tw-text-gray-500,
#header .tw-text-gray-600,
#header .tw-text-gray-700,
#header .tw-text-gray-800,
#header .tw-text-gray-900 {
  color: #0E4857 !important;
}

/* Force dark colors for all SVG in header */
#header svg,
#header svg path,
#header svg circle,
#header svg rect {
  stroke: #0E4857 !important;
  fill: #0E4857 !important;
  color: #0E4857 !important;
}

#header svg:hover,
#header svg path:hover {
  stroke: #E76B2B !important;
  fill: #E76B2B !important;
}

/* Ensure button text is dark */
#header button {
  color: #0E4857 !important;
}

#header button:hover {
  color: #E76B2B !important;
  background-color: rgba(231, 107, 43, 0.1) !important;
}

/* All icons in header must be dark */
#header i,
#header .fa,
#header [class*="fa-"] {
  color: #0E4857 !important;
}

#header i:hover,
#header .fa:hover,
#header [class*="fa-"]:hover {
  color: #E76B2B !important;
}

/* Logo text must be dark and bold */
#header .logo-text {
  color: #0E4857 !important;
  font-weight: 600 !important;
}

/* Settings link */
#header .navbar-nav > li > a[href*="settings"] {
  color: #0E4857 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

#header .navbar-nav > li > a[href*="settings"]:hover {
  color: #E76B2B !important;
}

/* All navigation links */
#header .navbar-nav > li > a {
  color: #0E4857 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

#header .navbar-nav > li > a:hover {
  color: #E76B2B !important;
  opacity: 1 !important;
}

/* CRITICAL: Override ALL possible color classes in header - use dark colors */
#header [class*="text-"],
#header [class*="tw-text-"] {
  color: #0E4857 !important;
}

/* Ensure icons are visible - use dark colors */
#header .icon a,
#header .icon i,
#header .icon .fa,
#header .icon [class*="fa-"] {
  color: #0E4857 !important;
}

#header .icon a:hover,
#header .icon i:hover,
#header .icon .fa:hover,
#header .icon [class*="fa-"]:hover {
  color: #E76B2B !important;
}

/* Header notifications, timers, todos - use dark colors */
.header-notifications,
.header-timers,
.header-todo,
.header-newsfeed {
  color: #0E4857 !important;
}

.header-notifications i,
.header-timers i,
.header-todo i,
.header-newsfeed i,
.header-notifications svg,
.header-timers svg,
.header-todo svg,
.header-newsfeed svg {
  color: #0E4857 !important;
  stroke: #0E4857 !important;
  fill: #0E4857 !important;
}

.header-notifications:hover i,
.header-timers:hover i,
.header-todo:hover i,
.header-newsfeed:hover i,
.header-notifications:hover svg,
.header-timers:hover svg,
.header-todo:hover svg,
.header-newsfeed:hover svg {
  color: #E76B2B !important;
  stroke: #E76B2B !important;
  fill: #E76B2B !important;
}

/* Notifications icon specific */
.notifications-icon i,
.notifications-icon .fa-bell {
  color: #0E4857 !important;
}

.notifications-icon:hover i,
.notifications-icon:hover .fa-bell {
  color: #E76B2B !important;
}

/* Timer icon specific */
.top-timers i,
.top-timers .fa-clock {
  color: #0E4857 !important;
}

.top-timers:hover i,
.top-timers:hover .fa-clock {
  color: #E76B2B !important;
}

/* Todo icon specific */
.header-todo i,
.header-todo .fa-square-check {
  color: #0E4857 !important;
}

.header-todo:hover i,
.header-todo:hover .fa-square-check {
  color: #E76B2B !important;
}

/* Newsfeed/Share icon specific */
.header-newsfeed svg,
.header-newsfeed i {
  color: #0E4857 !important;
  stroke: #0E4857 !important;
}

.header-newsfeed:hover svg,
.header-newsfeed:hover i,
.header-newsfeed a:hover svg,
.header-newsfeed a:hover i {
  color: #E76B2B !important;
  stroke: #E76B2B !important;
}

/* Ensure all icons in header navbar-right are visible */
#header .navbar-nav.navbar-right li a,
#header .navbar-nav.navbar-right li i,
#header .navbar-nav.navbar-right li svg {
  color: #0E4857 !important;
}

#header .navbar-nav.navbar-right li a:hover,
#header .navbar-nav.navbar-right li:hover i,
#header .navbar-nav.navbar-right li:hover svg {
  color: #E76B2B !important;
}

/* User profile menu if exists */
#header .dropdown-toggle.profile,
#header .user-profile,
#header .staff-profile-image-small {
  border-color: #0E4857 !important;
}

#header .dropdown-toggle.profile:hover,
#header .user-profile:hover {
  border-color: #E76B2B !important;
  color: #E76B2B !important;
}

/* Comprehensive header styling - ensure ALL elements are visible */
#header nav,
#header nav > div,
#header nav > div > div,
#header nav > div > ul {
  color: #0E4857 !important;
}

/* All text in header */
#header p,
#header span:not(.bg-success):not(.bg-warning):not(.bg-info):not(.bg-danger):not(.bg-primary),
#header div:not(.dropdown-menu):not(.search-results),
#header label {
  color: #0E4857 !important;
}

/* Ensure all SVG elements are visible */
#header svg path,
#header svg circle,
#header svg rect,
#header svg line,
#header svg polyline,
#header svg polygon {
  stroke: #0E4857 !important;
  fill: none !important;
}

#header svg:hover path,
#header svg:hover circle,
#header svg:hover rect,
#header a:hover svg path,
#header a:hover svg circle,
#header a:hover svg rect {
  stroke: #E76B2B !important;
}

/* Quick actions dropdown items */
#header .dropdown-menu.dropdown-menu-right li a {
  color: #1F1F1F !important;
}

#header .dropdown-menu.dropdown-menu-right li a:hover {
  color: #0E4857 !important;
  background-color: #F5F6F7 !important;
}

#header .dropdown-menu.dropdown-menu-right li a i {
  color: #0E4857 !important;
}

#header .dropdown-menu.dropdown-menu-right li a:hover i {
  color: #E76B2B !important;
}

/* Mobile menu icons */
.mobile-icon-menu li a,
.mobile-icon-menu li i {
  color: #0E4857 !important;
}

.mobile-icon-menu li a:hover,
.mobile-icon-menu li:hover i {
  color: #E76B2B !important;
}

/* Ensure badge numbers are visible but keep their background colors */
#header .bg-success,
#header .bg-warning,
#header .bg-info,
#header .bg-danger {
  color: #FFFFFF !important;
}

/* Dropdown headers */
#header .dropdown-header {
  color: #1F1F1F !important;
  font-weight: 600 !important;
}

/* Tooltips styling - ensure white text on dark background - STRONG OVERRIDE */
.tooltip,
body .tooltip,
body .tooltip.in,
body .tooltip.fade.in,
body .tooltip.show {
  position: fixed !important;
  z-index: 1070 !important;
}

.tooltip > .tooltip-inner,
body .tooltip > .tooltip-inner,
body .tooltip.in > .tooltip-inner,
body .tooltip.fade.in > .tooltip-inner,
body .tooltip.show > .tooltip-inner,
.tooltip-inner {
  background-color: #1f2d3d !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  border-radius: 4px !important;
  max-width: 250px !important;
  text-align: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  line-height: 1.4 !important;
}

/* Force white text in tooltip inner */
.tooltip > .tooltip-inner,
.tooltip-inner,
body .tooltip > .tooltip-inner,
body .tooltip-inner {
  color: #FFFFFF !important;
}

.tooltip > .tooltip-arrow,
body .tooltip > .tooltip-arrow,
.tooltip-arrow {
  border-color: #1f2d3d transparent transparent transparent !important;
}

.tooltip.top > .tooltip-arrow,
body .tooltip.top > .tooltip-arrow {
  border-top-color: #1f2d3d !important;
  border-width: 5px 5px 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  margin-left: -5px !important;
}

.tooltip.bottom > .tooltip-arrow,
body .tooltip.bottom > .tooltip-arrow {
  border-bottom-color: #1f2d3d !important;
  border-width: 0 5px 5px !important;
  top: 0 !important;
  left: 50% !important;
  margin-left: -5px !important;
}

.tooltip.left > .tooltip-arrow,
body .tooltip.left > .tooltip-arrow {
  border-left-color: #1f2d3d !important;
  border-width: 5px 0 5px 5px !important;
  right: 0 !important;
  top: 50% !important;
  margin-top: -5px !important;
}

.tooltip.right > .tooltip-arrow,
body .tooltip.right > .tooltip-arrow {
  border-right-color: #1f2d3d !important;
  border-width: 5px 5px 5px 0 !important;
  left: 0 !important;
  top: 50% !important;
  margin-top: -5px !important;
}

/* Ensure all tooltip text is white - STRONG */
.tooltip .tooltip-inner *,
.tooltip-inner *,
body .tooltip .tooltip-inner *,
body .tooltip-inner * {
  color: #FFFFFF !important;
}

/* Tooltips in header area */
#header + .tooltip .tooltip-inner,
#header .tooltip .tooltip-inner,
body #header + .tooltip .tooltip-inner,
body #header .tooltip .tooltip-inner {
  background-color: #1f2d3d !important;
  color: #FFFFFF !important;
}

/* Override any inline styles or other CSS */
.tooltip[style] .tooltip-inner,
body .tooltip[style] .tooltip-inner {
  background-color: #1f2d3d !important;
  color: #FFFFFF !important;
}

/* CRITICAL: Force tooltip text color - highest priority */
.tooltip-inner,
div.tooltip-inner,
span.tooltip-inner,
.tooltip .tooltip-inner,
body .tooltip-inner,
body div.tooltip-inner,
body span.tooltip-inner,
body .tooltip .tooltip-inner {
  color: #FFFFFF !important;
  background-color: #1f2d3d !important;
  background: #1f2d3d !important;
}

/* Force all text inside tooltip to be white */
.tooltip-inner *,
.tooltip .tooltip-inner *,
body .tooltip-inner *,
body .tooltip .tooltip-inner * {
  color: #FFFFFF !important;
}

/* Quick actions button - ensure contrast */
#header .icon .tw-bg-primary-600,
#header .icon .tw-bg-white {
  background-color: #E76B2B !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

#header .icon .tw-bg-primary-600 .fa-plus,
#header .icon .tw-bg-white .fa-plus,
#header .icon .fa-plus {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

#header .icon .tw-bg-primary-600:hover,
#header .icon .tw-bg-white:hover {
  background-color: #D45A1F !important;
}

/* Quick actions link */
#header .icon a[data-toggle="dropdown"] {
  color: transparent !important;
}

#header .icon a[data-toggle="dropdown"] span {
  color: transparent !important;
}

/* Settings link in header */
#header .navbar-nav > li > a[href*="settings"] {
  color: #0E4857 !important;
  font-weight: 500 !important;
}

#header .navbar-nav > li > a[href*="settings"]:hover {
  color: #E76B2B !important;
}

/* Mobile menu toggle */
#header .mobile-menu-toggle {
  color: #0E4857 !important;
}

#header .mobile-menu-toggle:hover {
  color: #E76B2B !important;
  opacity: 1;
  background-color: rgba(231, 107, 43, 0.1) !important;
}

#header .mobile-menu-toggle .fa {
  color: #0E4857 !important;
}

#header .mobile-menu-toggle:hover .fa {
  color: #E76B2B !important;
}

/* Mobile navbar links */
.mobile-navbar .nav > li > a {
  color: #1F1F1F !important;
  font-weight: 500 !important;
}

.mobile-navbar .nav > li > a:hover {
  color: #0E4857 !important;
}

/* Force white for ALL header content - STRONG OVERRIDE */
#header,
#header *:not(.dropdown-menu):not(.dropdown-menu *):not(.search-results):not(.search-results *) {
  color: #FFFFFF !important;
}

/* Ensure all text elements are dark */
#header span,
#header div,
#header p,
#header label,
#header strong,
#header b,
#header em {
  color: #0E4857 !important;
}

/* Dropdown menus should have dark text */
#header .dropdown-menu,
#header .dropdown-menu * {
  color: #1F1F1F !important;
}

#header .dropdown-menu a:hover {
  color: #0E4857 !important;
}

/* Quick actions dropdown */
#header .dropdown-menu.dropdown-menu-right {
  background: #FFFFFF !important;
}

#header .dropdown-menu.dropdown-menu-right a {
  color: #1F1F1F !important;
}

#header .dropdown-menu.dropdown-menu-right a:hover {
  color: #0E4857 !important;
  background-color: #F5F6F7 !important;
}

/* Search input in header - already updated above */

/* Active menu items in sidebar */
.sidebar ul.nav li.active > a {
  background-color: #E76B2B !important;
  color: #FFFFFF !important;
}

.sidebar ul.nav li.active > a .menu-icon {
  color: #FFFFFF !important;
}

.sidebar ul.nav > li > a:hover {
  color: #E76B2B !important;
}

.sidebar ul.nav > li > a:hover .menu-icon {
  color: #E76B2B !important;
}

/* Cards and panels */
.panel-default,
.card {
  border-color: #E0E0E0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.panel-heading {
  background-color: transparent !important;
  border-bottom-color: #E0E0E0 !important;
}

/* Links */
a {
  color: #E76B2B !important;
}

a:hover {
  color: #D45A1F !important;
}

/* Primary buttons override */
.btn-primary {
  background-color: #E76B2B !important;
  border-color: #E76B2B !important;
  color: #FFFFFF !important;
}

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

.btn-primary:active,
.btn-primary.active {
  background-color: #C14F1A !important;
  border-color: #C14F1A !important;
}

/* Secondary buttons */
.btn-secondary {
  background-color: transparent !important;
  border-color: #0E4857 !important;
  color: #0E4857 !important;
}

.btn-secondary:hover {
  background-color: #0E4857 !important;
  color: #FFFFFF !important;
}

/* Form inputs focus */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: #E76B2B !important;
  box-shadow: 0 0 0 3px rgba(231, 107, 43, 0.1) !important;
}

/* Table headers */
table thead th,
.table thead th {
  background-color: #0E4857 !important;
  color: #FFFFFF !important;
}

/* Status badges */
.badge-success,
.bg-success {
  background-color: #00A676 !important;
  color: #FFFFFF !important;
}

.badge-warning,
.bg-warning {
  background-color: #FFD23F !important;
  color: #1F1F1F !important;
}

.badge-danger,
.bg-danger {
  background-color: #FF4757 !important;
  color: #FFFFFF !important;
}

.badge-info,
.bg-info {
  background-color: #0E4857 !important;
  color: #FFFFFF !important;
}

/* Alerts */
.alert-success {
  background-color: rgba(0, 166, 118, 0.1) !important;
  border-color: #00A676 !important;
  color: #00A676 !important;
}

.alert-warning {
  background-color: rgba(255, 210, 63, 0.1) !important;
  border-color: #FFD23F !important;
  color: #856404 !important;
}

.alert-danger {
  background-color: rgba(255, 71, 87, 0.1) !important;
  border-color: #FF4757 !important;
  color: #FF4757 !important;
}

.alert-info {
  background-color: rgba(14, 72, 87, 0.1) !important;
  border-color: #0E4857 !important;
  color: #0E4857 !important;
}

/* ============================================
   DASHBOARD WIDGETS REDESIGN (V3 - MODERN)
   ============================================
   - تصميم عصري مع الحفاظ على ألوان البراند
   - كروت واضحة، مساحات بيضاء، وتباعد مريح
   - لمسات تدرج خفيفة بدون مبالغة أو حركات مزعجة
   ============================================ */

:root {
  --crm-primary: #0E4857;
  --crm-accent: #E76B2B;
  --crm-surface: #ffffff;
  --crm-surface-soft: #f5f7fb;
  --crm-border-soft: #e5e7eb;
  --crm-radius-card: 14px;
  --crm-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.07);
}

/* Top Stats Cards - Modern */
.top_stats_wrapper {
  padding: 18px 20px 20px 20px !important;
  background: linear-gradient(135deg, var(--crm-surface) 0%, #f9fafb 100%) !important;
  border-radius: var(--crm-radius-card) !important;
  box-shadow: var(--crm-shadow-soft) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.top_stats_wrapper::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--crm-accent) 0%, #ff9f60 100%);
  opacity: 0.9;
}

/* ألوان مختلفة لكل نوع من كروت الإحصائيات */
.quick-stats-leads .top_stats_wrapper::before {
  background: linear-gradient(180deg, #00A676 0%, #4ade80 100%);
}

.quick-stats-projects .top_stats_wrapper::before {
  background: linear-gradient(180deg, #0E4857 0%, #38bdf8 100%);
}

.quick-stats-tasks .top_stats_wrapper::before {
  background: linear-gradient(180deg, #6366f1 0%, #a855f7 100%);
}

.top_stats_wrapper:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
  border-color: rgba(231, 107, 43, 0.45) !important;
}

.top_stats_wrapper .tw-text-neutral-800 {
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.top_stats_wrapper .tw-font-semibold {
  color: var(--crm-primary) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
}

.top_stats_wrapper svg {
  width: 26px !important;
  height: 26px !important;
  color: var(--crm-primary) !important;
  padding: 6px;
  background: rgba(14, 72, 87, 0.06);
  border-radius: 999px;
}

.top_stats_wrapper .progress {
  height: 7px !important;
  border-radius: 999px !important;
  background-color: #e5e7eb !important;
  margin-top: 14px !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.top_stats_wrapper .progress-bar {
  border-radius: 999px !important;
  transition: width 0.7s ease !important;
}

.top_stats_wrapper .progress-bar::after {
  content: none !important;
}

/* بطاقات الويدجت العامة */
.widget .panel_s {
  background: var(--crm-surface) !important;
  border-radius: var(--crm-radius-card) !important;
  box-shadow: var(--crm-shadow-soft) !important;
  border: 1px solid var(--crm-border-soft) !important;
  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.widget .panel_s:hover {
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12) !important;
  transform: translateY(-1px);
  border-color: rgba(148, 163, 184, 0.7) !important;
}

.widget .panel-body {
  padding: 18px 20px !important;
}

/* عناوين الويدجت */
.widget p.tw-font-semibold {
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  margin-bottom: 0 !important;
}

.widget p.tw-font-semibold svg {
  width: 20px !important;
  height: 20px !important;
  color: #6b7280 !important;
}

.widget hr {
  border: none !important;
  border-top: 1px solid #e5e7eb !important;
  margin: 12px 0 14px 0 !important;
}

/* Finance Overview */
.finance-summary .panel_s {
  background: linear-gradient(135deg, var(--crm-surface) 0%, var(--crm-surface-soft) 100%) !important;
}

.finance-summary .text-stats-wrapper a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px !important;
  border-radius: 8px;
  color: inherit !important;
}

.finance-summary .text-stats-wrapper a:hover {
  background-color: rgba(15, 23, 42, 0.03);
  text-decoration: none;
}

.finance-summary ._total {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--crm-primary) !important;
}

.finance-summary .progress {
  height: 5px !important;
  border-radius: 999px !important;
  background-color: #e5e7eb !important;
}

/* Todos Widget */
.todo-panel {
  background: var(--crm-surface) !important;
  border-radius: var(--crm-radius-card) !important;
  box-shadow: var(--crm-shadow-soft) !important;
  border: 1px solid var(--crm-border-soft) !important;
}

.todo-panel .todo-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

.todo-panel .media {
  padding: 10px 8px;
  border-radius: 8px;
  margin-bottom: 6px;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.todo-panel .media:hover {
  background-color: #f9fafb;
  transform: translateY(-1px);
}

.todo-panel .todo-description {
  color: #374151 !important;
  font-size: 13px;
}

.todo-panel .todo-date {
  color: #9ca3af !important;
  font-size: 11px;
}

/* Charts Area */
.widget canvas.chart {
  border-radius: 10px;
}

.widget .relative[style*="height"] {
  padding: 10px;
  background: #f9fafb;
  border-radius: 10px;
}

/* Widget Links */
.widget a {
  color: var(--crm-primary) !important;
  font-weight: 500;
  text-decoration: none;
}

.widget a:hover {
  color: var(--crm-accent) !important;
  text-decoration: underline;
}

/* Widget Dragger */
.widget-dragger {
  background: transparent;
  color: #cbd5e1 !important;
  width: auto;
  height: auto;
  box-shadow: none;
}

.widget-dragger:hover {
  transform: none;
  box-shadow: none;
  color: #94a3b8 !important;
}

.widget-dragger::before {
  color: inherit !important;
  font-size: 13px;
}

/* Containers Spacing */
[data-container] {
  margin-bottom: 20px;
}

[data-container="top-12"] {
  margin-bottom: 28px;
}

/* ============================================
   DASHBOARD LAYOUT SHELL (MODERN)
   - خلفية عامة ناعمة للداشبورد
   - توسيط المحتوى وتخفيف الحواف الحادة
   - جعل المسافات متساوية وأكثر عصرية
   ============================================ */

body.dashboard {
  background: radial-gradient(circle at top left, rgba(231, 107, 43, 0.06), transparent 55%),
              radial-gradient(circle at bottom right, rgba(14, 72, 87, 0.06), transparent 55%),
              #f3f4f6;
}

.dashboard #wrapper {
  background: transparent;
}

.dashboard .content {
  padding-top: 18px;
}

.dashboard .content > .row {
  max-width: 1440px;
  margin-inline: auto;
}

.dashboard .mtop20 {
  margin-top: 10px !important;
}

/* زر خيارات الداشبورد - شكل شريحة عصرية */
.screen-options-btn {
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.5);
  padding-inline: 14px;
}

.screen-options-btn svg {
  color: var(--crm-primary);
}

/* استجابة أفضل على الشاشات الصغيرة */
@media (max-width: 991px) {
  .dashboard .content > .row {
    padding-inline: 10px;
  }

  .top_stats_wrapper {
    margin-bottom: 12px;
  }
}

/* ============================================
   DASHBOARD HERO HEADER
   - ترويسة عصرية بألوان البراند
   ============================================ */

.dashboard-hero {
  max-width: 1440px;
  margin: 0 auto 18px auto;
  padding: 14px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(14, 72, 87, 0.98), #0E4857);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.4);
}

.dashboard-hero-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-hero-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.dashboard-hero-subtitle {
  font-size: 13px;
  margin: 0;
  opacity: 0.95;
}

.dashboard-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.dashboard-hero-chip {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  white-space: nowrap;
}

.dashboard-hero-chip-label {
  opacity: 0.8;
}

.dashboard-hero-chip-value {
  font-weight: 600;
}

@media (max-width: 767px) {
  .dashboard-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 12px;
  }

  .dashboard-hero-meta {
    width: 100%;
    justify-content: flex-start;
  }
}