@charset "UTF-8";

/* ========================================
 * Custom CSS Overrides
 * This file is for custom styles that override
 * the default theme files (mrknow-theme.css, etc.)
 * ========================================*/

/* ========================================
 * Color Definitions
 * Define your tile colors here for easy maintenance
 * ========================================*/
:root {
  --color-blue: #0078d4;
  --color-red: #d83b01;
  --color-green: #107c10;
  --color-yellow: #ffb900;
  --color-yellow-dark: #b8860b;  /* For better text contrast on yellow */
  --color-teal: #00b7c3;
  --color-purple: #8661c5;
  --color-orange: #ff8c00;
  --color-pink: #e3008c;
}

/* Fix for tile overlay issue - ensures tiles are visible above background overlay */
.portal-l-wrapper-content:has(form.assistant-background)::before {
  pointer-events: none !important;
}

.portal-l-wrapper-content:has(form.assistant-background) .btn-regular.t-mrknow-btn-secondary {
  position: relative;
  z-index: 1;
}

.portal-l-wrapper-content:has(form.assistant-background) .l-tiles-text,
.portal-l-wrapper-content:has(form.assistant-background) .l-tiles-image,
.portal-l-wrapper-content:has(form.assistant-background) .portal-l-grid-tiles {
  position: relative;
  z-index: 1;
}

/* Fix for tile icon/image size - only for tiles with ch-pmp-tiles class */
.l-tiles-text.ch-pmp-tiles #tile_image_file,
.t-mrknow-tiles-text.ch-pmp-tiles #tile_image_file,
.l-tiles-text.ch-pmp-tiles img.material-symbols-outlined,
.t-mrknow-tiles-text.ch-pmp-tiles img.material-symbols-outlined {
  max-width: 48px !important;
  max-height: 48px !important;
  width: 48px !important;
  height: 48px !important;
}

.l-tiles-text.ch-pmp-tiles #Tile_image,
.t-mrknow-tiles-text.ch-pmp-tiles #Tile_image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

/* Add your custom styles below this line */


/*Logo Definition*/

.portal-nav-main-logo {
  height: var(--logo-height);
  max-width: 210px;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  margin: 5px 10px 0;
}


/* ========================================
 * Modern Tile Card Design
 * ========================================*/

/* Base card styling */
.l-tiles-text.ch-pmp-tiles,
.t-mrknow-tiles-text.ch-pmp-tiles {
  --tile-color: var(--color-blue); /* Default blue if no color class is applied */
  border-top: 4px solid var(--tile-color) !important;
  padding: 24px 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  border-radius: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  min-height: 200px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  position: relative !important;
}

.l-tiles-text.ch-pmp-tiles:hover,
.t-mrknow-tiles-text.ch-pmp-tiles:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  transform: translateY(-2px) !important;
}

/*========================================
 * Color Utility Classes
 * Apply these classes to tiles based on business purpose
 * Usage in database: {"css":"ch-pmp-tiles tile-blue","image":"..."}
 * ========================================*/

/* Blue - for general/default tiles */
.tile-blue {
  --tile-color: var(--color-blue) !important;
}

/* Red - for urgent/important/alert tiles */
.tile-red {
  --tile-color: var(--color-red) !important;
}

/* Green - for success/completed/approved tiles */
.tile-green {
  --tile-color: var(--color-green) !important;
}

/* Yellow - for warning/pending tiles */
.tile-yellow {
  --tile-color: var(--color-yellow) !important;
  --tile-color-text: var(--color-yellow-dark) !important;
}

/* Teal - for information/data tiles */
.tile-teal {
  --tile-color: var(--color-teal) !important;
}

/* Purple - for special/premium tiles */
.tile-purple {
  --tile-color: var(--color-purple) !important;
}

/* Orange - for activity/action tiles */
.tile-orange {
  --tile-color: var(--color-orange) !important;
}

/* Pink - for creative/design tiles */
.tile-pink {
  --tile-color: var(--color-pink) !important;
}

/* Icon container - override previous settings */
.l-tiles-text.ch-pmp-tiles #Tile_image,
.t-mrknow-tiles-text.ch-pmp-tiles #Tile_image {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}

/* Icon size - larger for modern design */
.l-tiles-text.ch-pmp-tiles #tile_image_file,
.t-mrknow-tiles-text.ch-pmp-tiles #tile_image_file,
.l-tiles-text.ch-pmp-tiles img.material-symbols-outlined,
.t-mrknow-tiles-text.ch-pmp-tiles img.material-symbols-outlined {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  color: var(--tile-color) !important;
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
  filter: none !important;
}

/* Title styling */
.l-tiles-text.ch-pmp-tiles .text-header h4,
.t-mrknow-tiles-text.ch-pmp-tiles .text-header h4,
.l-tiles-text.ch-pmp-tiles #body_r1_header_text,
.t-mrknow-tiles-text.ch-pmp-tiles #body_r1_header_text {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  color: #323130 !important;
  line-height: 1.4 !important;
}

/* Description text */
.l-tiles-text.ch-pmp-tiles .text-body p,
.t-mrknow-tiles-text.ch-pmp-tiles .text-body p,
.l-tiles-text.ch-pmp-tiles #body_r1_cont_description p,
.t-mrknow-tiles-text.ch-pmp-tiles #body_r1_cont_description p {
  font-size: 14px !important;
  color: #605e5c !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Override inline background colors on spans */
.l-tiles-text.ch-pmp-tiles .text-body p span,
.t-mrknow-tiles-text.ch-pmp-tiles .text-body p span,
.l-tiles-text.ch-pmp-tiles #body_r1_cont_description p span,
.t-mrknow-tiles-text.ch-pmp-tiles #body_r1_cont_description p span {
  background-color: transparent !important;
  color: inherit !important;
}

/* Body container layout */
.l-tiles-text.ch-pmp-tiles #Tile_body,
.t-mrknow-tiles-text.ch-pmp-tiles #Tile_body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100% !important;
}

/* ========================================
 * Task Counter Badge Styling
 * ========================================*/

/* Footer with counter */
.l-tiles-text.ch-pmp-tiles #tile_footer,
.t-mrknow-tiles-text.ch-pmp-tiles div[id^="tile_footer"] {
  margin-top: auto !important;
  padding-top: 16px !important;
  width: 100% !important;
  display: flex !important;
  justify-content: flex-end !important;
  position: absolute !important;
  bottom: 16px !important;
  right: 16px !important;
  left: auto !important;
  width: auto !important;
}

/* Counter badge */
.l-tiles-text.ch-pmp-tiles .thumbnail-counter,
.l-tiles-text.ch-pmp-tiles .t-thumbnail-counter-task,
.t-mrknow-tiles-text.ch-pmp-tiles .thumbnail-counter,
.t-mrknow-tiles-text.ch-pmp-tiles .t-thumbnail-counter-task {
  background-color: color-mix(in srgb, var(--tile-color) 10%, transparent) !important;
  border-radius: 20px !important;
  padding: 8px 20px !important;
  min-width: 60px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--tile-color) !important;
  transition: all 0.2s ease !important;
}

/* Counter number */
.l-tiles-text.ch-pmp-tiles .thumbnail-counter div[id^="Tile_info_content"],
.t-mrknow-tiles-text.ch-pmp-tiles .thumbnail-counter div[id^="Tile_info_content"] {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--tile-color-text, var(--tile-color)) !important;
  line-height: 1 !important;
}

/* Hover effect for counters */
.l-tiles-text.ch-pmp-tiles:hover .thumbnail-counter,
.t-mrknow-tiles-text.ch-pmp-tiles:hover .thumbnail-counter {
  transform: scale(1.05) !important;
}

/* ========================================
 * Dark Mode Support
 * Adjusts colors when body has theme-dark class
 * ========================================*/
.theme-dark .l-tiles-text.ch-pmp-tiles,
.theme-dark .t-mrknow-tiles-text.ch-pmp-tiles {
  background-color: #3d3d3d !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.theme-dark .l-tiles-text.ch-pmp-tiles:hover,
.theme-dark .t-mrknow-tiles-text.ch-pmp-tiles:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}

/* Adjust text colors for dark mode */
.theme-dark .l-tiles-text.ch-pmp-tiles .text-header h4,
.theme-dark .t-mrknow-tiles-text.ch-pmp-tiles .text-header h4,
.theme-dark .l-tiles-text.ch-pmp-tiles #body_r1_header_text,
.theme-dark .t-mrknow-tiles-text.ch-pmp-tiles #body_r1_header_text {
  color: #ffffff !important;
}

.theme-dark .l-tiles-text.ch-pmp-tiles .text-body p,
.theme-dark .t-mrknow-tiles-text.ch-pmp-tiles .text-body p,
.theme-dark .l-tiles-text.ch-pmp-tiles #body_r1_cont_description p,
.theme-dark .t-mrknow-tiles-text.ch-pmp-tiles #body_r1_cont_description p {
  color: #ffffff !important;
}
/* Override inline background colors in dark mode */
.theme-dark .l-tiles-text.ch-pmp-tiles .text-body p span,
.theme-dark .t-mrknow-tiles-text.ch-pmp-tiles .text-body p span,
.theme-dark .l-tiles-text.ch-pmp-tiles #body_r1_cont_description p span,
.theme-dark .t-mrknow-tiles-text.ch-pmp-tiles #body_r1_cont_description p span {
  background-color: transparent !important;
  color: #c8c8c8 !important;
}