@import url("reset.css");
*,
::before,
::after {
  box-sizing: border-box;
}
/* add resets here */

:root {
  /** 
    * these need to be the same as those defined in tailwind.config.js
    * NOTE - this is NOT the correct way to do this. Ideally Tailwind would be compiled at build time 
    * but we aren't using Tailwind properly yet
    **/
  --clr-50: hsl(225 70% 95%);
  --clr-100: hsl(225 70% 90%);
  --clr-200: hsl(225 70% 80%);
  --clr-300: hsl(225 70% 70%);
  --clr-400: hsl(225 70% 60%);
  --clr-500: hsl(225 70% 50%);
  --clr-600: hsl(225 70% 40%);
  --clr-700: hsl(225 70% 30%);
  --clr-800: hsl(225 70% 20%);
  --clr-900: hsl(225 70% 10%);

  --clr-accent: #fbd540;

  --clr-bg: rgb(241, 245, 249);
  --clr-text: #111;

  --clr-nav-bg: rgb(221, 220, 220);
  --clr-search-bg: var(--clr-nav-bg);
  --clr-search-text: #111;

  --bg-header: black;
  --bg-footer: #DDD;

  --btn-bg: var(--clr-400);
  --btn-bg-hover: var(--clr-600);
  --btn-border: transparent;
  --btn-txt: var(--clr-50);
  --btn-txt-hover: #FFF;
  --link-clr: rgb(204, 151, 5);
  --link-clr-hover: black;

  --box-border: #ddd;
  --box-bg: white;
  --box-table-head-bg: var(--clr-50);
  --box-table-head-clr: var(--clr-800);
  --box-table-bg-hover: rgb(243 244 246);

  --border-radius: 20px;

  --field-outline-offset: 2px;
  --field-bg: #eee;
  --field-clr: var(--clr-800);
  --field-border: #ccc;
  --field-border-focus: var(--clr-600);
  --select-arrow: var(--clr-500);
}
/* dark mode */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --clr-bg: hsl(225 40% 30%);
    --clr-text: #fff;
    /*
    --clr-900: hsl(225 40% 90%);
    --clr-800: hsl(225 40% 80%);
    --clr-700: hsl(225 40% 70%);
    --clr-600: hsl(225 40% 60%);
    --clr-500: hsl(225 40% 50%);
    --clr-400: hsl(225 40% 40%);
    --clr-300: hsl(225 40% 30%);
    --clr-200: hsl(225 40% 20%);
    --clr-100: hsl(225 40% 10%);
* /
    --box-border: #ffffff30;
    --box-bg: var(--clr-700);
    --box-table-head-bg: var(--clr-800);
    --box-table-head-clr: #ffffff90;
    --box-table-bg-hover: var(--clr-600);
  }
}
  */
html {
  scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  background-color: var(--clr-bg);
  color: var(--clr-text);
  transition: all 0.2s;

  font-family: system-ui;
  font-size: 1rem;
  line-height: 1.5;
}
body.dev::before {
  content :'DEV DEV DEV';
  font-family: 'Courier New', Courier, monospace  ;
  position: fixed;
  top: 50%;
  left:50%;
  translate: -50% -50%;
  color: red;
  font-size: 4rem;
  font-weight: 800;
 pointer-events: none;
 rotate: -45deg;
 opacity: .15;
 z-index: 9999;

}
body.login {
  display: grid;
  place-items: center;
}
img {
  display: block;
  max-width: 100%;
}
/* utiility classses */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.break-words {
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table td,table th {
  word-break: break-all;
  word-wrap: break-word;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@layer utilities{
  .hidden {
    display: none;
  }

  a {
    color: var(--link-clr);
  }
  a:hover {
    color: var(--link-clr-hover);
  }
  strong {
    font-weight: 700;
  }
  .flex {
    display: flex;
  }
  .space-between,
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .grid{
    display: grid;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .w-full {
    width: 100%;
  }
  .gap-2 {
    gap: 0.15rem;
  }
  .gap-2 {
    gap: 0.25rem;
  }
  .gap-4 {
    gap: 0.5rem;
  }
  .gap-6 {
    gap: 0.75rem;
  }
  .mb-2 {
    margin-block-end: 0.25rem;
  }
  .mb-4 {
    margin-block-end: 0.5rem;
  }
  .mb-6 {
    margin-block-end: 0.75rem;
  }
  .mt-2{
    margin-block-start: .25rem;
  }
  .mt-4 {
    margin-block-start: .5rem;
  }
  .mt-6 {
    margin-block-start: .75rem;
  }
  .my-2{
    margin-block: 0.25rem;
  }
  .my-4 {
    margin-block: 0.5rem;
  }
  .my-6 {
    margin-block: 0.75rem;
  }
  .my-l{
    margin-block: 1rem;
  }
  .my-xl{
    margin-block: 1.5rem;
  }
  .my-xxl{
    margin-block: 2rem;
  }

  .mr-2 {
    margin-inline-end: 0.25rem;
  }
  .mr-4 {
    margin-inline-end: 0.5rem;
  }
  .mr-6 {
    margin-inline-end: 0.75rem;
  }
  .ml-2 {
    margin-inline-start: 0.25rem;
  }
  .ml-4 {
    margin-inline-start: 0.5rem;
  }
  .ml-6 {
    margin-inline-start: 0.75rem;
  }
  .p-2 {
    padding: 0.25rem;
  }
  .p-4 {
    padding: 0.5rem;
  }
  .rotate-45 {
    rotate: 45deg;
  }
  .rotate-90 {
    rotate: 90deg;
  }
  .rotate-180 {
    rotate: -180deg;
  }
  .f-bold {
    font-weight: 700;
  }
  .items-center {
    align-items: center;
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .align-left{
    margin-inline-end:auto;
  }
  .align-right{
    margin-inline-start:auto;
  }
  .text-red-500 {
    color: red;
  }
  .text-green-500 {
    color: green;
  }
  .text-blue-500 {
    color: rgb(39, 134, 202);
  }

  .flex-wrap{
    flex-wrap: wrap;

  }
}
/* end utility classes */
label {
  cursor: pointer;
}

.wrapper {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 60px 60px  auto 40px;

  & > * {
    /*outline:1px dashed red;*/
  }
}

header {
  /*
  position: sticky;
  top: 0;
  width: 100%;
  */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background-color: var(--bg-header);
  border-bottom: 1px solid #e2e8f0;
  padding: 0.5rem 2rem 0.5rem 1rem;
  z-index: 10;
}
header > * {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
}
header > .logo img {
  height: 40px;
}
header a:hover {
  color: white;
}
header > .buttons > * {
  border-radius: 5px;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-content: center;
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
  font-size: 0.75rem;
  text-align: center;
  color: #3b82f6;
  background-color: rgba(255 255 255 / 1);
  text-decoration: none;
  border: none;
  outline: none;
}
header > .buttons > *:focus-visible,
header > .buttons > *:hover {
  background-color: #2563eb;
  color: #ffffff;
}
header > .buttons > .btn-nav-toggle {
  display: none;
}
/*
header > .buttons > .btn-nav-toggle {
  display: grid;
  /* we are not going to use this for now but I will leave it here for future use * /
  display: none;
}
header > .buttons > .btn-nav-toggle > span {
  grid-area: 1 / 1;
  transition: scale 300ms ease-in-out;
}
header > .buttons > .btn-nav-toggle > span:first-child {
  scale: var(--_nav-toggle-open, 1);
}
header > .buttons > .btn-nav-toggle > span:last-child {
  scale: var(--_nav-toggle-closed, 0);
}
header > .buttons > .btn-nav-toggle:hover,
header > .buttons > .btn-nav-toggle.open {
  --_nav-toggle-open: 0;
  --_nav-toggle-closed: 1;
}
@media (min-width: 600px) {
  /* hamburger menu button * /
  header > .buttons > .btn-nav-toggle {
    display: none;
  }
}
  */

nav {
  position: relative;
  background-color: var(--clr-nav-bg);
  border-bottom: 1px solid white;
  z-index: 99;
  padding-block: 1rem;
}
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
}
nav a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25em 0.75em;

  color: var(--clr-600);
  text-decoration: none;
  font-size: 0.75rem;
  transition: 300ms ease-in-out;
  /*border: 1px solid var(--clr-300);*/
  background-color: transparent;
  border: 1px solid var(--clr-300);

  border-radius: 5px;
  outline: none;

}
nav a:is(:focus-visible, :hover, .active) {
  background-color: var(--clr-800);
  color: white;
}

nav span:last-child {
  display: none;
}
@media (min-width: 700px) {
  nav span:last-child {
    display: block;
  }
}

main {
  padding-block: 1rem;
  width: min(calc(100% - 4rem), 1200px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /*outline: 1px dashed red;*/
}

footer{
  padding-block: .5rem;
  border-top: 1px solid #ccc;
  background: var(--bg-footer);
  display: flex;
  justify-content: space-between;
}
main.login > footer{
  background: transparent;
  border-top:none;
  justify-content: center;
}
footer > ul{
  font-size: .7rem;
  list-style: none;
  width: min(calc(100% - 4rem), 800px);
  margin-inline: auto;
  padding: 0;
  display: flex;
  justify-content: center;
}
footer > ul > li {
  display: flex;
  align-items: center;
  gap: .5rem;
}

a.link-external {
  position: relative;
  display: flex;
  gap: 0.25rem;
  text-decoration: none !important;
}
a.link-external::before {
  content: "\e89e";
  display: inline-block;
  font-family: "Material Symbols Outlined";
  font-size: 0.8rem;

  text-decoration: none;
}
/* NOTIFICATION / ALERTS */
.notification {
  position: relative;
  padding: 1em ; /* extra left padding for icon */
  margin-bottom: 0.5rem;
  transition: 300ms ease-in-out;
  font-size: .8rem;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: .5rem;
  line-height: 1.5;
  border-radius: 5px;
  &.hidden{
    display: none;
  }

/* Add icon via pseudo-element */
  &::before {
    font-family: 'Material Symbols Outlined';
    font-weight: bold;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.2em;
  }

  & [data-close] {
    position: absolute;
    top: .5rem;
    right: .5rem;
    padding: 0;
    border: none;
    background: none;
    & > span {
      transition: rotate 300ms ease-in-out;
      transform-origin: center;
    }
  }

  
}


.notification
  [data-close]:focus-visible
  > span
  .notification
  [data-close]:hover
  > span {
  rotate: 90deg;
}
.notification.alert {
  border: 1px solid rgba(249, 115, 115, 0.5);
  background: rgba(249, 115, 115, 0.15);
  &::before {
    content: "error"; /* ⚠️ or other suitable icon */
    color: rgba(249, 115, 115,1);
  }
}
.notification.info {
  border: 1px solid rgba(143, 202, 238, 1);
  background: rgba(143, 202, 238, 0.2);
  &::before {
    content: "info";
    color: rgba(143, 202, 238, 1);
  }
}
.notification.success {
  border: 1px solid rgba(167, 248, 189, 0.9);
  background: rgba(167, 248, 189, 0.2);
  &::before {
    content: "check_circle";
    color: rgba(167, 248, 189, 1);
  }
}
.notification.inst {
  border: 1px solid rgba(112, 112, 34, 0.9);
  background: rgba(248, 248, 167, 0.4);
  &::before {
    content: "info"; /* you can also use "lightbulb" for instruction */
    color: rgba(112, 112, 34, 0.9);
  }
}
.notification.note{
  display: grid;
  border: 1px solid rgba(248, 248, 167, 1);
  background: rgba(248, 248, 167, 0.4);
  &::before {
    content: "info"; /* you can also use "lightbulb" for instruction */
       color: black;

;
  }
}





.notification ul {
  list-style: disc;
  margin: 10px 0 10px 20px;
}
.notification p  {
  margin-block: 0;
  &+p{
    margin-block: 0 0.5rem;
  }
}
h1 {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
h2 {
  width: 100%;
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
h3 {
  & > a {
    text-decoration: none;
  }
}
.loading-mask {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 9999;
}
.loading-mask::after {
  content: "cargando...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
}
.box {
  background: var(--box-bg);
  /*border: 1px solid var(--box-border);*/
  border-radius: var(--border-radius);
  padding: 1.5rem; /*p-6*/
  margin-bottom: 1rem;
}

input.date-picker {
  max-width: 200px;
}
.search-wrapper {
  width: 100%;
  margin: -1rem auto 0;
  position: relative;
  z-index: 1;
}

.search {
  background-color: var(--clr-search-bg);
  padding: 1.5rem;
  color: var(--clr-search-text);
  transition: all 500ms ease-in-out;
  z-index: -1;
  border-radius: 0 0 0 var(--border-radius);
}
.search hr {
  border: 1px solid #ccc;
  border-bottom: none;
}
.btn-toggle-search {
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 0;
  padding:.5em;
  background-color: var(--clr-search-bg);
  color: var(--clr-search-text);
  display: grid;
  place-items: center;
  border: none;
  outline: none;
  transform: translateY(2.5rem);
  border-radius: 0 0  10px 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  & > span{
    transition: rotate 150ms ease-in-out 500ms;
  }
  &:focus-within {
    
  }
}
.slide-up {
  margin-top: -100%; /* not overly convinced by this method*/

  & .btn-toggle-search > :nth-child(2){
    rotate: 180deg
  }
}

.dark ._search {
  background-color: var(--clr-800);
  color: white;
}
._search h3,
.box h2 {
  font-weight: 500;
  font-size: 1rem;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--box-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #222;
  & > * {
    /*outline: 1px dashed red;*/
  }
}

.btn-see-more {
  border: 1px solid var(--clr-500);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  background-color: transparent;
  width: 60px;
  margin-inline: auto;
}
/* boxes with tables */
.box-table {
  overflow: auto;
  /*border: 1px solid var(--box-border);*/
  border-right: none;
  border-bottom: none;
  /*border-radius: var(--border-radius);*/
}
/*
.box-table h3 {
  margin: 0;
  padding-block: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  & ~ h3 {
    margin-block-start: 0.5rem;
  }
}
*/
.box-table table {
  table-layout: fixed;
  min-width: 100%;
  width: 100%;
  white-space: nowrap;
  font-size: 0.8rem;
  border-collapse: separate; /* border-separate */
  border-spacing: 0px 0px; /* border-spacing-0*/
  border-left: 1px solid var(--box-border);
}
.box-table table a {
/*  text-decoration: underline;*/
}
.box-table thead {
  /*text-transform: uppercase;*/
  color: var(--box-table-head-clr);
  font-weight: 300;
  font-size: 0.8rem;
}

.box-table tfoot td {
  font-weight: 700;
  background-color: var(--bg-footer);
}

.box-table :where(td, th) {
  /* width: fit-content; */
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--box-border);
  border-left: none;
  border-top: none;
  transition: background-color 150ms ease-in-out;
}

.box-table tr {
  transition: all 300ms ease-in-out;
}
tr.totals > td:not(:empty) {
  font-weight: 600;
  background-color: rgb(254, 254, 224);
}
td.total{
  font-weight: 600;
}
.box-table th {
  border-color: #ffffff70;
  background: var(--box-table-head-bg);
  font-size: 0.8rem;
  font-weight: 300;
}
.box-table th:last-child {
  border-right-color: var(--box-border);
}
.box-table th._drag {
  background-color: transparent;
}
.box-table tr:hover td {
  background-color: var(--box-table-bg-hover);
}
.box-table tr.modified td {
  background-color: rgba(247, 181, 181, 0.155);
}
.box-table ._img,
.box-table ._state {
  width: 80px;
  text-align: center;
}
.small-screen-hidden {
  display: none;
}
@media (min-width: 720px) {
  .small-screen-hidden {
    display: block;
  }
  .box-table .small-screen-hidden {
    display: table-cell;
  }
}

.box-table ._drag {
  width: 30px;
  cursor: row-resize;
  text-align: center;
}
.box-table ._id {
  width: 60px;
  text-align: center;
}
.box-table ._counter {
  width: 60px;
  text-align: center;
}
.box-table ._options {
  min-width: 40px;
  text-align: center;
}

._options > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}
._options a.material-symbols-outlined {
  border: 1px solid #ccc;
  font-size: 1rem;
  text-decoration: none;
  padding: 0.25rem;
  border-radius: 5px;
  transition: 300ms ease-in-out;
}
._options a.material-symbols-outlined:hover {
  border-color: #666;
}
.box-table ._options > div {
  display: grid;
  grid-auto-columns: minmax(30px, 1fr);
  grid-auto-flow: row;
  gap: 0.5rem;
}
@media (min-width: 800px) {
  .box-table ._options > div {
    grid-auto-flow: column;
    gap: 0.25rem;
  }
}
.box-table ._options > div > * {
}
.box-table ._options > div > * {
  transition: 150ms ease-in-out;
  font-size: 1rem;
  display: grid;
  place-content: center;
}
.box-table ._options a {
  text-decoration: none;
}
.box-table ._options a:hover {
  transform: scale(125%);
}
.box-table ._options:focus-within {
  /* outline: none; */
}

.box-table .list-buttons{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  & > *{

   }
}

/* radio switches */
label._switch {
  display: block;
  /*margin-inline: auto;*/
  border-radius: 999px;
  min-width: 2.5rem;
  max-width: 2.5rem;
  height: 1.25rem;
  cursor: pointer;
  position: relative;
  background: #ddd;
  border: #ffffff50;
  transition: scale 150ms ease-in-out;
}
label._switch:hover {
  scale: 1.15;
}
label._switch > span {
  content: "";
  position: absolute;
  border-radius: 50%;
  height: 1rem;
  width: 1rem;
  background: #ff000050;
  left: 0.175rem;
  top: 0.15rem;
  transition: translate 150ms ease-in-out;
}

label._switch > input:checked ~ span {
  background: green;
  translate: 1.1rem 0;
}
label._switch > input:disabled ~ span {
  opacity: 0.4;
}

.fields {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px dashed var(--box-border);
  padding-block-end: .5rem;
  font-size: .85rem;
}

/* top margin on all expcept first*/
.fields + .fields {
  margin-top: .5rem;
}
.fields > .notification{
  flex: 0 0 100%;
}
.fields label {
  text-transform: capitalize;
  font-size: .8rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: #666;
  cursor: auto;
}
.fields label button {
  color: var(--link-clr);
}

.search-wrapper .fields{
  display: grid;
  grid-template-columns: 140px 1fr;
  @media (width < 600px){
    grid-template-columns: 1fr;
  }
  & > :nth-child(2) {
    width:fit-content;
  }
}
select,
textarea,
input,
button {
  border-radius: 5px;
  background-color: var(--field-bg);
  color: var(--field-clr);
  border: 1px solid var(--field-border);
  outline: none;
  padding: 0.5rem 1rem;
  width: 100%;
  max-width: 300px;
  min-width: 0;
  transition: 150ms ease-in-out;
}
button {
  width: fit-content;
  cursor: pointer;
}

label._switch:focus-within,
textarea:focus-within,
input:focus-within,
select:focus-within,
button:focus-within,
.btn:focus-within {
  outline-offset: var(--field-outline-offset);
  outline: 1px solid var(--field-border-focus);
  /* border: 1px solid var(--field-border); */
}



textarea:disabled,
select:disabled,
input:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fields-data,
.fields-flex {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: row;
  gap: 1rem;
  &.required label{
    color: red;
  }
}
.fields:has(input:not([type="date"])[required])::after {
    content: "*";
    color: red;
    margin-left: 2px;
}
.fields-data label {
  flex: 0 0 80px;
}
.fields-data .data {
  font-weight: 600;
}
.fields__radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.fields__radio label {
  flex: 0 0 40px !important;
  display: inline-block;

  margin: 0;
  margin-bottom: 0;
}
.fields-buttons {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 2rem;
  border-bottom: none;

  & .btn{
    background-color: var(--clr-accent);
    color: var(--clr-600);
    
  }
  & .btn:not(:disabled):hover{
    background-color:var(--clr-600);
    color: white;
  }

}
@media (min-width: 800px) {
  .fields {
    flex-direction: row;
    align-items: center;
  }
  .fields > :first-child:not(:is(button, a)) {
    flex: 0 0 160px;
  }
}
/* buttons */

.btn {
  cursor: pointer;
  border-radius: .25em;
  padding: 0.5em .75em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  background-color: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--btn-txt);
  transition: 150ms ease-in-out;
  white-space: nowrap;
  text-decoration: none;
  font-size: 0.8rem;
}
.btn-large{
  font-size: 1rem;
}
.btn-small {
  font-size: 0.7rem;
}
.btn.current{
  outline: 1px solid var(--clr-700);
  outline-offset: 2px;
}
.btn:not(:disabled):hover {
  background: var(--btn-bg-hover) ;
  color: var(--btn-txt-hover);
}
.btn-icon {
  display: grid;
  place-content: center;
  padding: 0.5em;
  background:#DDD;
  color: #111;
}
.btn > span,
.btn-icon > span {
  padding: 0;
  margin: 0;
  transition: 150ms ease-in-out;
  &.material-symbols-outlined{
    font-size: 1rem;
  }
}
.btn-large > span{
  font-size: 1.2rem;
}

.btn-green {
  background: green !important;
  color: white !important;
}
.btn-green:not(:disabled):hover {
  background: rgb(1, 86, 1) !important;
  color: white !important;
}
.btn-gray {
  background: rgba(204, 202, 202, 0.5) !important;
  color: #333;
}
.btn-gray:not(:disabled):hover {
  background: rgba(204, 202, 202, 1) !important;
  color: #333;
}

.btn-red {
  background: rgb(249, 0, 0) !important;
  color: white !important;
}
.btn-red:not(:disabled):hover {
  background: rgb(142, 2, 2) !important;
}

.btn-blue {
  background: var(--clr-500) !important;
  color: white !important;
}
.btn-blue:not(:disabled):hover {
  background: var(--clr-700) !important;
  color: white !important;
}

.btn-grey {
  background: #DDD !important;
  color: #111 !important;
}
.btn-grey:not(:disabled):hover {
  background: #CCC !important;
  color: #111 !important;
}
.btn-reset{
  background: var(--clr-200) !important;
  color: var(--clr-900) !important;
}
.btn-reset:not(:disabled):hover {
  background: var(--clr-500) !important;
  color: white !important;
}


[type="button"].btn,
[type="reset"].btn,
[type="submit"].btn,
button.btn {
  /*background-color: inherit; /* overwrite Tailwind defaults*/
}
button.btn:disabled {
  opacity: 0.5;
}


button.btn-terms{
  /* remove all styling and make it look like a link */
  background-color: transparent;
  border: none;
  color: var(--link-clr);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}


select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
}
select::-ms-expand {
  display: none;
}

.select {
  
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  background-color: white;

  min-width: 20ch;
  max-width: 60ch;
}
.select select {
  width: 100%;
  padding-right: 2.5rem;
}
.select select,
.select::after {
  grid-area: select;
}
/* drop-down arrow */
.select:not(._select--multiple)::after {
  content: "";
  justify-self: end;
  margin-right: 1rem;
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  -webkit-clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

select[multiple] {
  padding-right: 0;
  /*
   * Safari will not reveal an option
   * unless the select height has room to 
   * show all of it
   * Firefox and Chrome allow showing 
   * a partial option
   */
  height: 20rem;
}
select[multiple] option {
  white-space: normal;
  outline-color: var(--select-focus);
}
select option:disabled {
  text-decoration: line-through;

  opacity: 0.7;
}

.select--disabled {
  cursor: not-allowed;
  background-color: #eee;
  background-image: linear-gradient(to top, #ddd, #eee 33%);
}

.checklist li {
  font-size: .8rem;
  color: red;
  position: relative;
}
.checklist li.ok {
  list-style: none;
  color: green;
}
.checklist li.ok::before {
  content: "\2713";
  color: green;
  position: absolute;
  left: -1rem;
}
.checklist li.alert {
}

.note {
  color: green;
  font-size: 0.7rem;
  display: inline-block;
  &.important {
    color: red;
  }
}
/* dev notes */
.notes ul {
  color: green;
  list-style: disc;
  margin: 10px 0 10px 20px;
}

/* modal windows */
:modal {
  border-radius: 5px;
  padding: 2.5rem 2rem;
  margin: auto;
  height: fit-content;
}
:modal::backdrop {
  background-color: #022834;
  opacity: 0.9;
}
:modal[open] {
  animation: fade-in 1000ms forwards;
}
:modal[open]::backdrop {
  animation: fade-in 400ms forwards;
}
/*
:modal header {
  display: flex;
  justify-content: space-between;
}
*/
:modal button.dialog-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: none;
}

/* CHARTS */
.chart-container {
  width: 100%;
  max-height: 400px;
}
.weekend {
  background-color: #eef4e1;
}

.list-product-info {
  display: grid;
  grid-template-columns: 80px auto;
  font-size: 0.7rem;
}
.list-product-info h3 {
  grid-column: 1 / -1;
  font-size: 1rem;
}
.list-product-info > label {
  opacity: 0.7;
}
.list-product-info > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* LOGIN */
.login {
  width: min(100% - 2rem, 400px);
  background-color: white;
  margin: 2rem auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: var(--border-radius);
}
.login > header {
  justify-content: start;
  border-radius: calc(var(--border-radius) - 1rem);
  overflow: hidden;
}

.login .box {
  background-color: white;
  margin: 0;
}
/*
.login .btn-icon {
  background-color: #EEE;
}
*/
.login .fields{
  flex-direction: row;
}
.login .fields > :first-child {
  font-size: 0.9rem;
}
.login input{
  width:100%;
}
.login > footer {
  text-align: right;
  font-size: 0.8rem;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-auto-flow: dense;
  gap: 2rem;
  margin-block-end: 1rem;
  align-items: start;
}
.cols-2 {
  grid-column: span 2;
}
.cols-3 {
  grid-column: span 3;
}
.cols-4 {
  grid-column: span 4;
}
.rows-2 {
  grid-row: span 2;
}
.rows-3 {
  grid-row: span 3;
}
.rows-4 {
  grid-row: span 4;
}
@media (max-width: 768px) {
  .cols-2,
  .cols-3,
  .cols-4 {
    grid-column: span 1;
  }
}
.dashboard-item {
  background-color: white;
  border: 1px solid var(--box-border);
  border-radius: var(--border-radius);
  padding: 1rem;
}
.dashboard-item > h2 {
  font-size: 1rem;
  margin: 0;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid #ccc;
}
.widget {
  background: rgb(255, 255, 255);
  /*border: 1px solid var(--box-border);*/
  border-radius: var(--border-radius);
  padding: 1rem;
  font-size: 0.85rem;
  &.alert{
    grid-column: 1 / span 2;
    background: rgba(249, 115, 115, 0.15);
    & ul{
      display: grid;
      gap: .75rem;
    }
  }
}
.widget > h2 {
  font-size: 1rem;
  margin: 0;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid #ccc;
}
.widget > h3 {
  font-size: .9rem;
  font-weight: 400;

}
.widget .widget-counter {
  text-align: center;
  font-size: 0.9rem;
  color: var(--clr-400);
  display: grid;
  place-content: center;
  gap: 0;
}
.widget .widget-counter span {
  font-size: 2rem;
  font-weight: 600;
}

.widget ul {
  padding: 0 0 0 1rem;
}
.widget li.done {
  color: green;
  text-decoration: line-through;
}
.widget li.working {
  color: blue;
  font-style: italic;
}
.widget .material-symbols-outlined {
  font-size: 1rem;
}
.widget table {
  width: 100%;
}
.animated-row {
  transition: height 500ms ease-in-out;
  transition-behavior: allow-discrete;
  display: grid;
  grid-template-rows: 0fr;
  animation: reveal-content 1s ease-in-out forwards;
}
@keyframes reveal-content {
  to {
    grid-template-rows: 1fr;
  }
}
.animated-row-inner {
  overflow: hidden;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  gap: .5rem;
}
.pagination > * {
  
  padding: 0.5em;
  font-size: .9rem;
  width: 32px;
  border-radius: 3px;
  cursor: pointer;
  display: grid;
  place-content: center;
  text-decoration: none;

  transition: background-color 150ms ease-in-out;
  &:not(.ellipses){
border: 1px solid var(--clr-500);
  }
}
.pagination > span:not(.ellipses),
.pagination > *:hover {
  background-color: var(--clr-500);
  color: white;
}


.merchant-select  .select select{
  background-color: white;
}

/* spinner */
.spinning-around{
  animation: spinning-around 1s infinite linear;
}
@keyframes spinning-around {
   to { rotate: 360deg; }
}

.payment-methods{
  gap: 1rem;
  border:none;
  padding: 2rem;
  margin: 0;
  display: grid;
  --grid-cols: 2;

  @media( width > 768px){
      &:has(>label:nth-of-type(3)){
        --grid-cols: 3;
    }
  }
  grid-template-columns: repeat(var(--grid-cols),1fr);
}

label.radio-button{
  
  text-align: center;
  display: grid;
  place-content: center;
  padding: .75rem;
  background-color: var(--clr-50);
  border-radius: 3px;
  text-wrap: balance;
  font-size: 1rem;
  transition: 150ms ease-in-out;
  text-transform: capitalize;
  &:hover{
    background-color: var(--clr-400);
    color: white
  }
}
/* checked radio button label*/
.payment-methods input[type="radio"]:checked + label.radio-button{
    background-color: var(--clr-600);
    color: white;
}
.payment-methods input[type="radio"]:focus-visible + label.radio-button{
    outline: 1px dashed var(--clr-500);
    outline-offset: 4px;
}
.payment-methods input[type="radio"]:disabled + label.radio-button{
    opacity: .5;
}





/* Overlay layer */
  #loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    display: none; /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  /* Spinner */
  #loadingOverlay::after {
    content: "";
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top: 4px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }



/* Pre-billable rows: subtle gray */
tr.non-billable {
    color: #555;
    background-color: #f9f9f9;
    opacity: .75;
    &.weekend{
      background-color: #f2f2f2;
    }
}

/* Separator row between pre-billable and billable */
tr.billable-break td {
    height: 20px;
}

/* Pre-billing badge */
.non-billable-badge {
    display: inline-block;
    background-color: #f5d77d;
    color: #333;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    float:right;
}