/*
 * This file holds the CSS styles for the application.
 * Sketch ExactlyUI
 * https://www.sketch.com/s/885a1b57-10c7-41ae-a763-701b6bfeab61
 */

:root {
  /* SHARED VALUES */
  --input-radius: 6px;
  --select-item-radius: 6px;
  --button-radius: 28px;
  --table-radius: 8px;
  --badge-radius: 15px;
  --radius-full: 9999px;
  --navbar-height: 4.25rem;
  --mobile-navbar-height: 3.5rem;
  --side-navigation-width: 280px;
  --small-side-navigation-width: 84px;
  --max-width: calc(100vw - var(--side-navigation-width));
  --modal-max-width: 1280px;
  --document-preview-width: 186px;
  --document-preview-height: 226px;
  --sidebar-width: 21rem;
  --sidebar-closed-width: 0;
  --horizontal-input-group-max-width: 34rem;
  --horizontal-input-group-max-width-lg: 44rem;
  --max-in-card-input-group-width: 34rem;
  --label-max-width: 11rem;
  /* TRANSITIONS */
  
  /* RADIUS */
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* SHADOWS */
  --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px -2px rgba(201, 210, 216, 0.3);
  --shadow-green-sm: 0 4px 8px -2px rgba(38, 162, 127, 0.05);
  --shadow-neutral-xs: 0 1px 1px -2px rgba(33, 37, 43, 0.05);
  --shadow-neutral-sm: 0 4px 8px -2px rgba(33, 37, 43, 0.05);
  --shadow-neutral-md: 0 4px 16px -4px rgba(33, 37, 43, 0.15);
  --shadow-input: 0 0 0 2px #D8F4E6;
  --shadow-accent-sm: var(--shadow-green-sm);
  --shadow-warning-sm: 0 4px 8px -2px rgba(229, 150, 42, 0.08);
  --shadow-danger-sm: 0 4px 8px -2px rgba(227, 80, 80, 0.08);

  /* TEXT WEIGHT */
  --text-thin: 100;
  --text-extralight: 200;
  --text-light: 300;
  --text-regular: 400;
  --text-medium: 500;
  --text-semibold: 600;
  --text-bold: 700;
  --text-extrabold: 800;
  --text-black: 900;

  /* TEXT SIZING */  
  --text-2xs: var(--rem-12);
  --text-xs: var(--rem-14);
  --text-sm: var(--rem-15);

  /* REM SIZING */
  --rem-6: 0.375rem;
  --rem-8: 0.5rem;
  --rem-9: 0.5625rem;
  --rem-10: 0.625rem;
  --rem-11: 0.6875rem;
  --rem-12: 0.75rem;
  --rem-13: 0.8125rem;
  --rem-14: 0.875rem;
  --rem-15: 0.9375rem;
  --rem-16: 1rem;
  --rem-17: 1.0625rem;
  --rem-18: 1.125rem;
  --rem-19: 1.1875rem;
  --rem-20: 1.25rem;
  --rem-21: 1.3125rem;
  --rem-22: 1.375rem;
  --rem-23: 1.4375rem;
  --rem-24: 1.5rem;
  --rem-25: 1.5625rem;
  --rem-26: 1.625rem;
  --rem-28: 1.75rem;
  --rem-34: 2.125rem;
  --rem-36: 2.25rem;
  --rem-44: 2.75rem;
  --rem-48: 3rem;

  /* COLORS */
  --modal-backdrop: rgba(33, 37, 43, 0.1);
  --navbar-active-item: rgba(201, 210, 216, 0.8);
  --drag-and-drop-backdrop: rgba(33, 37, 43, 0.7);

  /* PRIMARY COLORS */
  --primary-50: #EAFAF6;
  --primary-100: #D5F3E8;
  --primary-200: #B0E7D7;
  --primary-300: #7FD3C0;
  --primary-400: #46B9A2;
  --primary-500: #279D8A;
  --primary-600: #1B7D6F;
  --primary-700: #16645A;
  --primary-800: #124F48;
  --primary-900: #10403C;
  --primary-950: #092220;

  /* NEUTRAL COLORS */
  --neutral-50: #F5F7F8;
  --neutral-100: #EEF1F3;
  --neutral-200: #E6EAED;
  --neutral-300: #DBE0E4;
  --neutral-400: #CAD2D9;
  --neutral-500: #A9B3BC;
  --neutral-600: #798694;
  --neutral-700: #5C6B78;
  --neutral-800: #3B4651;
  --neutral-900: #262F38;
  --neutral-950: #1C232A;

  /* ERROR COLORS */
  --error-50: #FDF3F3;
  --error-100: #FCE4E4;
  --error-200: #FACECE;
  --error-300: #F6ABAB;
  --error-400: #EF7A7A;
  --error-500: #E35050;
  --error-600: #D03232;
  --error-700: #B02727;
  --error-800: #902424;
  --error-900: #782424;
  --error-950: #410E0E;

  /* WARNING COLORS */
  --warning-50: #FDF9EF;
  --warning-100: #FBF2D9;
  --warning-200: #F6E1B2;
  --warning-300: #F1CD80;
  --warning-400: #ECB65F;
  --warning-500: #E5962A;
  --warning-600: #D67C20;
  --warning-700: #B2611C;
  --warning-800: #8E4D1E;
  --warning-900: #72401C;
  --warning-950: #3E1F0C;

  /* BLUE COLORS */
  --blue-500: #127CBC;

  /* DRAFT COLORS */
  --draft-text: #BE861E;
  --draft-surface: #FDF1DA;

  /* TEXT COLORS */
  --text-body: var(--neutral-950);
  --text-heading: var(--neutral-900);
  --text-subheading: var(--neutral-700);
  --text-label: var(--neutral-700);
  --text-information: var(--neutral-700);
  --text-additional: var(--neutral-600);
  --text-placeholder: var(--neutral-600);
  --text-disabled: var(--neutral-500);
  --text-action: var(--primary-500);
  --text-action-hover: var(--primary-600);
  --text-action-neutral: var(--neutral-800);
  --text-action-neutral-hover: var(--neutral-900);
  --text-action-neutral-secondary: var(--neutral-700);
  --text-action-neutral-secondary-hover: var(--neutral-800);
  --text-action-neutral-tertiary: var(--neutral-600);
  --text-action-neutral-tertiary-hover: var(--neutral-700);
  --text-on-action: white;
  --text-on-disabled: var(--neutral-100);
  --text-success: var(--primary-600);
  --text-success-hover: var(--primary-700);
  --text-warning: var(--warning-600);
  --text-warning-hover: var(--warning-700);
  --text-error: var(--error-600);
  --text-error-hover: var(--error-700);
  --text-action-tertiary: var(--neutral-600);
  --text-action-tertiary-hover: var(--neutral-700);
  --text-heading: var(--neutral-900);
  --text-on-action: white;

  
  /* ACTION COLORS */
  --action-secondary: var(--neutral-700);
  --action-secondary-hover: var(--neutral-800);
  
  /* ICON COLORS */
  --icon-primary: var(--neutral-700);
  --icon-secondary: var(--neutral-600);
  --icon-action: var(--primary-500);
  --icon-action-hover: var(--primary-600);
  --icon-on-action: white;
  --icon-disabled: var(--neutral-500);
  --icon-success: var(--primary-500);
  --icon-warning: var(--warning-500);
  --icon-error: var(--error-500);
  --icon-disabled: var(--neutral-500);
  
  /* BORDER COLORS */
  --border-primary: var(--neutral-300);
  --border-primary-hover: var(--neutral-400);
  --border-secondary: var(--neutral-200);
  --border-secondary-hover: var(--neutral-300);
  --border-subtle: var(--neutral-100);
  --border-success: var(--primary-200);
  --border-warning: var(--warning-200);
  --border-error: var(--error-200);
  --border-action: var(--primary-500);
  --border-action-hover: var(--primary-600);
  --border-focus: var(--primary-400);
  
  /* SURFACE COLORS */
  --surface-page: var(--neutral-50);
  --surface-primary: white;
  --surface-secondary: var(--neutral-100);
  --surface-tertiary: var(--neutral-200);
  --surface-subtle: var(--neutral-50);
  --surface-highlighted: var(--neutral-300);
  --surface-disabled: var(--neutral-100);
  --surface-success: var(--primary-100);
  --surface-action: var(--primary-500);
  --surface-action-hover: var(--primary-600);
  --surface-action-hover-light: var(--primary-400);
  --surface-action-active: var(--primary-700);
  --surface-warning: var(--warning-100);
  --surface-warning-action: var(--warning-600);
  --surface-warning-action-hover: var(--warning-700);
  --surface-warning-action-active: var(--warning-800);
  --surface-error: var(--error-100);
  --surface-error-action: var(--error-600);
  --surface-error-action-hover: var(--error-700);
  --surface-error-action-active: var(--error-800);
  --surface-background: var(--neutral-50);
  --blue-surface: #C3E3F6;
  --surface-action: var(--primary-500);
  --surface-action-hover: var(--primary-600);
  --surface-action-active: var(--primary-700);
  --surface-primary: white;
  --surface-secondary: var(--neutral-100);
  --surface-highlighted: var(--neutral-300);

  /* ACCESSORY COLORS */
  --colors-accessory-red: #B84F42;
  --colors-accessory-red-avatar: rgba(184, 79, 66, 0.15);
  --colors-accessory-orange: #DB7C26;
  --colors-accessory-orange-avatar: rgba(219, 124, 38, 0.15);
  --colors-accessory-indigo: #5E548E;
  --colors-accessory-indigo-avatar: rgba(94, 84, 142, 0.15);
  --colors-accessory-blue: #62B6CB;
  --colors-accessory-navy: #1B4965;

  /* STATUS COLORS */
  --status-active: var(--primary-500);
  --status-inactive: var(--warning-500);
  --status-deceased: var(--neutral-200);
}

@media screen and (max-width: 768px) {
  :root {
    --max-width: calc(100vw - var(--small-side-navigation-width));
    --sidebar-width: 100dvw;
    --modal-max-width: 100dvw;
  }
}

@media screen and (max-width: 576px) {
  :root {
    --max-width: 100vw;
    --modal-backdrop: rgba(33, 37, 43, 0.25);
  }
}

/* Custom font face */
@font-face {
  font-family: 'Inter';
  src: local("Inter"), url("/assets/Inter-c6876acd.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-variation-settings: normal;
}

@view-transition {
  navigation: auto;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-variation-settings: 'wght' 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-body);
}

html {
  font-size: 16px;
}

body {
  font-size: 16px;
  background-color: var(--neutral-50);
  width: 100vw;
  height: 100dvh;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  overflow-x: clip;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 576px) {
  body {
    flex-direction: column;
    overflow: clip;
  }
}

header {
  width: 100vw;
  padding-block: 1rem;
  outline: solid 1px var(--neutral-100);

  nav {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    a {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-decoration: none;
      color: var(--neutral-500);
      font-size: var(--text-sm);
      font-variation-settings: 'wght' var(--text-semibold);

      &:hover {
        opacity: 80%;
      }
    }
  }
}

a.default-link {
  color: var(--primary-500);
  text-decoration: underline;

  &.text-sm {
    font-size: var(--text-sm);
  }

  &.text-xs {
    font-size: var(--text-xs);
  }
}

*[hidden],
*.hidden,
*[data-hidden="true"],
*[data-hidden="hidden"] {
  display: none !important;
}

.invisible {
  opacity: 0;
}

main:not([class]) {
  width: 100vw;
  flex-grow: 1;
  margin: 0 auto;
  display: block;
  padding-inline: 1.5rem;
}

@media screen and (min-width: 1250px) {
  main {
    padding-inline: 0;
  }
}

ol > li,
ul > li {
  list-style: none;
}

.hoverable {
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  &:hover {
    opacity: 80%;
  }
}

.main-content-container {
  flex-grow: 1;
  padding-inline: 3.5rem;
  padding-block: 2rem;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
}

@media screen and (max-width: 768px) {
  .main-content-container {
    padding-inline: 1.5rem;
  }
}

@media screen and (max-width: 576px) {
  .main-content-container {
    width: 100%;
    max-width: 100dvw;
    padding-inline: 1rem;
    padding-block: 1rem;
    height: calc(100dvh - var(--mobile-navbar-height) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - var(--mobile-navbar-height) - env(safe-area-inset-bottom));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

.fit-content {
  width: fit-content;
  height: fit-content;
}

.mb-4 {
  margin-bottom: 1rem;
}

.back-button {
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  text-decoration: none;
  text-underline: none;

  span {
    color: var(--text-label);
    font-size: var(--rem-14);
    font-variation-settings: 'wght' var(--text-semibold);
    text-decoration: none;
    text-underline: none;
    max-width: min(35ch, 90dvw);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }


  &.animated-on-hover {
    svg {
      transition: transform 0.2s ease-in;
      transform: translateX(0);
    }

    &:hover {
      svg {
        transform: translateX(-2px);
      }
    }
  }
}

*[data-controller="copy-on-click"] {
  cursor: copy;
  transition: color 0.2s ease-in-out;
  position: relative;

  &:hover {
    opacity: 80%;
  }

  &.copied {
    color: var(--primary-500);
    cursor: default;
    overflow: visible !important;

    &::after {
      content: "Text copied!";
      position: absolute;
      bottom: calc(100% + 0.25rem);
      left: 50%;
      transform: translateX(-50%);
      font-size: var(--text-xs);
      color: var(--neutral-500);
      background-color: white;
      padding: .5rem;
      border-radius: var(--radius-sm);
      box-shadow: 0 4px 12px -2px var(--neutral-200);
      z-index: 1000;
    }
  }
}

*[data-disabled="true"] {
  opacity: 50%;
  
  * { 
    pointer-events: none;
  }
}

.relative {
  position: relative;
}

.justify-start {
  justify-content: flex-start !important;
}

.align-center {
  align-items: center !important;
}

*[data-has-z-index="true"] {
  z-index: var(--z-index);
}

@media screen and (max-width: 576px) {
  turbo-frame {
    max-width: 100%;
    overflow-x: auto;

    &:has(dialog) {
      z-index: 1000;
    }
  }

  *[data-hidden-on-mobile="true"] {
    display: none !important;
  }
}

.full-width-divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-secondary);
}