/* Ticket List */

/* Disable the specific view item (Team Overdue Tickets) */
li.TicketList__accountList.Team_Overdue_Tickets {
  display: none !important;
}

.ticket_duedate,
.TicketListItem_dueDate,
.My_Overdue_Tickets{
    display: none;
}

/* =========================================
   Zoho Desk Help Center — Ticket Status Pills
   Industry-standard colors + strong overrides
   ========================================= */

/* Base pill style (applies to all statuses) */
div.TicketListItem__ticketStatus.commonStyle__inlineBlock {
  display: inline-block !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  border: 1px solid transparent !important;
  white-space: nowrap !important;
}

/* --------------------------
   OPEN (neutral / white)
   -------------------------- */
div.TicketListItem__ticketStatus.commonStyle__inlineBlock.open,
div[title="Open"].TicketListItem__ticketStatus {
  color: #111827 !important;              /* near-black */
  background-color: #FFFFFF !important;   /* white */
  border-color: #D1D5DB !important;       /* light gray border */
}

/* --------------------------
   IN PROGRESS (blue)
   -------------------------- */
div.TicketListItem__ticketStatus.commonStyle__inlineBlock.in_progress,
div.TicketListItem__ticketStatus.commonStyle__inlineBlock.inprogress,
div[title="In Progress"].TicketListItem__ticketStatus {
  color: #1D4ED8 !important;              /* blue-700 */
  background-color: #DBEAFE !important;   /* blue-100 */
  border-color: #93C5FD !important;       /* blue-300 */
}

/* --------------------------
   ON HOLD (orange / amber)
   -------------------------- */
div.TicketListItem__ticketStatus.commonStyle__inlineBlock.on_hold,
div.TicketListItem__ticketStatus.commonStyle__inlineBlock.onhold,
div[title="On Hold"].TicketListItem__ticketStatus {
  color: #B45309 !important;              /* amber-700 */
  background-color: #FEF3C7 !important;   /* amber-100 */
  border-color: #FCD34D !important;       /* amber-300 */
}

/* --------------------------
   CLOSED (green)
   -------------------------- */
div.TicketListItem__ticketStatus.commonStyle__inlineBlock.closed,
div[title="Closed"].TicketListItem__ticketStatus {
  color: #15803D !important;              /* green-700 */
  background-color: #DCFCE7 !important;   /* green-100 */
  border-color: #86EFAC !important;       /* green-300 */
}

/* --------------------------
   CANCELLED (gray)
   -------------------------- */
div.TicketListItem__ticketStatus.commonStyle__inlineBlock.cancelled,
div.TicketListItem__ticketStatus.commonStyle__inlineBlock.canceled,
div[title="Cancelled"].TicketListItem__ticketStatus,
div[title="Canceled"].TicketListItem__ticketStatus {
  color: #374151 !important;              /* gray-700 */
  background-color: #F3F4F6 !important;   /* gray-100 */
  border-color: #D1D5DB !important;       /* gray-300 */
}

/* Optional: subtle hover feedback */
div.TicketListItem__ticketStatus.commonStyle__inlineBlock:hover {
  filter: brightness(0.98) !important;
}

/* Optional "nuclear" override if Zoho injects inline styles on the pill */
div.TicketListItem__ticketStatus[style].commonStyle__inlineBlock {
  background-color: inherit !important;
  color: inherit !important;
  border-color: inherit !important;
}

/* =========================================================
   0) Global variables (optional, makes tweaks easy)
   ========================================================= */
:root{
  --row-hover: #F8FAFC;
  --row-border: #E5E7EB;

  --text-main: #111827;
  --text-muted: #6B7280;
  --text-faint: #9CA3AF;

  --link: #0F5EA8;
  --link-hover: #0B3C6D;

  --focus-ring: rgba(29, 78, 216, 0.25);
}

/* =========================================================
   1) Ticket list container + row separation
   ========================================================= */
ul.TicketList__ticketListContent {
  margin-top: 6px !important;
}

li.TicketListItem__listItem {
  border-bottom: 1px solid var(--row-border) !important;
  padding: 10px 6px !important;
  transition: background-color .12s ease-in-out !important;
}

li.TicketListItem__listItem:hover {
  background: var(--row-hover) !important;
}

/* =========================================================
   2) Title hierarchy (make subject the hero)
   ========================================================= */
span.TicketListItem__ticketCardTitle {
  color: var(--text-main) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

a.Link__link.commonStyle__zt3Link:hover span.TicketListItem__ticketCardTitle {
  color: var(--link-hover) !important;
  text-decoration: underline !important;
}

/* =========================================================
   3) Metadata row: quieter + better spacing
   ========================================================= */
.TicketListItem__ticketStatus_and_details ul.List__list > li.List__listItem {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  margin-right: 10px !important;
}

/* Ticket ID should be visible but subtle */
span.TicketListItem__ticketId {
  color: var(--text-faint) !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
}

/* Department & Account slightly stronger than the rest */
span.TicketListItem__tic_list_deptname,
span.TicketListItem__tic_list_accountname {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

/* Creator name a touch darker (helps context) */
span.enduser_name {
  color: #4B5563 !important;
  font-weight: 500 !important;
}

/* =========================================================
   4) Reply count: clearer, but not screaming
   ========================================================= */
span.TicketListItem__replyCount {
  color: #B91C1C !important;         /* readable red */
  font-weight: 600 !important;
}

span.TicketListItem__replyCount:hover {
  text-decoration: underline !important;
}

/* =========================================================
   5) Status pill: consistent sizing + alignment
   (works with your existing status color rules)
   ========================================================= */
div.TicketListItem__ticketStatus.commonStyle__inlineBlock {
  min-width: 96px !important;
  text-align: center !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
}

/* =========================================================
   6) Assignee avatar: make it feel intentional
   ========================================================= */
div.agent_avatar.AvatarText__avatarText {
  border-radius: 999px !important;
  border: 1px solid #E5E7EB !important;
  background: #F3F4F6 !important;
  color: #374151 !important;
  font-weight: 700 !important;
}

/* Optional: small lift on hover for the avatar */
li.TicketListItem__listItem:hover div.agent_avatar.AvatarText__avatarText {
  background: #EEF2FF !important;
  border-color: #C7D2FE !important;
}

/* =========================================================
   7) Created time: replace hours with actual date
   ========================================================= */

/* Hide the relative time text */
li.TicketListItem_createdTime span > span {
  display: none !important;
}

/* Replace it with static text + title value */
li.TicketListItem_createdTime span::before {
  content: "Created " attr(title);
  font-size: 12px;
  color: #6B7280;
  white-space: nowrap;
}

/* =========================================================
   7) Keyboard focus (accessibility + better UX)
   ========================================================= */
a.Link__link.commonStyle__zt3Link:focus,
span.TicketListItem__replyCount:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  border-radius: 6px !important;
}

/* =========================================================
   Ticket Details
   ========================================================= */


/* Base thread container styling */
.ThreadContainer__articleContent {
  margin: 16px 0 !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
}

/* Separate threads visually */
.ThreadContainer__articleContent.borderLineTop {
  border-top: none !important;
}

/* Agent replies */
.ThreadContainer__articleContent.agent_thread {
  background: #F8FAFF !important;
  border-left: 4px solid #2563EB !important;
}

/* End-user replies */
.ThreadContainer__articleContent.enduser_thread {
  background: #FFFFFF !important;
  border-left: 4px solid #10B981 !important;
}

/* Timestamp styling – correct target */
.Post__userLastPost {
  font-size: 12px !important;
  color: #6B7280 !important;
  margin-top: 2px !important;
}

/* Main message content */
.Post__postSummary,
.description.Post__postSummary {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #111827 !important;
}

/* Normalize paragraph spacing inside emails */
.Post__postSummary p,
.Post__postSummary div {
  margin-bottom: 10px !important;
}

/* Quoted replies / previous emails */
.Post__postSummary blockquote {
  margin: 12px 0 !important;
  padding-left: 12px !important;
  border-left: 3px solid #D1D5DB !important;
  color: #4B5563 !important;
  background: #F9FAFB !important;
}

/* Reduce visual dominance of quoted text */
.Post__postSummary blockquote * {
  font-size: 13px !important;
}

/* Links inside messages */
.Post__postSummary a {
  color: #2563EB !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
}

/* Images inside messages */
.Post__postSummary img {
  max-width: 100% !important;
  border-radius: 6px !important;
  margin: 8px 0 !important;
}

/* =========================================================
   Ticket Properties
   ========================================================= */

/* Section headers */
.TicketDetailRightContainer__sectionName {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #374151 !important;
  margin: 16px 0 8px !important;
}

/* Property rows */
.Info__infoList {
  padding: 6px 0 !important;
  border-bottom: 1px solid #E5E7EB !important;
}

/* Labels */
.Info__infoLabel {
  font-size: 12px !important;
  font-weight: 600 !important
  color: #6B7280 !important;
}

/* Values */
.Info__infoContent {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #111827 !important;
}

/* Ticket title */
.TicketDetailLeftContainer__detailHeader {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

/* Ticket created time */
.ConversationForm__ticketCreateTime span {
  font-size: 12px !important;
  color: #6B7280 !important;
}