/* ========================================
   Common MMP Styles - CSP Compliant
   ======================================== */

/* Link with underline decoration */
.common-link-underline {
  text-decoration: underline;
}

/* Profile image circular border */
.profile-img-circle {
  border-radius: 100%;
}

/* Full width and height */
.full-size {
  height: 100%;
  width: 100%;
}

/* ========================================
   Accounts Tab Minimum Width - Dynamic
   ======================================== */

/* Accounts tab minimum width for native social messaging */
.accounts-tab-min-width-1760 {
  min-width: 1760px;
}

/* Accounts tab minimum width default */
.accounts-tab-min-width-1500 {
  min-width: 1500px;
}

/* iMessage column minimum width */
.accounts-imessage-min-width {
  min-width: 130px;
}

/* ========================================
   Add Virtual Line Account Styles
   ======================================== */

/* Required field indicator - red asterisk */
.required-field-indicator {
  color: red;
}

/* Textarea no resize */
.textarea-no-resize {
  resize: none;
}

/* Alert block display */
.alert-block-display {
  display: block;
}

/* Loader image hidden */
.loader-hidden {
  display: none;
}

/* Loader position absolute float top */
.loader-pos-absolute-top {
  display: none;
}

/* Multiple account tab disabled */
.multiple-account-tab-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Virtual line dropdown relative position */
.virtual-line-dropdown-container {
  position: relative;
  display: inline-block;
  width: calc(100% - 30px);
}

/* Virtual line number search input */
.virtual-line-number-search-input {
  width: 100%;
}

/* Virtual line dropdown menu */
.virtual-line-dropdown-menu {
  max-height: 300px;
  overflow-y: auto;
  width: 100%;
  position: absolute;
  z-index: 1000;
}

/* Clear button for virtual line number */
.virtual-line-clear-btn {
  display: none;
  margin-left: 5px;
  vertical-align: middle;
  color: #d9534f;
}

/* Block display for helper text */
.helper-text-block {
  display: block;
}

/* Addon features row hidden */
.addon-features-row-hidden {
  display: none;
}

/* Addon features container flex */
.addon-features-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Upload file input hidden */
.upload-file-hidden {
  display: none;
}

/* Invite button loader */
.invite-button-loader {
  padding: 0 50px !important;
}

/* Import button loader */
.import-button-loader {
  padding: 0 50px !important;
}

/* Feature button style */
.feature-btn-style {
  border-radius: 5px;
  border: 1px solid #000;
  padding: 6px 12px;
  background: white;
  color: #000;
  cursor: pointer;
  pointer-events: auto;
}

/* Dropdown header no pointer events */
.dropdown-header-no-pointer {
  cursor: default;
  pointer-events: none;
  color: #999;
  margin-top: 8px;
}

/* Features container transparent */
.features-container-transparent {
  list-style: none;
  padding: 8px;
  background: transparent;
}

/* Button grid 2 columns */
.button-grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Dropdown item with margin */
.dropdown-item-margin {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* ========================================
   Edit CL User Styles
   ======================================== */

/* Col form label fixed width */
.col-form-label-width-180 {
  width: 180px;
}

/* Col form label min width */
.col-form-label-min-width-180 {
  min-width: 180px;
  text-transform: none !important;
}

/* Checkbox opacity disabled */
.checkbox-opacity-disabled {
  opacity: 0.5;
  cursor: default;
}

/* Checkbox opacity light */
.checkbox-opacity-light {
  opacity: 0.4;
}

/* Checkbox opacity edit access */
.checkbox-opacity-no-edit {
  opacity: 0.4;
  pointer-events: none;
}

/* Resend invite button negative margin */
.resend-invite-btn-margin {
  margin-top: -1px;
}

/* Resend time display */
.resend-time-hidden {
  display: none;
}

/* Recording compliance error alert */
.recording-compliance-error {
  display: none;
  padding: 15px 45px 15px 15px;
  min-height: 50px;
  position: relative;
}

/* Recording compliance error message */
.recording-compliance-error-message {
  font-size: 12px;
  display: block;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.5;
  padding-right: 10px;
}

/* Recording compliance close button */
.recording-compliance-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  color: #721c24;
  opacity: 0.8;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
}

/* ========================================
   Accounts Filter Styles
   Moved from inline <style> tag in _accounts.html.erb
   ======================================== */

.sng-otr-block {
  display: block !important;
}

.inv_pagination {
  color: #424344 !important;
  font-family: Segoe UI;
  font-size: 14px;
  padding: 10px 5px 10px 15px;
}

.fa {
  margin-left: 6px;
}

.selectedFilter, .selectedFilter > i {
  background: #555555 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

.selectedFilter:hover, .selectedFilter:hover > i {
  background: #ffffff !important;
  color: #555555 !important;
  border-color: #555555 !important;
}

/* ========================================
   Dashboard Styles
   Moved from inline styles and <style> tags
   ======================================== */

/* Data usage loading indicator - replaces inline style in JavaScript */
.datausage-loading {
  text-align: center;
  padding-top: 55px;
  height: 183px;
  font-size: 18px;
}

/* Number utilization pie chart legend styles
   Moved from embedded <style> tag in _number_utilization_pie_chart.html.erb */
.legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}

.legend-divider {
  flex-grow: 2;
  height: 1px;
  min-width: 15px;
  background-color: black;
}

.legend-item span:nth-child(2) {
  max-width: 130px;
}

.legend-item span:nth-child(4) {
  text-align: right;
  flex-grow: 1;
}

/* ========================================
   Mobile App Customization - Customer Care
   Replaced .css() calls with CSS custom properties
   ======================================== */

/* Dynamic colors set via JavaScript using CSS custom properties */
.clearfix {
  color: var(--customer-care-text-color, #fff) !important;
}

.text_color, .vers {
  color: var(--customer-care-text-color, #fff) !important;
}

/* ========================================
   Reports - Validation and Display States
   ======================================== */

/* Validation states for form inputs */
.validation-error {
  border-color: red !important;
}

.validation-default {
  border-color: #bcbcbc !important;
}

/* Display utilities - CSP-compliant show/hide */
.display-none {
  display: none !important;
}

.display-block {
  display: block !important;
}

/* DatePicker visibility control */
.datepicker-hidden {
  display: none !important;
}

/* Search button icon color states */
.search-icon-active {
  color: #333333 !important;
}

.search-icon-inactive {
  color: #999999 !important;
}

/* Additional common utilities can be added here */

/* ========================================
   Header Enterprise & Telus Login Styles
   CSP-compliant replacements for inline styles
   ======================================== */

/* Top navigation float right */
.header-topnav-right {
  float: right !important;
}

/* Search results hidden by default */
.header-search-results-hidden {
  display: none;
}

/* Sub login button white text */
.header-sub-login-white {
  color: #fff;
}

/* Locale overlay hidden by default */
.header-locale-overlay-hidden {
  display: none;
}

/* Locale modal white background */
.header-locale-box-white-bg {
  background-color: #ffffff;
}

/* Locale list item no border */
.header-locale-item-no-border {
  border-bottom-style: none;
}

/* Locale link no float */
.header-locale-link-no-float {
  float: none;
}

/* General overlay hidden */
.header-overlay-hidden {
  display: none;
}

/* Loading text centered */
.header-loading-text-center {
  text-align: center;
  padding-top: 150px;
  font-size: 22px;
}

/* Telus specific - search results hidden */
.telus-display-none {
  display: none;
}

/* Link with underline */
.link-underline {
  text-decoration: underline;
}

/* Icon colors for recording states */
.icon-color-green {
  color: green;
  font-size: 17px;
}

.icon-color-red {
  color: red;
  font-size: 17px;
}

/* Menu indicator badge */
.menu-badge {
  font-weight: bold;
  color: #000;
  float: right;
  margin-top: -35px;
  margin-right: 5px;
  font-size: 8px;
}