:where(html) {
  --size-0: .125rem;
  --size-1: .25rem;
  --size-2: .5rem;
  --size-3: .75rem;
  --size-4: 1rem;
  --size-5: 1.25rem;
  --size-6: 1.5rem;
  --size-7: 1.75rem;
  --size-8: 2rem;
  --size-9: 4rem;
}
:where(html) {
  --ratio-square: 1;
  --ratio-landscape: 4/3;
  --ratio-portrait: 3/4;
  --ratio-widescreen: 16/9;
  --ratio-ultrawide: 18/5;
  --ratio-golden: 1.6180/1;
  --ratio-backdrop: 16/7;
}

/* Deep-purple Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --primary: hsla(352, 50%, 50%, 1);
  --primary-hover: hsla(352, 50%, 64%, 1);
  --primary-focus: hsla(352, 50%, 50%, .25);
  --primary-inverse: #FFF;
}

/* Deep-purple Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: hsla(352, 50%, 50%, 1);
    --primary-hover: hsla(352, 50%, 64%, 1);
    --primary-focus: hsla(352, 50%, 50%, 0.25);
    --primary-inverse: #FFF;
  }
}

/* Deep-purple Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary: hsla(352, 50%, 50%, 1);
  --primary-hover: hsla(352, 50%, 64%, 1);
  --primary-focus: hsla(352, 50%, 50%, .25);
  --primary-inverse: #FFF;
}

/* Deep-purple (Common styles) */
:root {
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);

  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

textarea { resize: vertical }


.w-0 { width: var(--size-0) }
.w-1 { width: var(--size-1) }
.w-2 { width: var(--size-2) }
.w-3 { width: var(--size-3) }
.w-4 { width: var(--size-4) }
.w-5 { width: var(--size-5) }
.w-6 { width: var(--size-6) }
.w-7 { width: var(--size-7) }
.w-8 { width: var(--size-8) }
.w-9 { width: var(--size-9) }

.h-0 { height: var(--size-0) }
.h-1 { height: var(--size-1) }
.h-2 { height: var(--size-2) }
.h-3 { height: var(--size-3) }
.h-4 { height: var(--size-4) }
.h-5 { height: var(--size-5) }
.h-6 { height: var(--size-6) }
.h-7 { height: var(--size-7) }
.h-8 { height: var(--size-8) }
.h-9 { height: var(--size-9) }

form div.grid > div:has(input[type="submit"]) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end
} 

.grid.center { align-items: center }

.auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--size-4)
}

.btn-ico { width: 2rem; height: 2rem; padding: 0 }
.warn { margin-block: var(--size-4); padding-inline: var(--size-2); padding-block: var(--size-1); color: #fff; background-color: var(--del-color); border-radius: var(--border-radius); }

article { display: flex; flex-direction: column; justify-content: space-between }
article h2 {
  width: 100%;
  max-width: 50ch;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 300;
}
article > small { display:block; margin-block-start: -1rem; margin-block-end: .5rem }

/* Nav */
summary[role="link"].secondary:is([aria-current],:hover,:active,:focus) {
  background-color: transparent;
  color: var(--secondary-hover);
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
}

#auth { justify-content: center }
#auth article { padding: 0; overflow: hidden }
#auth article div { padding: 1rem }

.bfg {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: var(--ratio-square)
}

.sign-in-img,
.sign-out-img,
.reset-img {
  display: none;
  background-color: #374956;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.sign-in-img { background-image: url("/assets/pexels-stanislav-kondratiev-2909099.jpg") }
.sign-out-img { background-image: url("/assets/pexels-miguel-a-p-2882511.jpg") }
.reset-img { background-image: url("/assets/pexels-min-an-1629212.jpg") }

body > footer {
  padding: 1rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
footer > small { display: flex; flex-direction: column; gap: .25rem }
footer > small:last-of-type { align-self: flex-end }
footer a { text-decoration: none }

@media (min-width: 576px) {

  body > main { padding: 1.25rem 0 }
  #auth article div { padding: 1.25rem }
}

@media (min-width: 768px) {

  body > main {padding: 1.5rem 0 }
  #auth article div { padding: 1.5rem }
}

@media (min-width: 992px) {

  body > main { padding: 1.75rem 0 }
  #auth article div { padding: 1.75rem }
  .sign-in-img, .sign-out-img, .reset-img { display: block }
}

@media (min-width: 1200px) {

  body > main { padding: 2rem 0 }
  #auth article div { padding: 2rem }
}

.border-red { border: 2px dashed crimson }

.rtl { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--size-4) }

.table-container {
  width: 100%;
  overflow-x: auto;
}
td.cell-col strong,
td.cell-col span,
td.cell-col small { display: block; }
/* td.cell-col strong { margin-block-end: .375rem; } */

/* td.cell-col div:first-of-type { margin-block-end: .375rem; display: flex; justify-content: space-between; align-items: center; } */
td.cell-col > div { display: flex; gap: .5rem; }
td.cell-col > div > div:first-of-type { flex: 1; }
td.cell-col > div > div:last-of-type { padding: .5rem; display:grid; place-content: center; }
.fadded {
  opacity: .7;
}

.hidden { display: none; }

button.sm,
[role="button"].sm,
input[type="submit"].sm {
  width: auto;
  --form-element-spacing-vertical: 4px;
  --form-element-spacing-horizontal: 12px;
  font-size: .8rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.1ch;
}
.w-6 { width: 1rem; }
.h-6 { height: 1rem; }

.toast-container { position: fixed; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 25rem; display: flex; flex-direction: column; gap: var(--size-4); pointer-events: none; padding: var(--size-4); z-index: 999 }
.toast-container[data-position^=top-] { top: 0 }
.toast-container[data-position^=bottom-] { bottom: 0 }
.toast-container[data-position$=-right] { right: 0 }
.toast-container[data-position$=-right] .toast { transform: translateX(110%) }
.toast-container[data-position$=-left] { left: 0 }
.toast-container[data-position$=-left] .toast { transform: translateX(-110%) }
.toast-container[data-position$=-center] { left: 50%; transform: translateX(-50%) }
.toast-container[data-position$=-center] .toast { transform: translateY(-100vh) }
.toast-container .toast { position: relative; padding: var(--size-4); background-color: var(--primary); border: 1px solid var(--primary); border-radius: var(--border-radius); pointer-events: all; transition: transform 222ms ease-in-out; overflow: hidden; cursor: pointer }
.toast-container .toast.can-close::after { content: "\00D7"; position: absolute; top: 2px; right: 5px }
.toast-container .toast.show { transform: translate(0, 0); }
.toast-container .toast.progress::before { content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: calc(100% * var(--progress)); background-color: #fff }
.toast-container .toast.failed { background-color: var(--del-color); color: #fff }
.toast-container .toast.success { background-color: var(--ins-color); color: #fff }
.toast-container .toast.info { background-color: rgb(38, 94, 217); color: #fff }

@page {
	size: A4;
	margin: 8mm 8mm 8mm 8mm;
}

@media print {
	.no-print,
	.no-print > * {
		display: none !important;
	}

  body > nav,
  body > footer {
    display: none !important;
  }

  header,
  hgroup,
  main,
  section {
    padding: 0;
    margin: 0;
  }
}