/* ==========================================================================
   Summary

   1 = Basic Style
   2 = Copyright
   3 = Options
   4 = Upload
   5 = Terms of service
   6 = Install
   7 = Admin
   8 = Download page

   ========================================================================== */

   @font-face { font-family: txt; src: url(../../font/InstrumentSans-Regular.ttf); }
   @font-face { font-family: bld; src: url(../../font/InstrumentSans-Bold.ttf); }

  :root
  {
      --dark: rgb(35, 31, 32);
      --light: rgb(255, 255, 255);
      --red: rgb(227, 5, 24);
      --theme: rgb(7, 103, 126);
      --theme1: rgb(120, 166, 186);
      --theme2: rgb(89, 89, 89);
      --link: rgb(7, 103, 126);
  }

  b { font-family: bld; font-weight: normal; }

/* ==========================================================================
   1 = Basic Style
   ========================================================================== */

body {
  color: var(--dark);
  background-color: var(--light);
  font-family: txt;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
}

#content {
  padding: 40px 20px;
}

h1 a {
  display: block;
  width: 700px;
  margin: 40px auto 80px auto;
  text-align: center;
  text-decoration: none;
  cursor: pointer; 
  position: relative;
}

h1 a .logo_app {
  display: block;
  background: url(logo_app.png) no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: auto;
  padding-bottom: calc(115 / 1016 * 100%);
  margin-bottom: 10px;
}

h1 a center {
  color: var(--theme);
  font-family: txt;
  font-size: 22px;
  line-height: 30px;
}

h2 {
  text-align: center;
  color: var(--theme2);
}

fieldset {
  padding: 20px;
  margin: 0 auto;
  border-radius: 5px;
  width: calc(100% - 50px);
  max-width: 650px;
  border: 5px dashed var(--theme1);
  min-height: 240px;
  text-align: center;
  position: relative;
}

legend {
  padding: 10px;
  color: var(--theme2);
  display: block;
  min-width: 190px;
  max-width: 395px;
  font-size: 18px;
  line-height: 22px;
}

fieldset table {
  width: 100%;
}

table a {
  color: var(--link);
}

table a:hover,
table a:focus {
  text-decoration: none;
}


input[type="submit"] {
  padding: 5px 40px;
  margin: 20px;
  font-size: 14px;
  line-height: 18px;
  color: var(--light);
  background: var(--theme);
  border: 1px solid var(--theme);
  border-radius: 5px;
  cursor: pointer;
}

select,
input[type="text"],
input[type="password"] {
  padding: 5px;
  font-size: 14px;
  line-height: 18px;
  border: 1px solid var(--dark);
}


.inner {
  margin-top: 3em;
}

#upload fieldset {
  background: url(upload.svg) no-repeat center;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

#upload fieldset:hover {
  border-color: var(--theme);
}

#upload > form {
  text-align: center;
}

#upload p {
  margin: 0;
}

#file_select {
  position: relative;
  width: 100%;
  height: 256px;
  cursor: pointer;
  opacity: 0;
}

div.file-uploaded  {
    text-align: left;
    padding: 10px 5px;
}

div.file-uploaded > span:first-of-type  {
    font-family: bld;
}

#upload.file-selected #file_select {
  opacity: 1;
  padding: 4px 5px;
  width: calc(100% - 10px);
  height: unset;
  font-size: 14px;
  line-height: 18px;
}

#upload.file-selected fieldset {
  background-image: none;
}


/* ==========================================================================
   2 = Copyright
   ========================================================================== */

#copyright {
  text-align: center;
  font-size: 0.8em;
  color: var(--theme2);
  margin: 3em auto;
}

#copyright a {
  color: var(--theme2);
  text-decoration: none;
}

#copyright a:hover,
#copyright a:focus {
  text-decoration: underline;
}

/* ==========================================================================
   3 = Options
   ========================================================================== */

#options {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 90%;
}

#options tr { height: 2.7em; }

#option_table tr:first-child {
  width: 100%;
  height: 100%;
}

#option_table td {
  padding: 5px;
}

#option_table td:first-child {
  text-align: left;
  padding: 11px 5px;
}

#option_table td:has(#one_time_download) {
  text-align: left;
}

#option_table #one_time_download {
  height: 18px;
  width: 18px;
  margin: 5px 0;
}

#option_table #input_key {
  width: calc(100% - 12px);
}

#option_table #select_time {
  width: 100%;
}

#options input[type="submit"] {
  position: relative;
  margin: 20px auto;
}

/* ==========================================================================
   4 = Upload
   ========================================================================== */

#upload_finished,
#uploading,
.message,
.info,
.error {
  text-align: center;
  color: var(--theme2);
  padding: 0 40px;
}

#upload_finished > p:nth-child(1) {
  color: var(--theme);
  font-family: bld;
  font-size: 18px;
  line-height: 22px;
}

#upload_finished div p:nth-child(1) {
  font-family: bld;
}

#upload_finished a {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  text-decoration: none;
  color: var(--theme2);
  cursor: pointer;
}

#upload_finished a img {
  width: 24px;
  height: 24px;
  display: block;
  padding: 3px;
  cursor: pointer;
}

#upload_finished a span {
  padding: 6px 5px;
}

#upload_finished #preview_link_text {
  display: none;
}

#upload_finished span.sub {
  font-size: 11px;
  line-height: 14px;
}

#upload_finished #delete_link {
  padding: 5px 40px;
  margin: 20px;
  font-size: 14px;
  line-height: 18px;
  color: var(--light);
  background: var(--theme);
  border: 1px solid var(--theme);
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
}

#uploading a {
  font-family: bld;
  text-decoration: none;
  color: var(--theme2);
}

#uploading > p {
  margin: 6px 10px;
}

#uploading > div {
  margin: 6px 10px;
}

#uploaded_percentage {
  font-size: 22px;
  line-height: 30px;
  font-family: bld;
}

#upload_finished a:hover,
#uploading a:hover,
#upload_finished a:focus,
#uploading a:focus {
  text-decoration: underline;
}

.message,
.error {
  color: var(--red);
  font-style: italic;
  font-family: bld;
}

#upload_link_email {
  margin-left: 10px;
}

#upload_image_email {
  padding-left: 20px;
  padding-bottom: 15px;
  background: url(email.png) no-repeat;
}

#submit_delete_post table {
  width: 100%;
}

#submit_delete_post table td:first-child {
  padding: 6px 10px;
}

#jyraphe img {
  height: 78px;
  max-width: 100%;
}

/* ==========================================================================
   5 = Terms of service
   ========================================================================== */

textarea[readonly="readonly"] {
  border: 0;
  color: var(--theme2);
  font-family: txt;
  background: none;
  margin: auto;
  display: block;
}

textarea[readonly="readonly"] + p,
textarea[readonly="readonly"] + p + p {
  text-align: center;
  color: var(--theme2);
}

textarea[readonly="readonly"] + p a,
textarea[readonly="readonly"] + p + p a {
  font-family: bld;
  text-decoration: none;
  color: var(--theme2);
}

textarea[readonly="readonly"] + p a:hover,
textarea[readonly="readonly"] + p + p a:hover,
textarea[readonly="readonly"] + p a:focus,
textarea[readonly="readonly"] + p + p a:focus {
  text-decoration: underline;
}

/* ==========================================================================
   6 = Install
   ========================================================================== */

#install fieldset,
#install + fieldset {
  width: auto;
  max-width: 50em;
  border: 5px dashed var(--theme1);
}

#install table,
#install + fieldset table {
  width: 100%;
  border-collapse: collapse;
}

#install td,
#install + fieldset td {
  padding: 0.5em 1em;
  border-bottom: 0;
}

#install td:empty {
  width: 13.1em;
}

#install table form:nth-child(odd),
#install + fieldset tr:nth-child(odd) {
  background: var(--theme2);
}

#install fieldset > form {
  margin-top: 2em;
  text-align: center;
}

#install form {
  display: table;
  width: 100%;
}

#install td:last-child { text-align: left; }

#install .info { width: 19em; }

#install input[type="submit"] {
  min-width: 10.5em;
}

#install + fieldset table {
  font-size: 0.9em;
}

#install + fieldset td:first-child input[type="submit"] {
  background: none;
  padding: 0;
  color: var(--dark);
  font-family: bld;
  border-bottom: 0;
}

#install + fieldset td:first-child input[type="submit"]:hover,
#install + fieldset td:first-child input[type="submit"]:focus {
  text-decoration: underline;
}

/* ==========================================================================
   7 = Admin
   ========================================================================== */

#admin fieldset,
#admin + fieldset {
  width: auto;
  max-width: 60em;
  border: 5px dashed var(--theme1);
}

#admin table,
#admin + fieldset table {
  width: 100%;
  border-collapse: collapse;
  border-bottom: 2px solid var(--light);
}

#admin td,
#admin + fieldset td {
  padding: 0.5em 1em;
  border: 2px solid var(--light);
  border-bottom: 0;
}

#admin td:empty {
  width: 13.1em;
}

#admin table form:nth-child(odd),
#admin + fieldset tr:nth-child(odd) {
  background: var(--theme2);
}

#admin fieldset > form {
  margin-top: 2em;
  text-align: center;
}

#admin form {
  display: table;
  width: 100%;
}

#admin td:last-child { text-align: left; }

#admin .info { width: 19em; }

#admin input[type="submit"] {
  min-width: 10.5em;
}

#admin + fieldset table {
  font-size: 0.9em;
}

#admin + fieldset td:first-child input[type="submit"] {
  background: none;
  padding: 0;
  color: var(--dark);
  font-family: bld;
  border-bottom: 0;
}

#admin + fieldset td:first-child input[type="submit"]:hover,
#admin + fieldset td:first-child input[type="submit"]:focus {
  text-decoration: underline;
}

/* ==========================================================================
   8 = Download page
   ========================================================================== */

#self_destruct {
  font-family: bld;
  color: red;
  background-image: url('pixel_bomb.png');
  background-size: 40px 40px;
  background-repeat: no-repeat;
  padding-left: 40px;
  padding-top: 10px;
  padding-bottom: 10px;
}

#submit_download {
  display: block;
  margin: 30px auto;
}

/* ==========================================================================
   9 = delete
   ========================================================================== */

#submit_delete {
  display: block;
  margin: 30px auto;
}

@media (max-width: 768px) {
  
  h1 a {
    margin: 20px auto 40px auto;
    width: calc(100% - 40px);
  }

  h1 a .logo_app {
    padding-bottom: calc(115 / 1016 * (100% - 40px));
  }

  h1 a center {
    font-size: 14px;
    line-height: 18px;
  }

  #file_select {
    height: 165px;
  }

  legend {
    font-size: 14px;
    line-height: 18px;
    min-width: unset;
  }

  #upload fieldset {
    background: url(upload.svg) no-repeat 50% 70%;
  }

  #option_table td {
    display: block;
    padding: 5px;
    width: calc(100% - 10px);
  }

  #submit_delete_post table td:first-child {
    word-break: break-all;
  }
}

@media (min-width: 769px) {
  h1 a {
    width: 100%;
    max-width: 500px;
  }

  h1 a .logo_app {
    padding-bottom: calc(115 / 1016 * 100%);
  }
}

/* Style du toast */
  .toast {
      position: fixed;
      top: 20px;
      right: 20px;
      background: var(--theme);
      color: white;
      padding: 16px 24px;
      border-radius: 8px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
      display: flex;
      align-items: center;
      gap: 12px;
      animation: slideIn 0.3s ease-out;
      z-index: 1000;
  }

  .toast-icon {
      background: white;
      color: var(--theme1);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 18px;
  }

  .toast-content {
      text-align: left;
  }

  .toast-title {
      font-weight: bold;
      margin-bottom: 4px;
  }

  .toast-message {
      font-size: 14px;
      opacity: 0.9;
  }

  @keyframes slideIn {
      from {
          transform: translateX(400px);
          opacity: 0;
      }
      to {
          transform: translateX(0);
          opacity: 1;
      }
  }

  @keyframes slideOut {
      from {
          transform: translateX(0);
          opacity: 1;
      }
      to {
          transform: translateX(400px);
          opacity: 0;
      }
  }

  .toast.slide-out {
      animation: slideOut 0.3s ease-out forwards;
  }