@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer components {
  .btn {
    @apply py-2 px-4 rounded-lg;
  }
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white;
  }
  .myform {
  }
  h3 {@apply text-xl font-semibold text-gray-900 dark:text-white;}
}

@layer utilities {
  /* must be in utilities, otherwise md: dark: etc. don't fully function */
  .bg-sokkeli-green {
    background-color: #7bc143;
  }
  .mysubmit {@apply text-white bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:focus:ring-blue-800}
  .myalert {@apply w-full border-2 px-4 py-3 mb-4 rounded}
  .myalert_green {@apply bg-green-100 border-green-300 text-green-700}
  .myalert_red {@apply bg-red-100 border-red-300 text-red-700}
  .mylabel {@apply block mb-2 text-sm font-medium}
  label.required:after {content:"*"}
  .mylabel_success {@apply text-gray-900 dark:text-white}
  .mylabel_error {@apply text-red-700 dark:text-red-500}
  .myinput {@apply block w-full p-1.5 border text-sm text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-300 dark:focus:border-blue-300}
  .myinput-freesize {@apply p-1.5 border text-sm text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-300 dark:focus:border-blue-300}
  .pricetable-input {@apply p-1.5 border text-sm text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-300 dark:focus:border-blue-300}
  .filter-input-field {@apply block w-full p-1.5 border text-sm text-gray-900 rounded-t-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-300 dark:focus:border-blue-300;
    max-width:200px;}
  .myinput_success {@apply bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 placeholder-gray-500 dark:placeholder-gray-500 }
  .myinput_error {@apply bg-red-50 dark:bg-red-700 border-red-300 dark:border-red-600 text-red-900 placeholder-red-500 dark:placeholder-red-500 }
  .myselect {@apply text-sm text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500}
  .myfieldhelp {@apply mt-2 text-sm text-gray-800 dark:text-gray-300}
  .myfieldhelp_success {@apply text-gray-400 dark:text-gray-600}
  .myfieldhelp_error {@apply text-red-900 dark:text-red-100}
  .mycheckbox {@apply w-5 h-5 mr-2 border border-2 border-gray-300 rounded bg-gray-50 focus:ring-4 focus:ring-blue-300 dark:bg-gray-300 dark:border-gray-100 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800}
  .mycheckboxlabel {@apply ms-2 text-sm font-medium text-gray-900 dark:text-gray-300}
  .mysubmit {@apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800}
  .myinput-w200 {max-width:200px;}
  .myform input[type='checkbox'] {@apply pe-4}

}

main a.text-link {
  text-decoration: underline;
  @apply text-blue-700 dark:text-blue-300;
}
main a.text-link-blue {
  text-decoration: underline;
  @apply text-blue-700 dark:text-blue-300;
}
main a.text-link-red {
  text-decoration: underline;
  @apply text-red-700 dark:text-red-400;
}

/* orders table */
tr.hilight td {	background-color: rgb(245 158 11);}

/* doc_engine */
.markdown-document p, .markdown-document ul, .markdown-document ol { @apply mt-2 }
.markdown-document h1 { @apply  text-4xl font-bold mt-6 }
.markdown-document h2 { @apply  text-3xl font-bold mt-4 }
.markdown-document h3 { @apply text-2xl font-semibold  mt-3 }
.markdown-document h4 { @apply text-lg font-semibold mt-2 }
.markdown-document h5 { @apply text-base italic mt-2 }
.markdown-document ul, .markdown-document ol {
    display: block;
    list-style: disc outside none;
    margin: 1em 0;
    padding: 0 0 0 40px;
}
.markdown-document ol { list-style-type: decimal; }
.markdown-document li { display: list-item; }
.markdown-document ul ul, .markdown-document ol ul {
    list-style-type: circle;
    margin-left: 15px;
}
.markdown-document ol ol, .markdown-document ul ol {
    list-style-type: lower-latin;
    margin-left: 15px;
}

/* doc_engine ends */

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */