/*
 * Thème client CRCHU pour osTicket 1.17.3
 * Installation non destructive par surcharge CSS.
 * Palette institutionnelle : #00ABC4, #01264F, #EFEFEF, #D25D66, #357E94, #94CCD3.
 */
:root {
  --crchu-turquoise: #00ABC4;
  --crchu-navy: #01264F;
  --crchu-light: #EFEFEF;
  --crchu-coral: #D25D66;
  --crchu-dark-turquoise: #357E94;
  --crchu-pale-turquoise: #94CCD3;
  --crchu-text: #333333;
  --crchu-white: #FFFFFF;
  --crchu-pale-blue: #B7D5FF;
  --crchu-pale-coral: #EFC3C7;
  --crchu-border: #D9E3E8;
  --crchu-shadow: 0 10px 28px rgba(1, 38, 79, .10);
  --crchu-radius: 12px;
}

html { background: var(--crchu-light); }
body {
  margin: 0;
  color: var(--crchu-text);
  background: linear-gradient(180deg, #f8fbfc 0, var(--crchu-light) 420px);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

body:before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--crchu-navy) 0 33%, var(--crchu-turquoise) 33% 78%, var(--crchu-coral) 78% 100%);
}

body.crchu-home-page div.thread-body h4 {
  margin-top: 20px;
}

body.crchu-home-page div.thread-body a, body.crchu-home-page div.thread-body a:hover, body.crchu-home-page div.thread-body a:visited {
  background-color: var(--crchu-pale-turquoise);
  padding: 10px;
  display: block;
  margin-bottom: 3px;
  border-radius: 5px;
  color: var(--crchu-navy) !important;
  text-decoration: none;
  font-size: 1.2em;
  line-height: 1.2em;
  border: none !important;
}

body.crchu-home-page div.thread-body>p a {
  width: 80%;
}

body.crchu-home-page div.thread-body>p:nth-child(7) a {
  background-color: var(--crchu-light);
  width: 60%;
}

body.crchu-home-page div.thread-body a:hover, body.crchu-home-page div.thread-body>p:nth-child(7) a:hover {
  background-color: var(--crchu-dark-turquoise);
  color: #fff !important;
}

#landing_page {
  margin: 0;
}

#faq-page .span8 h1 {
  display: none;
}

#page-page>div.span8>div {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 20px 0;
  color: var(--crchu-navy) !important;
}

#page-page>div.span8>div>div, #page-page>div.span8>div>a {
  flex: 0 0 calc((100% - (2 * 5px)) / 3);
  background-color: var(--crchu-light);
  padding: 10px;
  box-sizing: border-box; 
  border-radius: 10px;
}

#page-page>div.span8>div>a, #page-page>div.span8>div>div>a {
  color: var(--crchu-navy) !important;
}

#page-page>div.span8>div>a[href*="crchudequebec.ca"], #page-page>div.span8>div>div:has(span.tag_ti) {
  background-color: var(--crchu-pale-turquoise);
}

span.tag_ti, span.tag_dri, span.tag_dti, span.tag_multi {
  color: var(--crchu-dark-turquoise) !important;
}

#page-page>div.span8>div>a[href*="portaildri.c2atom.com"], #page-page>div.span8>div>div:has(span.tag_dri) {
  background-color: var(--crchu-pale-blue);
}

#page-page>div.span8>div>div>div {
  margin-bottom: 5px;
}

#page-page>div.span8>div>div>div.gr_buttons a {
   color: var(--crchu-navy) !important;
   padding: 5px;
   border-radius: 5px;
   margin-right: 5px;
   border: none !important;
}

#page-page>div.span8>div>div>div.gr_buttons a[href*="ulaval.ca"] {
   background-color: var(--crchu-pale-coral);
   border: 1px solid var(--crchu-coral) !important;
}

#page-page>div.span8>div>div>div.gr_buttons a[href*="crchudequebec.ca"], #page-page>div.span8>div>div>div.gr_buttons a[href*="support.ti@crchudequebec.ulaval.ca"] {
   background-color: var(--crchu-pale-turquoise);
   border: 1px solid var(--crchu-dark-turquoise) !important;
}

#page-page>div.span8>div>div>div.gr_buttons a[href*="portaildri.c2atom.com"], #page-page>div.span8>div>div>div.gr_buttons a[href*="assistance.informatique@chudequebec.ca"] {
   background-color: var(--crchu-pale-blue);
   border: 1px solid var(--crchu-navy) !important;
}

#page-page>div.span8>div>div>div.gr_buttons a[href*="ulaval.ca"]:hover {
   background-color: var(--crchu-coral);
   color: #fff !important;
}

#page-page>div.span8>div>div>div.gr_buttons a[href*="crchudequebec.ca"]:hover, #page-page>div.span8>div>div>div.gr_buttons a[href*="support.ti@crchudequebec.ulaval.ca"]:hover {
   background-color: var(--crchu-dark-turquoise);
   color: #fff !important;
}

#page-page>div.span8>div>div>div.gr_buttons a[href*="portaildri.c2atom.com"]:hover, #page-page>div.span8>div>div>div.gr_buttons a[href*="assistance.informatique@chudequebec.ca"]:hover {
   background-color: var(--crchu-navy);
   color: #fff !important;
}

#page-page table {
  border-collapse: separate !important;
}

#page-page table td {
  border: 4px solid var(--crchu-pale-turquoise);
  padding-left: 5px;
  margin-bottom: 15px !important; 
}

#wrapper {
  width: min(1120px, calc(100% - 32px));
  margin: 24px auto 40px;
  background: var(--crchu-white);
  border: 1px solid var(--crchu-border);
  border-radius: 16px;
  box-shadow: var(--crchu-shadow);
  overflow: hidden;
}

#header {
  box-sizing: border-box;
  min-height: 104px;
  padding: 20px 28px;
  background: #fff;
  border-bottom: 1px solid var(--crchu-border);
}
#header #logo img { max-height: 64px; width: auto; }
#header p, #header .pull-right { color: #4a5b68; }

/* Logo et titre du portail */
#header #logo.crchu-brand {
    display: flex;
    align-items: center;
    gap: 24px;
    width: auto;
    max-width: calc(100% - 40px);
}

.crchu-brand-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

#header #logo.crchu-brand .crchu-brand-logo img {
    display: block;
    width: auto;
    max-width: 340px;
    max-height: 64px;
}

.crchu-brand-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 24px;
    color: var(--crchu-navy, #01264f);
/*    border-left: 2px solid var(--crchu-turquoise, #00abc4); */
    line-height: 2;
    font-size: 2.2rem;
    font-weight: 700;
}

#header p {
   padding-top: 0;
}

#header a.new_ticket {
   background-color: var(--crchu-pale-turquoise);
   padding: 3px 10px;
   color: var(--crchu-navy) !important;
   border: none !important;
   border-radius: 5px;
   margin-top: 2px;
   display: inline-block;
}

#header a.new_ticket:hover {
   background-color: var(--crchu-dark-turquoise);
   color: #fff !important;
}

#nav, #header #nav {
  margin: 0;
  padding: 0 24px;
  min-height: 52px;
  background: var(--crchu-navy);
  border: 0;
}
#nav li { margin: 0; }
#nav li a {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  box-sizing: border-box;
  padding: 0 16px;
  color: #fff !important;
  border: 0;
/*  border-bottom: 4px solid transparent;*/
  font-weight: 700;
  text-decoration: none;
}
#nav li a:hover, #nav li a.active, #nav li.active a {
  background: rgba(255,255,255,.08);
  border-bottom-color: var(--crchu-turquoise);
}

#nav li a.new, #nav li a.status, #nav li a.home, #nav li a.tickets, #nav li a.kb {
  background-image: none;
}

#nav li a.new, #nav a.tickets, #nav a.status {
  display: none;
}

#content {
  box-sizing: border-box;
  min-height: 480px;
  padding: 34px;
  /*background: #fff;*/
  margin-top: 10px;
}

h1, h2, h3, h4 { color: var(--crchu-navy); line-height: 1.2; }
h1 { font-size: clamp(1.7rem, 3vw, 2.35rem); margin-top: 0; }
h2 { font-size: 1.45rem; }
a { color: #006f82; }
a:hover { color: var(--crchu-navy); }

.button, button, input[type="submit"], input[type="reset"], input[type="button"], .btn {
  box-sizing: border-box;
  min-height: 42px;
  padding: 10px 18px !important;
  color: #fff !important;
  background: var(--crchu-dark-turquoise) !important;
/*  border: 2px solid var(--crchu-navy) !important;*/
  border-radius: 8px !important;
  box-shadow: none !important;
  font: 700 15px Arial, Helvetica, sans-serif;
  text-shadow: none !important;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .btn:hover {
  background: var(--crchu-navy) !important;
/*  border-color: var(--crchu-navy) !important;*/
  transform: translateY(-1px);
}

#content .main-content, #content .sidebar, .search, .faq, .ticket_info, .thread-entry, .dialog, .tip_box,
#loginForm, form[action*="login"], .form_table, table.list {
  border-radius: var(--crchu-radius);
}

.sidebar .content section div.header {
  padding-bottom: 3px;
  padding-top: 20px;
}

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"],
select, textarea {
  box-sizing: border-box;
  min-height: 42px;
  padding: 9px 12px;
  color: var(--crchu-text);
  background: #fff;
  border: 1px solid #aebdc6;
  border-radius: 7px;
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(0,171,196,.22);
  border-color: var(--crchu-turquoise);
}

.searchbar .search, .search-form .search {
  width: 100% !important;
}

table.list, table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--crchu-border);
}
table.list th, table.table th {
  padding: 12px;
  color: #fff;
  background: var(--crchu-navy);
  border: 0;
  text-align: left;
}
table.list td, table.table td { padding: 12px; border-bottom: 1px solid var(--crchu-border); }
table.list tr:nth-child(even) td, table.table tr:nth-child(even) td { background: #f7fafb; }

.error, .error-banner, .danger { color: #8c1f2b; }
.alert, .warning, .notice, .info, .success, .error-banner {
  padding: 13px 16px;
  border-radius: 8px;
  border-left: 5px solid var(--crchu-turquoise);
  background: #edf9fb;
}
.error-banner, .danger { border-left-color: var(--crchu-coral); background: #fdf0f1; }

#footer {
  box-sizing: border-box;
  padding: 24px 30px;
  color: #d7e5ed;
  background: var(--crchu-navy);
  border: 0;
  text-align: center;
}
#footer a { color: #fff; }

.skip-link:focus, a:focus, button:focus { outline: 3px solid var(--crchu-turquoise); outline-offset: 3px; }

.front-page-button {
  display: none;
}

div.sidebar div.content {
  background-color: transparent;
  border: none;
}

div.sidebar div.content a {
  color: var(--crchu-navy);
}

div.sidebar div.content div.header {
  font-size: 1.2em;
}

div.sidebar div.content p {
  margin-top: 0;
}

a.flag-fr, a.flag-us {
  background-image: none;
  margin-left: 10px;
  border: none !important;
}

a.flag-fr:after {
  content: 'FR';
}

a.flag-us:after {
  content: 'EN';
}

#kb > li > i {
  background: url(../../images/folder-blue.32.png) top left no-repeat;
}

@media (max-width: 760px) {
  #wrapper { width: calc(100% - 16px); margin: 8px auto 20px; border-radius: 10px; }
  #header { min-height: 84px; padding: 16px; }
  #header #logo img { max-width: 78vw; max-height: 54px; }
  #nav, #header #nav { padding: 0 8px; }
  #nav li, #nav li a { float: none; display: block; width: 100%; }
  #nav li a { min-height: 44px; padding: 0 12px; }
  #content { padding: 22px 16px; }
  table.list, table.table { display: block; overflow-x: auto; }
  input[type="text"], input[type="email"], input[type="password"], select, textarea { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; }
}

@media (max-width: 760px) {
    #header #logo.crchu-brand {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        max-width: 100%;
    }

    #header #logo.crchu-brand .crchu-brand-logo img {
        max-width: 78vw;
        max-height: 54px;
    }

    .crchu-brand-title {
        padding-top: 10px;
        padding-left: 0;
        border-top: 2px solid var(--crchu-turquoise, #00abc4);
        border-left: 0;
        font-size: 1.1rem;
    }

}