@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --ticket-padding: 0.72em 0.78em 0.50em;
  --ticket-label-margin: 0.14em 0 0.05em;
  --ticket-title-margin: 0 0 0.12em;
  --task-line-height: 1.18;
  --task-lines: 4;
  --date-font-size: 0.76rem;
  --date-prefix-gap: 0.16em;
}

/* --------------------------------------------------
   Typo globale
-------------------------------------------------- */

body, body *
{
  font-family: inherit;
}

/* --------------------------------------------------
   Réglages globaux
-------------------------------------------------- */

main > section.tickets > section.source-level {
  --activation-delay: 300;
}

/* --------------------------------------------------
   Logo login
-------------------------------------------------- */

main > dialog.login::before {
  content: "Sca-Flex";
  color: transparent;
  pointer-events: none;
  background: #888 url(../Images/logoScaFlex.webp) center / auto 90% no-repeat;
  height: 6em;
  margin-bottom: 1em;
  border: 0.5em #888;
}


/* --------------------------------------------------
   Source-level collapsed offsets
-------------------------------------------------- */

main > section.tickets > section.source-level li.ticket::after,
main > section.tickets > section.source-level li.ticket:last-of-type::after {
  bottom: 0.2em;
}

main > section.tickets > section.source-level li.ticket.selected::after {
  bottom: -7.5em;
}

/* --------------------------------------------------
   Couleurs catégories
-------------------------------------------------- */

main > section.tickets li.ticket[data-category="yellow"],
main > dialog.ticket-edition[data-category="yellow"] {
  --bgcolor: rgb(235, 235, 101);
}

main > section.tickets li.ticket[data-category="red"],
main > dialog.ticket-edition[data-category="red"] {
  --bgcolor: rgb(226, 117, 117);
}

main > section.tickets li.ticket[data-category="green"],
main > dialog.ticket-edition[data-category="green"] {
  --bgcolor: rgb(144, 238, 144);
}

main > section.tickets li.ticket[data-category="blue"],
main > dialog.ticket-edition[data-category="blue"] {
  --bgcolor: rgb(173, 216, 230);
}

main > section.tickets li.ticket[data-category="pink"],
main > dialog.ticket-edition[data-category="pink"] {
  --bgcolor: rgb(230, 180, 180);
}



body:has( main > .Level.Attribute[data-name="Background"] )
{
  background-color: transparent !important;
}
main:has( > .Level.Attribute[data-name="Background"] )
{
  z-index: 1;
}

main > .Level.Attribute[data-name="Background"]
{
  position: absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
  z-index: -1;
  background: var(--attribute-value);
}

main > .Level.Attribute[data-name="Message"]
{
  color: white;
  text-align: center;
}

main > .Level.Attribute[data-name="Message"]::after
{
  content: attr(data-value);
}




main > section.tickets li.ticket > .Ticket.Attribute[data-name="Custom"]::before
{
  content: "Custom :";
  font-weight: 500;
}
main > section.tickets li.ticket > .TicketStep.Attribute[data-name="For"]::before
{
  content: "For :";
  font-weight: 500;
}
main > section.tickets li.ticket > .Ticket.Attribute[data-name="Custom"]::after,
main > section.tickets li.ticket > .TicketStep.Attribute[data-name="For"]::after

{
  content: attr(data-value);
}