/**
 * Call Ocean Modern UI Overrides
 * Loads all modern CSS modules
 *
 * IMPORTANT: This file overlays modern styles on top of Bootstrap 3
 * without breaking existing functionality.
 *
 * Version: 1.0.0
 * Phase: 1 (Visual Modernization)
 */

@import url('modern/variables.css');
@import url('modern/typography.css');
@import url('modern/buttons.css');
@import url('modern/forms.css');
@import url('modern/panels.css');
@import url('modern/tables.css');
@import url('modern/alerts.css');
@import url('modern/utilities.css');
@import url('modern/dashboard.css');
@import url('modern/public-pages.css');

/* Global Improvements */
body {
  background-color: var(--co-gray-50);
  font-size: 15px;
}

/* Page Container */
.page-container {
  background: var(--co-gray-50);
}

.content-wrapper {
  background: transparent;
}

/* Main Content Area - Better Padding */
.content {
  padding: var(--co-space-6);
}

/* Page Header - Keep Original Styling */
/* Removed overrides to preserve the original page header appearance */

/* Footer - Hidden for cleaner modern interface */
.footer {
  display: none !important;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Focus Visible for Accessibility */
*:focus-visible {
  outline: 2px solid var(--co-primary);
  outline-offset: 2px;
}

/* Loading Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

/* Microinteraction: Clickable rows */
.table-hover tbody tr {
  transition: background-color var(--co-transition-fast);
}

/* Better disabled state */
.disabled,
[disabled] {
  opacity: 0.6;
  cursor: not-allowed !important;
}

/* ======================
}

/* Also round the dropdown-content wrapper if present */
.navbar .dropdown-content {
  border-radius: 0 0 8px 8px !important;
  overflow: hidden;
}

/* ======================
   NAVIGATION DROPDOWN MODERNIZATION
   ====================== */

/* Ensure navbar and dropdowns appear above page-header */
.navbar {
  position: relative !important;
  z-index: 1050 !important;
}

.navbar .dropdown-menu {
  z-index: 1060 !important;
}

/* Modern dropdown menus - fully rounded with shadow */
.navbar .dropdown-menu {
  border-radius: 8px !important;
  overflow: visible !important; /* Allow submenus to extend outside */
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  margin-top: 8px !important; /* Small gap below trigger */
}

/* Dropdown content wrapper */
.navbar .dropdown-content {
  border-radius: 8px !important;
  overflow: hidden;
  border: none !important;
}

/* Dropdown menu items - better hover states */
.navbar .dropdown-menu > li > a {
  padding: 10px 16px !important;
  transition: all 0.2s ease !important;
  font-size: 14px !important;
}

.navbar .dropdown-menu > li > a:hover {
  background-color: #f0f9ff !important;
  color: #2563eb !important;
  transform: translateX(2px);
}

/* Dropdown menu icons */
.navbar .dropdown-menu > li > a > i {
  margin-right: 10px !important;
  font-size: 16px !important;
  width: 20px !important;
  text-align: center !important;
  color: #6b7280 !important;
  transition: color 0.2s ease !important;
}

.navbar .dropdown-menu > li > a:hover > i {
  color: #2563eb !important;
}

/* Modern dividers */
.navbar .dropdown-menu .divider {
  margin: 6px 0 !important;
  background-color: #e5e7eb !important;
  height: 1px !important;
  border: none !important;
}

/* Message dropdown specific styling */
.navbar .dropdown-content-heading {
  padding: 14px 16px !important;
  background: linear-gradient(to bottom, #f9fafb, #ffffff) !important;
  border-bottom: 1px solid #e5e7eb !important;
  margin: 0 !important;
}

.navbar .dropdown-content-heading p {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin: 0 !important;
}

/* Message list items */
.navbar .media-list.dropdown-content-body {
  max-height: 350px;
  overflow-y: auto;
  padding: 8px 0 !important;
}

.navbar .media-list .media {
  padding: 12px 16px !important;
  transition: background-color 0.2s ease !important;
  border-left: 3px solid transparent !important;
  margin: 0 !important;
}

.navbar .media-list .media:hover {
  background-color: #f9fafb !important;
  border-left-color: #2563eb !important;
}

/* Unread message indicator */
.navbar .media-badge {
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
}

/* Dropdown footer */
.navbar .dropdown-content-footer {
  padding: 10px 16px !important;
  background: #f9fafb !important;
  border-top: 1px solid #e5e7eb !important;
  text-align: center !important;
}

.navbar .dropdown-content-footer a {
  color: #6b7280 !important;
  transition: color 0.2s ease !important;
}

.navbar .dropdown-content-footer a:hover {
  color: #2563eb !important;
}

/* Modern notification badges */
.navbar .badge {
  border-radius: 12px !important;
  padding: 3px 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  min-width: 20px !important;
  text-align: center !important;
}

.navbar .badge.bg-warning-400 {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3) !important;
}

.navbar .badge.bg-teal-400 {
  background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(20, 184, 166, 0.3) !important;
}

/* User dropdown - account number styling */
.navbar .dropdown-user .dropdown-menu > li:first-child > a {
  font-weight: 600 !important;
  color: #111827 !important;
  background: #f9fafb !important;
  cursor: default !important;
}

.navbar .dropdown-user .dropdown-menu > li:first-child > a:hover {
  background: #f9fafb !important;
  transform: none !important;
}

/* Smooth scrollbar for message list */
.navbar .media-list.dropdown-content-body::-webkit-scrollbar {
  width: 6px;
}

.navbar .media-list.dropdown-content-body::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}

.navbar .media-list.dropdown-content-body::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.navbar .media-list.dropdown-content-body::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Animation for dropdown open */
.navbar .dropdown.open > .dropdown-menu {
  animation: dropdownSlideIn 0.2s ease-out;
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* User dropdown username styling */
.navbar .dropdown-user > a span {
  font-weight: 500 !important;
  margin: 0 8px !important;
}

/* Dropdown trigger hover effect */
.navbar .navbar-nav > li > a {
  transition: background-color 0.2s ease !important;
}

.navbar .navbar-nav > li > a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ======================
   SUBMENU / NESTED DROPDOWN FIXES
   ====================== */

/* Fix submenu dropdowns - ensure background is visible */
.navbar .dropdown-submenu > .dropdown-menu {
  background-color: #ffffff !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  margin-left: 2px !important;
  margin-top: -8px !important;
}

/* Submenu items */
.navbar .dropdown-submenu > .dropdown-menu > li > a {
  color: #374151 !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
}

.navbar .dropdown-submenu > .dropdown-menu > li > a:hover {
  background-color: #f0f9ff !important;
  color: #2563eb !important;
  transform: translateX(2px);
}

/* Submenu header styling */
.navbar .dropdown-submenu > .dropdown-menu > li.dropdown-header {
  padding: 8px 16px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #6b7280 !important;
  background: transparent !important;
  letter-spacing: 0.05em !important;
}

.navbar .dropdown-submenu > .dropdown-menu > li.dropdown-header.highlight {
  color: #2563eb !important;
}



/* Submenu trigger arrow */
.navbar .dropdown-menu > .dropdown-submenu > a::after {
  content: "\203A" !important;
  float: right !important;
  margin-left: 10px !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #9ca3af !important;
  transition: color 0.2s ease !important;
}

.navbar .dropdown-menu > .dropdown-submenu:hover > a::after {
  color: #2563eb !important;
}

/* Force submenu visibility and positioning on hover */
.navbar .dropdown-menu > .dropdown-submenu {
  position: relative !important;
}

.navbar .dropdown-menu > .dropdown-submenu > .dropdown-menu {
  top: 0 !important;
  left: 100% !important;
  margin-top: 0 !important;
  margin-left: 2px !important;
  display: none !important;
}

.navbar .dropdown-menu > .dropdown-submenu:hover > .dropdown-menu,
.navbar .dropdown-menu > .dropdown-submenu.open > .dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ADDITIONAL FIX: More specific submenu rules without .navbar prefix */
.dropdown-menu > .dropdown-submenu > .dropdown-menu {
  background-color: #ffffff !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1) !important;
  top: 0 !important;
  left: 100% !important;
  margin-top: -8px !important;
  margin-left: 2px !important;
}

.dropdown-menu > .dropdown-submenu:hover > .dropdown-menu {
  display: block !important;
}

/* ULTRA SPECIFIC: Force submenu display with all possible selectors */
#navbar-second .dropdown-menu > .dropdown-submenu:hover > .dropdown-menu,
.navbar-default .dropdown-menu > .dropdown-submenu:hover > .dropdown-menu,
.dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  margin-top: -8px !important;
  margin-left: 2px !important;
  background: white !important;
  z-index: 1000 !important;
}

/* Ensure parent has relative positioning */
#navbar-second .dropdown-menu > .dropdown-submenu,
.navbar-default .dropdown-menu > .dropdown-submenu,
.dropdown-menu .dropdown-submenu {
  position: relative !important;
}

/* ======================
   TABLE ACTION BUTTONS - LARGER & MORE VISIBLE
   ====================== */

/* Make table action buttons (Edit/Delete) larger */
.table .btn {
  font-size: 14px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  min-width: 80px !important;
}

.table .btn > i {
  font-size: 16px !important;
  margin-right: 6px !important;
}

/* Make Add New User and similar header buttons larger */
.page-header .btn,
.panel-heading .btn,
h2 + .btn,
h3 + .btn {
  font-size: 15px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
  min-width: 140px !important;
}

.page-header .btn > i,
.panel-heading .btn > i {
  font-size: 18px !important;
  margin-right: 8px !important;
}

/* Make ALL buttons larger across the application */
.btn {
  font-size: 14px !important;
  padding: 9px 18px !important;
  font-weight: 500 !important;
}

.btn > i {
  font-size: 16px !important;
}

/* Larger primary/action buttons */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning {
  font-size: 15px !important;
  padding: 10px 20px !important;
  font-weight: 600 !important;
}

.btn-primary > i,
.btn-success > i,
.btn-danger > i,
.btn-warning > i {
  font-size: 17px !important;
}

/* ======================
   DROPDOWN MENU OVERFLOW FIX
   ====================== */

/* Limit dropdown menu height and add scroll when too long */
/* Ensure dropdown doesn't overflow parent panel */

/* Better scrollbar for dropdowns */
.dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.dropdown-menu::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Bootstrap Select specific height limit (not navigation menus) */
.bootstrap-select .dropdown-menu {
  max-height: 300px !important;
}

/* ======================
   PREVENT EMPTY TABLE OVERFLOW
   ====================== */

/* Set minimum height on panels with tables to prevent dropdowns from overflowing */
.panel-body:has(table),
.panel:has(.table) {
  min-height: 450px !important;
}

/* Specific fix for dataTables wrapper */
.dataTables_wrapper {
  min-height: 400px !important;
}


/* Alternative: target by page content */
.dataTables_wrapper:has(table:contains("Voicemail Box")) {
  min-height: 450px !important;
}

/* ======================
}

/* Ensure no pseudo-elements on buttons */
.btn::after,
.btn::before {
  display: none !important;
}

/* Remove button hover artifacts */
.btn::after,
.btn::before,
.btn:hover::after,
.btn:hover::before {
  content: none !important;
  display: none !important;
}

/* ======================
   FORM INPUTS HEIGHT TO MATCH BUTTONS
   ====================== */

/* Make form inputs taller to match button height */
.form-control {
  height: 45px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
}

/* Textareas should not be affected */
textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
}

/* Select elements */
select.form-control {
  height: 45px !important;
  padding: 11px 14px !important;
}

/* Date inputs with icon/calendar */
.input-group .form-control {
  height: 45px !important;
}

.input-group-addon {
  padding: 11px 14px !important;
  font-size: 14px !important;
}

/* Select2 dropdowns to match input height */
.select2-container--default .select2-selection--single {
  height: 45px !important;
  padding: 11px 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 23px !important;
  padding-left: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 43px !important;
}

/* Bootstrap Select dropdowns to match input height - ONLY target the select wrapper buttons */
.bootstrap-select > .dropdown-toggle {
  height: 45px !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  line-height: 23px !important;
}

/* More specific Bootstrap Select button targeting */
.bootstrap-select > button.btn.dropdown-toggle,
.bootstrap-select > .btn.dropdown-toggle.btn-default {
  height: 45px !important;
  padding: 11px 14px !important;
}

.bootstrap-select .dropdown-toggle .filter-option {
  line-height: 23px !important;
  padding: 0 !important;
}

.bootstrap-select .dropdown-toggle .filter-option-inner,
.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  line-height: 23px !important;
}

/* Buttons in form groups/rows should match input height (buy-number.php, etc) */
.form-group .btn-primary,
.form-group .btn-success {
  height: 45px !important;
  padding: 11px 20px !important;
  line-height: 23px !important;
}

/* Fix button overflow in narrow containers */
.panel .btn,
.panel-heading .btn,

/* Fix button overflow in narrow containers */
.panel .btn,
.panel-heading .btn,
.panel-body .btn {
  max-width: 100%;
}

/* Reduce min-width for buttons in narrow columns */
.col-md-4 .btn,
.col-md-3 .btn,
.col-sm-4 .btn,
.col-sm-3 .btn {
  min-width: auto !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Allow buttons to wrap text in tight spaces */
.panel-body .btn {
  white-space: normal !important;
  word-wrap: break-word;
}

/* Allow buttons to wrap in tight spaces */
.panel-body .btn-group,
.panel-heading .btn-group {
  max-width: 100%;
}