/*
  Qualitrace - Theme Pro (no background images)
  - Keep same layout logic (header, toolbar icons, menu, center + right sidebar)
  - Full width, cleaner, modern blues
*/

/* -------------------- Reset -------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  border: 0;
}

hr {
  display: none;
}

tr.listehead th {
  cursor: pointer;
  height: 35px;
}

/* -------------------- Base -------------------- */
body {
  background: #e9eff7;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #1f2a44;
  margin-bottom: 30px;
}

a:hover {
  text-decoration: underline;
  color: #041643;
}

a {
  color: #aeb0b2;
  text-decoration: none;
}

input[type=image] {
  width: 40px !important;
  height: 40px !important;

}

.nbr {
  text-align: right;
}

/* Table row hover consolidated below */

tr.c {
  color: #f00;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="search"],
textarea,
select {
  background: #ffffff;
  border: 1px solid #cfd8ea;
  font: 13px Arial, Helvetica, sans-serif;
  color: #1f2a44;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all .15s ease;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 34px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #2f6fed;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .14);
}

input[type="button"],
input[type="submit"],
button {
  background: #2f6fed;
  border: 1px solid #2f6fed;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 6px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
  background: #234fb3;
  border-color: #234fb3;
}

/* -------------------- Main wrapper (Full width) -------------------- */
#content {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Remove old background blocks */
#page,
.page2,
#bg,
#bot_tb {
  background: none !important;
}

#main,
#main2,
#main3 {
  width: 100%;
  background: none;
}

#main3 {
  padding: 0 14px;
}

/* -------------------- Header / Top Bar -------------------- */
#logo {
  width: 100%;
  min-height: 46px;
  background: linear-gradient(180deg, #0f1f4a, #152c6a);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 4px 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#logo h1 {
  padding: 0;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: .4px;
}

#logo h2 {
  float: right;
  margin-right: 14px;
  padding-top: 0;
  font-size: 14px !important;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .6px;
}

#logo h3 {
  float: right;
  margin-right: 10px;
  padding-top: 0;
  font-size: 10px;
  color: #c9d7ff;
  text-transform: uppercase;
}

#logo a {
  color: #ffffff;
}

#logo a:hover {
  text-decoration: underline;
}

.lnkLogout {
  color: #ffb3b3 !important;
  font-weight: bold;
}

.lnkLogout:hover {
  color: #ffffff !important;
}

/* -------------------- Toolbar icons bar -------------------- */
div.barre {
  background: #ffffff;
  border: 1px solid #d9e3f3 !important;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 0 !important;
  box-shadow: 0 8px 22px rgba(16, 31, 74, .08);
}

/* Icons in toolbar */
div.barre table tr td {
  padding-right: 6px;
  vertical-align: middle;
}

div.barre table tr td img {
  width: 32px;
  height: 32px;
  margin: 0 4px;
  padding: 2px;
  border-radius: 6px;
  transition: all .2s ease;
}

div.barre table tr td:hover {
  background: #edf4ff;
  border-radius: 12px;
  cursor: pointer;
}

div.barre table tr td:hover img {
  transform: translateY(-1px);
}

/* Home icon on right */
div.barre span img {
  border-radius: 10px;

}

div.barre span img:hover {
  background: #edf4ff;
}

/* -------------------- Top Menu (no background image) -------------------- */
#menu {
  width: 100%;
  height: auto;
  background: linear-gradient(180deg, #1a2f72, #15275f);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 0;
  margin: 4px 0 0 0;
  box-shadow: 0 8px 20px rgba(16, 31, 74, .10);
}

#menu ul {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0 6px;
  flex-wrap: wrap;
}

#menu li {
  display: block;
}

#menu a {
  display: block;
  float: none;
  width: auto;
  height: auto;
  padding: 10px 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, .10);
  text-decoration: none;
  transition: all .15s ease;
}

#menu a:hover {
  background: rgba(255, 255, 255, .12);
  text-decoration: none;
}

/* -------------------- Center layout -------------------- */
#cent {
  margin-top: 0;
}

#st11 {
  width: calc(100% - 240px);
  float: left;
}

#st31 {
  width: 220px;
  float: right;
}

/* -------------------- Cards (Main & Sidebar) -------------------- */
.st1 {
  width: 100%;
  background: #ffffff;
  float: left;
  margin-bottom: 12px;
  border: 1px solid #d9e3f3;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(16, 31, 74, .08);
  /* overflow: hidden; Removed to allow form scrollbar */
}

.st3 {
  width: 100%;
  background: #ffffff;
  margin-bottom: 12px;
  border: 1px solid #d9e3f3;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(16, 31, 74, .08);
  /* overflow: hidden; Removed to allow form scrollbar */
}

/* Titles inside cards */
#cent .title,
.st3 .title {
  background: linear-gradient(180deg, #0b1c4aad, #1b3275);
  color: #ffffff;
  height: auto;
  min-height: 42px;
  padding: 10px 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#letitre {
  float: none;
}

/* Content padding */
#cent .middle_back {
  padding: 12px 12px 14px 12px;
}

.small_back {
  padding: 10px 10px 12px 10px;
}

.back {
  padding: 0;
}

.back ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.back ul li {
  padding: 7px 0;
  border-bottom: 1px dashed #e3ebf8;
}

.back ul li:last-child {
  border-bottom: 0;
}

.back ul li a {
  color: #1f2a44;
  font-weight: 700;
}

.back ul li a:hover {
  color: #2f6fed;
  text-decoration: none;
}

/* "Aujourd'hui" text */
.ft {
  display: block;
  color: #1f2a44;
  font-weight: 800;
  line-height: 1.6;
}

/* -------------------- Tables (clean) -------------------- */
table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  font-size: 12px;
}

/* Data tables hover highlight (User requested #9ca6eb) */
table.liste tr:hover td {
  background: #9ca6eb !important;
  color: #fff;
  /* White text for better contrast on this purple-blue */
}

/* -------------------- Calendar -------------------- */
#calendar table {
  width: 100%;
  text-align: center;
  table-layout: fixed;
  font-size: 10px;
}

#calendar th {
  padding: 5px 0;
  font-size: 9px;
  letter-spacing: -1px;
}

#calendar td {
  padding: 4px 0;
}

#calendar tbody td {
  border: 1px solid #edf2fb;
  border-radius: 4px;
}

#calendar #now {
  background: #2f6fed;
  border: 1px solid #2f6fed;
  font-weight: bold;
  color: #ffffff;
}

.calendar_title_month {
  font-size: 10px !important;
}

.calendar_title_left_arrow,
.calendar_title_right_arrow {
  width: 15px;
}

#calendar tfoot a {
  font-weight: bold;
}

/* -------------------- Footer -------------------- */
#footer {
  clear: both;
  padding: 14px 10px;
  background: transparent;
  text-align: center;
  margin-top: 10px;
}

#footer p {
  text-align: center;
  font-size: 11px;
  color: #6b7485;
  margin: 5px 0;
}

#footer a {
  color: #2f6fed;
}

#footer a:hover {
  color: #234fb3;
}

/* -------------------- Specific: #locataire form card -------------------- */
#locataire {
  width: 480px;
  margin: 16px auto;
  background: #fff;
  border: 1px solid #d9e3f3;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(16, 31, 74, .12);
  overflow: hidden;
}

#locataire th {
  background: linear-gradient(180deg, #27438f, #1b3275);
  color: #fff;
  padding: 10px 12px;
  font-size: 13px;
}

#locataire td {
  padding: 10px 12px;
}

#locataire input[type="text"],
#locataire select {
  width: 100% !important;
}

#locataire #fermer {
  float: right;
  cursor: pointer;
  opacity: .75;
}

#locataire #fermer:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* -------------------- Responsive -------------------- */
@media (max-width: 1100px) {
  #st11 {
    width: calc(100% - 200px);
  }

  #st31 {
    width: 180px;
  }
}

@media (max-width: 920px) {
  #main3 {
    padding: 10px 10px 0 10px;
  }

  #st11,
  #st31 {
    float: none;
    width: 100%;
  }

  #menu a {
    flex: 1 1 auto;
  }

  #locataire {
    width: 96%;
  }
}

.search-header-flex {
  background: #394a7c !important;
  border-radius: 8px 8px 0 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 5px 15px !important;
  width: 100% !important;
}

.search-title-group {
  display: flex !important;
  align-items: center !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.search-action-group {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
}

.search-buttons {
  display: flex !important;
  gap: 8px !important;
}

/* -------------------- Search Header Buttons -------------------- */
.search-fields-flex {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px 20px !important;
  padding: 15px 45px 15px 15px !important;
  align-items: center !important;
  background: #ffffff !important;
  border-bottom: none !important;
  /* Remove bottom border to tighten layout */
  border-radius: 0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.search-fields-container {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  background: #ffffff !important;
  position: relative !important;
  /* For floating submit icon */
  margin-bottom: 0 !important;
}

.search-submit-floating {
  position: absolute !important;
  bottom: 25px !important;
  right: 8px !important;
  z-index: 10 !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}

.search-submit-floating:hover {
  transform: scale(1.1) !important;
}

.field-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.field-group label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
  white-space: nowrap !important;
  min-width: 85px !important;
}

.search-actions-row {
  display: none !important;
  /* Removed redundant row */
}

.search-buttons {
  margin-left: auto !important;
  display: flex !important;
  gap: 10px !important;
}

.btn-header {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  padding: 6px 16px !important;
  border-radius: 6px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  cursor: pointer !important;
  margin-left: 8px !important;
  transition: all 0.2s ease !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.btn-header:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.btn-header:active {
  transform: translateY(0) !important;
}

/* --- Modern Flatpickr Theme (#394a7c) --- */
.flatpickr-calendar {
  background: #ffffff !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  padding: 5px !important;
  width: 315px !important;
}

.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #394a7c !important;
}

.flatpickr-months {
  background: #394a7c !important;
  border-radius: 8px 8px 0 0 !important;
  color: #fff !important;
  padding: 10px 0 !important;
}

.flatpickr-month {
  color: #fff !important;
  fill: #fff !important;
}

.flatpickr-current-month {
  font-size: 110% !important;
  font-weight: 600 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 600 !important;
  color: inherit !important;
  background: #394a7c !important;
  border: none !important;
  padding: 0 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0, 0, 0, 0.1) !important;
}

/* Ensure the dropdown arrow is white */
.flatpickr-current-month .flatpickr-monthDropdown-month {
  background-color: #394a7c !important;
  color: #fff !important;
}

.flatpickr-weekday {
  background: transparent !important;
  color: #64748b !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

.flatpickr-day {
  border-radius: 8px !important;
  color: #334155 !important;
  font-weight: 500 !important;
  margin: 2px !important;
  height: 38px !important;
  line-height: 38px !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

.flatpickr-day.today {
  border-color: #394a7c !important;
  color: #394a7c !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #394a7c !important;
  border-color: #394a7c !important;
  color: #fff !important;
  box-shadow: 0 4px 6px rgba(57, 74, 124, 0.3) !important;
}

.flatpickr-day:hover {
  background: #f1f5f9 !important;
  border-color: transparent !important;
  color: #1e293b !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #cbd5e1 !important;
}

.numInputWrapper:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Year input arrows (up/down) */
.numInputWrapper span {
  border-color: rgba(255, 255, 255, 0.3) !important;
  opacity: 1 !important;
}

.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown {
  opacity: 1 !important;
}

.numInputWrapper span.arrowUp:after,
.numInputWrapper span.arrowDown:after {
  border-bottom-color: #fff !important;
  border-top-color: #fff !important;
}

.numInputWrapper span:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.numInputWrapper span:hover:after {
  border-bottom-color: #fff !important;
  border-top-color: #fff !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
  color: #fff !important;
  fill: #fff !important;
  padding: 10px !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: #fff !important;
  stroke: #fff !important;
}

.flatpickr-prev-month svg path,
.flatpickr-next-month svg path {
  fill: #fff !important;
  stroke: #fff !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg,
.flatpickr-prev-month:hover svg path,
.flatpickr-next-month:hover svg path {
  fill: #fff !important;
  stroke: #fff !important;
}

/* -------------------- Flatpickr Scrollbar -------------------- */
.flatpickr-calendar ::-webkit-scrollbar {
  width: 6px !important;
  background: transparent !important;
}

.flatpickr-calendar ::-webkit-scrollbar-thumb {
  background: #ffffff !important;
  border-radius: 3px !important;
  border: 1px solid #394a7c !important;
  /* Adding border for contrast if on light bg */
}

/* For Firefox */
.flatpickr-calendar * {
  scrollbar-color: #ffffff transparent !important;
  scrollbar-width: thin !important;
}

/* Specific styles for year/month dropdown scrollbar */
.flatpickr-monthDropdown-months::-webkit-scrollbar {
  width: 8px !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.flatpickr-monthDropdown-months::-webkit-scrollbar-thumb {
  background: #ffffff !important;
  border-radius: 4px !important;
}

.flatpickr-monthDropdown-months::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 4px !important;
}

/* Firefox support for dropdown */
.flatpickr-monthDropdown-months {
  scrollbar-color: #ffffff rgba(0, 0, 0, 0.2) !important;
  scrollbar-width: thin !important;
}

.search-footer {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 8px 15px !important;
  background: #ffffff !important;
  border-top: 1px solid #f1f5f9 !important;
  font-size: 11px !important;
  color: #64748b !important;
}

.search-footer span {
  font-weight: 600 !important;
}

.field-group input[type='text'],
.field-group select {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  flex: 1 !important;
}

/* -------------------- Mobile Form Horizontal Scroll -------------------- */
@media (max-width: 1100px) {
  form {
    overflow-x: auto !important;
    width: 100% !important;
    display: block !important;
    -webkit-overflow-scrolling: touch;
  }

  .search-fields-container,
  .st1,
  .st3 {
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    /* Ensure it doesn't exceed viewport */
  }

  /* Force the table/content to be wide enough to trigger scrollbar */
  .search-fields-flex,
  table.formulaire {
    min-width: 1100px !important;
  }

  /* Also apply to search header flex containers inside forms */
  .search-header-flex {
    min-width: 1100px !important;
  }
}