@import url('../../fonts/Gilroy/Gilroy.css');

/* THIS IS CSS RESET */

/*
    1. Use a more-intuitive box-sizing model.
  */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/*
    2. Remove default margin
  */
* {
  margin: 0;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
    6. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}

/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}


:root {
  --color-gradient-start: #3498db;
  --color-gradient-end: #2980b9;
  --color-text: #ecf0f1;

  --color-table-head: #f7f9fc;
  --color-accent: #1E4B8A;
  --color-head-text: #7c7c7c;
  --color-table-border: #e9f6f9;
  --color-accent-dark: #0C2B5F;
  --color-accent-green: #10846D;
  --color-accent-red: #ed232a;

  --color-neutral: #DBE1E2;
  --color-input-border: #E0E0E0;
  --color-input-icons: #717D7B;
  --color-focus: #E8EDF7;
  --color-input-label: #0D1917;

  --color-accent-50: #E8EDF7;
  --color-accent-100: #B7C8E5;
  --color-table-text: #0D1917;

  --color-collapsed-border: #dbe1e2;
  --border-radius-small: 0.5rem;
  --color-accent-green-500: #10846D;

  --linear-easing: linear(0,
      0.218 2.1%,
      0.862 6.5%,
      1.114,
      1.296 10.7%,
      1.346,
      1.37 12.9%,
      1.373,
      1.364 14.5%,
      1.315 16.2%,
      1.032 21.8%,
      0.941 24%,
      0.891 25.9%,
      0.877,
      0.869 27.8%,
      0.87,
      0.882 30.7%,
      0.907 32.4%,
      0.981 36.4%,
      1.012 38.3%,
      1.036,
      1.046 42.7% 44.1%,
      1.042 45.7%,
      0.996 53.3%,
      0.988,
      0.984 57.5%,
      0.985 60.7%,
      1.001 68.1%,
      1.006 72.2%,
      0.998 86.7%,
      1);


  /* THESE ARE FALLBACK VARIABLES */
  --color-mix-accent-10-transparent-100: #E8F5FB;
  --color-mix-accent-100-black-10: #E8F5FB;
  --color-mix-accent-100-black-80: #005379;
  --color-mix-accent-100-white-50: #E8F5FB;
  --color-mix-accent-30-white-30: #E8F5FB;
  --color-mix-red-100-black-10: #9C1414;
  --color-mix-red-100-white-30: #BF4C4C;
  --color-mix-accent-green-100-black-10: #0C6654;
  --color-mix-accent-green-100-white-30: #47A08F;
}

html {
  overflow-y: scroll;
}

html::-webkit-scrollbar {
  width: 0.5rem;
  height: 0;
}

html::-webkit-scrollbar-track {
  background-color: transparent;
  box-shadow: none;
}

html::-webkit-scrollbar-thumb {
  background-color: #00000078;
  border-radius: 10rem;
}


body {
  font-family: "Gilroy", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  position: relative;
  /* background-color: var(--color-focus);
  @media(width<500px) {
    background-color: white;
  } */
}

.display-none {
  display: none !important;
}


/* BUTTON STYLES */
/* THIS STYLE WAS EARLIER IN SEPERATE LAYER, BUT BECAUSE OF BROWSER SUPPORT ISSUE MOVED OUT, IDEALLY SHOULD BE IN SEPERATE FILE NOW */
button {
  cursor: pointer;
  border: none;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0.8rem 1.2rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-transform: capitalize;
}

@media (max-width: 500px) {
  button {
    flex: 1;
  }
}

button.outline {
  color: var(--color-accent);
  border: solid 1px var(--color-accent);
}

button.outline:hover {
  background-color: var(--color-mix-accent-10-transparent-100);
}

/* Styles for browsers that support color-mix() */
@supports (color: color-mix(in srgb, #000 10%, #fff 10%)) {
  button.outline:hover {
    background-color: color-mix(in srgb, var(--color-accent) 10%, transparent 100%);
  }
}

button.outline:disabled {
  cursor: not-allowed;
  opacity: 0.3;
  pointer-events: none;
}

button.text {
  background-color: transparent;
  color: var(--color-accent);
}

button.text:disabled {
  color: #7c7c7c;
  cursor: not-allowed;
}

button.text.mixed {
  padding-bottom: 0;
}

button.text.mixed .dull {
  color: #717D7B;
  font-weight: 500;
}

button.text.mixed .highlighted {
  color: var(--color-accent);
}

button.text.mixed:disabled {
  cursor: not-allowed;
}

button.filled.delete {
  background-color: #ac1616;
  color: white;
  border: solid 1px #ac1616;
}

button.filled.delete:hover {
  background-color: var(--color-mix-red-100-black-10);
}

button.filled.delete:disabled {
  cursor: not-allowed;
  background-color: var(--color-mix-red-100-white-30);
}

/* Styles for browsers that support color-mix() */
@supports (color: color-mix(in srgb, #000 10%, #fff 10%)) {
  button.filled.delete:hover {
    background-color: color-mix(in srgb, #ac1616 100%, black 10%);
  }

  button.filled.delete:disabled {
    background-color: color-mix(in srgb, #ac1616 100%, white 30%);
  }
}

button.filled.suspended {
  background-color: #ac1616;
  color: white;
  border: solid 1px #ac1616;
}

button.filled.suspended:hover {
  background-color: var(--color-mix-red-100-black-10);
}

button.filled.suspended:disabled {
  cursor: not-allowed;
  background-color: var(--color-mix-red-100-white-30);
}

/* Styles for browsers that support color-mix() */
@supports (color: color-mix(in srgb, #000 10%, #fff 10%)) {
  button.filled.suspended:hover {
    background-color: color-mix(in srgb, #ac1616 100%, black 10%);
  }

  button.filled.suspended:disabled {
    background-color: color-mix(in srgb, #ac1616 100%, white 30%);
  }
}

button.filled.active {
  background-color: var(--color-accent-green);
  color: white;
  border: solid 1px var(--color-accent-green);
}

button.filled.active:hover {
  background-color: var(--color-mix-accent-green-100-black-10);
}

button.filled.active:disabled {
  cursor: not-allowed;
  background-color: var(--color-mix-accent-green-100-white-30);
}

@supports (color: color-mix(in srgb, #000 10%, #fff 10%)) {
  button.filled.active:hover {
    background-color: color-mix(in srgb, var(--color-accent-green) 100%, black 10%);
  }

  button.filled.active:disabled {
    background-color: color-mix(in srgb, var(--color-accent-green) 100%, white 30%);
  }
}

button.filled.normal {
  background-color: var(--color-accent);
  color: white;
  border: solid 1px var(--color-accent);
}

button.filled.normal:hover {
  background-color: #0087C5;
}

button.filled.normal:disabled {
  cursor: not-allowed;
  background-color: #55B8E6;
}

button.loading::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #B2DFF3;
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
}

@supports (color: color-mix(in srgb, #000 10%, #fff 10%)) {
  button.filled.normal:hover {
    background-color: color-mix(in srgb, var(--color-accent) 100%, black 10%);
  }

  button.filled.normal:disabled {
    background-color: color-mix(in srgb, var(--color-accent) 100%, white 50%);
  }

  button.loading::before {
    border: 3px solid color-mix(in srgb, var(--color-accent) 30%, white 30%);
  }
}

@keyframes spin {
  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}



/* INPUT STYLES */
/* THIS STYLE WAS EARLIER IN SEPERATE LAYER, BUT BECAUSE OF BROWSER SUPPORT ISSUE MOVED OUT, IDEALLY SHOULD BE IN SEPERATE FILE NOW */
label.input-wrapper {
  display: flex;
  flex-direction: column;
}

label.input-wrapper span {
  font-size: 1.3rem;
  color: var(--color-input-label);
}

label.input-wrapper span span.req {
  color: red;
  margin-left: 0.8rem;
}

label.input-wrapper span span.req:not(:empty)::before {
  content: "* ";
  font-weight: bold;
}

label.input-wrapper input,
label.input-wrapper select {
  padding: 0.8rem 1.2rem;
  border: solid 1px var(--color-input-border);
  border-radius: 6px;
  font-size: 1.4rem;
}

label.input-wrapper input:focus,
label.input-wrapper select:focus {
  background-color: var(--color-focus);
  border-width: 1px;
  outline: solid 1px var(--color-accent);
}

label.input-wrapper input:disabled,
label.input-wrapper select:disabled {
  background-color: var(--color-input-border);
  opacity: 0.6;
}


main {
  display: flex;
}

@media (max-width: 900px) {
  main {
    flex-direction: column;
  }
}

main .tab-container {
  flex-grow: 1;
}

.sidebar {
  position: sticky;
  top: 4.4rem;
  margin-inline: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100vh - 7rem);
}

@media (max-width: 900px) {
  .sidebar {
    height: unset;
    position: unset;
  }
}

.sidebar .application-description {
  width: clamp(20rem, 35vw, 35rem);
  text-align: center;
  margin-block: 2.5rem;
}

@media (max-width: 900px) {
  .sidebar .application-description {
    width: unset;
    margin-block: 1rem;
  }
}

@media (max-width: 500px) {
  .sidebar .application-description h1 {
    font-size: 1.6em;
  }
}

.sidebar .application-description h6 {
  font-size: 1.4rem;
  color: #A6A6A6;
  font-weight: 500;
}

@media (max-width: 500px) {
  .sidebar .application-description h6 {
    display: none;
  }
}

.sidebar footer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-top: 1rem;
}

@media (max-width: 900px) {
  .sidebar footer {
    display: hidden;
    scale: 0.9;
  }
}

.sidebar footer svg {
  margin-left: 5px;
}

.sidebar footer img {
  height: 43px;
}

@media (max-width: 500px) {
  .sidebar footer img {
    height: 25px;
  }
}

.sidebar footer.small img {
  height: 20px;
}

@media (max-width: 500px) {
  .sidebar footer.small img {
    height: 16px;
  }
}

.sidebar footer.noshow {
  display: none;
}

.sidebar footer.noshow img {
  height: 0;
}


input[type="checkbox"].switch {
  --thumb: #ffffff;
  --track: #a4b0ad;
  --track-disabled: #dddddd;
  --track-active: var(--color-accent);
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 16px;
  width: 24px;
  border-radius: 100px;
  outline: none;
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 0;
  cursor: pointer;
  background: var(--track, red);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}

input[type="checkbox"].switch:after {
  content: "";
  display: block;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: var(--thumb, var(--border));
  transform: translateX(var(--x, 0));
  transition: transform 0.6s var(--linear-easing, ease-in-out), opacity 0.3s;
}

input[type="checkbox"].switch:checked {
  --x: 8px;
  --track: var(--track-active);
}

input[type="checkbox"].switch:disabled {
  --track: var(--track-disabled);
  cursor: not-allowed;
  opacity: 0.9;
}

input[type="checkbox"].switch:disabled:checked {
  --b: var(--disabled-inner);
  --bc: var(--border);
}

input[type="checkbox"].switch:disabled+label {
  cursor: not-allowed;
}

input[type="checkbox"].switch:hover:not(:checked):not(:disabled) {
  --bc: var(--border-hover);
}

input[type="checkbox"].switch:disabled:not(:checked):after {
  opacity: 0.6;
}

input[type="checkbox"].switch:focus {
  box-shadow: 0 0 0 var(--focus);
}

.text-capitalise {
  text-transform: capitalize;
}