@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap";

/* src/styles.scss */
.table-container {
  background: var(--mat-app-surface, #ffffff);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-top: 1rem;
}
@media (prefers-color-scheme: dark) {
  .table-container {
    background: var(--mat-app-surface, #2c2c2c);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
}
.filters-container {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--mat-app-surface, #ffffff);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.filters-container mat-form-field {
  min-width: 200px;
  flex: 1;
  max-width: 300px;
}
.filters-container button {
  margin-top: 0.5rem;
}
@media (prefers-color-scheme: dark) {
  .filters-container {
    background: var(--mat-app-surface, #2c2c2c);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
}
.column-filter {
  width: 100%;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  background: var(--mat-app-surface, #ffffff);
  color: var(--mat-app-on-surface, rgba(0, 0, 0, 0.87));
  margin-top: 4px;
}
.column-filter:focus {
  outline: none;
  border-color: var(--mat-app-primary, #1976d2);
}
@media (prefers-color-scheme: dark) {
  .column-filter {
    background: var(--mat-app-surface, #1e1e1e);
    color: var(--mat-app-on-surface, rgba(255, 255, 255, 0.87));
    border-color: rgba(255, 255, 255, 0.12);
  }
  .column-filter:focus {
    border-color: var(--mat-app-primary, #64b5f6);
  }
}
.mat-mdc-table {
  width: 100%;
  background: transparent;
}
.mat-mdc-table .mat-mdc-header-row {
  background: var(--mat-app-surface-variant, #f5f5f5);
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-table .mat-mdc-header-row {
    background: var(--mat-app-surface-variant, #383838);
  }
}
.mat-mdc-table .mat-mdc-header-cell {
  font-weight: 600;
  font-size: 14px;
  color: var(--mat-app-on-surface-variant, rgba(0, 0, 0, 0.6));
  padding: 12px 16px;
  border-bottom: 2px solid var(--mat-app-outline, rgba(0, 0, 0, 0.12));
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-table .mat-mdc-header-cell {
    color: var(--mat-app-on-surface-variant, rgba(255, 255, 255, 0.7));
    border-bottom-color: var(--mat-app-outline, rgba(255, 255, 255, 0.12));
  }
}
.mat-mdc-table .mat-mdc-header-cell.mat-sort-header-sorted {
  color: var(--mat-app-primary, #1976d2);
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-table .mat-mdc-header-cell.mat-sort-header-sorted {
    color: var(--mat-app-primary, #64b5f6);
  }
}
.mat-mdc-table .mat-mdc-row:hover {
  background: var(--mat-app-surface-variant, rgba(0, 0, 0, 0.04));
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-table .mat-mdc-row:hover {
    background: var(--mat-app-surface-variant, rgba(255, 255, 255, 0.08));
  }
}
.mat-mdc-table .mat-mdc-row:nth-child(even) {
  background: var(--mat-app-surface, rgba(0, 0, 0, 0.02));
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-table .mat-mdc-row:nth-child(even) {
    background: var(--mat-app-surface, rgba(255, 255, 255, 0.02));
  }
}
.mat-mdc-table .mat-mdc-cell {
  font-size: 14px;
  padding: 12px 16px;
  color: var(--mat-app-on-surface, rgba(0, 0, 0, 0.87));
  border-bottom: 1px solid var(--mat-app-outline, rgba(0, 0, 0, 0.08));
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-table .mat-mdc-cell {
    color: var(--mat-app-on-surface, rgba(255, 255, 255, 0.87));
    border-bottom-color: var(--mat-app-outline, rgba(255, 255, 255, 0.08));
  }
}
.mat-mdc-table .mat-mdc-cell mat-chip {
  font-size: 12px;
  min-height: 24px;
  padding: 4px 12px;
}
.mat-mdc-table .mat-mdc-cell button {
  margin: 0 4px;
}
.status-chip.active,
.status-chip.status-active,
.status-chip.status-published,
.status-chip.status-open {
  background-color: #4caf50 !important;
  color: white !important;
}
.status-chip.inactive,
.status-chip.status-inactive,
.status-chip.status-draft,
.status-chip.status-closed {
  background-color: #9e9e9e !important;
  color: white !important;
}
.status-chip.status-completed,
.status-chip.status-approved {
  background-color: #2196f3 !important;
  color: white !important;
}
.status-chip.status-cancelled,
.status-chip.status-rejected {
  background-color: #f44336 !important;
  color: white !important;
}
.status-chip.status-in-progress,
.status-chip.status-submitted {
  background-color: #ff9800 !important;
  color: white !important;
}
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--mat-app-on-surface-variant, rgba(0, 0, 0, 0.6));
}
.empty-state mat-icon {
  font-size: 64px;
  width: 64px;
  height: 64px;
  color: var(--mat-app-on-surface-variant, rgba(0, 0, 0, 0.3));
  margin-bottom: 1rem;
}
.empty-state h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 0.5rem 0;
}
.empty-state p {
  font-size: 1rem;
  margin: 0 0 1.5rem 0;
}
@media (prefers-color-scheme: dark) {
  .empty-state {
    color: var(--mat-app-on-surface-variant, rgba(255, 255, 255, 0.6));
  }
  .empty-state mat-icon {
    color: var(--mat-app-on-surface-variant, rgba(255, 255, 255, 0.3));
  }
}
.loading,
.loading-container {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--mat-app-on-surface-variant, rgba(0, 0, 0, 0.6));
}
.loading mat-spinner,
.loading-container mat-spinner {
  margin: 0 auto 1rem;
}
.loading p,
.loading-container p {
  font-size: 1rem;
  margin: 0;
}
@media (prefers-color-scheme: dark) {
  .loading,
  .loading-container {
    color: var(--mat-app-on-surface-variant, rgba(255, 255, 255, 0.6));
  }
}
.no-data {
  text-align: center;
  padding: 2rem;
  color: var(--mat-app-on-surface-variant, rgba(0, 0, 0, 0.6));
  font-style: italic;
}
.no-data mat-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
  color: var(--mat-app-on-surface-variant, rgba(0, 0, 0, 0.3));
  margin-bottom: 0.5rem;
}
@media (prefers-color-scheme: dark) {
  .no-data {
    color: var(--mat-app-on-surface-variant, rgba(255, 255, 255, 0.6));
  }
  .no-data mat-icon {
    color: var(--mat-app-on-surface-variant, rgba(255, 255, 255, 0.3));
  }
}
.header,
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.header h1,
.header h2,
.header-container h1,
.header-container h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--mat-app-on-surface, rgba(0, 0, 0, 0.87));
}
@media (prefers-color-scheme: dark) {
  .header h1,
  .header h2,
  .header-container h1,
  .header-container h2 {
    color: var(--mat-app-on-surface, rgba(255, 255, 255, 0.87));
  }
}
.header .title-section,
.header-container .title-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header .title-section mat-icon,
.header-container .title-section mat-icon {
  font-size: 28px;
  width: 28px;
  height: 28px;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
}
.header-content h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 400;
}
@media print {
  mat-toolbar,
  mat-sidenav,
  .mat-drawer,
  .mat-drawer-container,
  .mat-drawer-backdrop,
  button,
  .no-print,
  .admin-actions,
  mat-paginator,
  .mat-mdc-paginator,
  .mat-expansion-panel-header-description,
  .mat-expansion-indicator {
    display: none !important;
  }
  body {
    margin: 0;
    padding: 0;
    background: white !important;
    color: black !important;
    font-size: 12pt;
    line-height: 1.5;
  }
  mat-sidenav-content,
  .mat-drawer-content,
  .main-content,
  .container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  mat-expansion-panel {
    box-shadow: none !important;
    margin: 0 !important;
    page-break-inside: avoid;
  }
  .mat-expansion-panel-content {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
  }
  .mat-expansion-panel-body {
    padding: 0 !important;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: auto;
    font-size: 10pt;
  }
  thead {
    display: table-header-group;
  }
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
  th,
  td {
    border: 1px solid #000;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f0f0f0 !important;
    font-weight: bold;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  h1 {
    font-size: 18pt;
    margin: 0 0 12pt 0;
    page-break-after: avoid;
  }
  h2 {
    font-size: 14pt;
    margin: 12pt 0 8pt 0;
    page-break-after: avoid;
  }
  h3 {
    font-size: 12pt;
    margin: 8pt 0 6pt 0;
    page-break-after: avoid;
  }
  mat-card,
  .mat-mdc-card {
    box-shadow: none !important;
    border: 1px solid #ccc;
    page-break-inside: avoid;
    margin-bottom: 12pt;
  }
  ul,
  ol {
    page-break-inside: avoid;
  }
  a {
    color: black;
    text-decoration: none;
  }
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }
  .page-break {
    page-break-before: always;
  }
  .avoid-break {
    page-break-inside: avoid;
  }
  .print-header {
    display: block !important;
    text-align: center;
    margin-bottom: 20pt;
    border-bottom: 2px solid #000;
    padding-bottom: 10pt;
  }
  .print-header h1 {
    margin: 0;
  }
  .print-header .print-date {
    font-size: 10pt;
    color: #666;
  }
  .print-footer {
    display: block !important;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 9pt;
    color: #666;
    border-top: 1px solid #ccc;
    padding-top: 5pt;
  }
  .rotation-schedule-print .schedule-info {
    margin-bottom: 12pt;
    padding: 8pt;
    border: 1px solid #000;
    background-color: #f9f9f9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .rotation-schedule-print .administration-section {
    page-break-inside: avoid;
    margin-bottom: 16pt;
  }
  .rotation-schedule-print .track-section {
    page-break-inside: avoid;
    margin-bottom: 12pt;
    padding-left: 12pt;
  }
  .rotation-schedule-print .station-list {
    margin-left: 12pt;
  }
  .candidate-assignment-print .candidate-info {
    margin-bottom: 12pt;
    padding: 8pt;
    border: 1px solid #000;
    background-color: #f9f9f9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .candidate-assignment-print .rotation-timeline {
    page-break-inside: avoid;
  }
  .status-badge {
    border: 1px solid #000;
    padding: 2pt 6pt;
    border-radius: 3pt;
    font-size: 9pt;
    font-weight: bold;
  }
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
.display-large {
  font-family:
    "Google Sans",
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 57px !important;
  line-height: 64px !important;
  font-weight: 400 !important;
  letter-spacing: -0.25px !important;
}
.display-medium {
  font-family:
    "Google Sans",
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 45px !important;
  line-height: 52px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.display-small {
  font-family:
    "Google Sans",
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 36px !important;
  line-height: 44px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.headline-large {
  font-family:
    "Google Sans",
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 32px !important;
  line-height: 40px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.headline-medium {
  font-family:
    "Google Sans",
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 28px !important;
  line-height: 36px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.headline-small {
  font-family:
    "Google Sans",
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.title-large {
  font-family:
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 22px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.title-medium {
  font-family:
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15px !important;
}
.title-small {
  font-family:
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
}
.body-large {
  font-family:
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
}
.body-medium {
  font-family:
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0.25px !important;
}
.body-small {
  font-family:
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0.4px !important;
}
.label-large {
  font-family:
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1px !important;
}
.label-medium {
  font-family:
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
}
.label-small {
  font-family:
    "Roboto",
    Arial,
    sans-serif !important;
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
}
@media (max-width: 768px) {
  .display-large {
    font-size: 45px !important;
    line-height: 52px !important;
  }
  .display-medium {
    font-size: 36px !important;
    line-height: 44px !important;
  }
  .display-small {
    font-size: 32px !important;
    line-height: 40px !important;
  }
  .headline-large {
    font-size: 28px !important;
    line-height: 36px !important;
  }
  .headline-medium {
    font-size: 24px !important;
    line-height: 32px !important;
  }
  .headline-small {
    font-size: 22px !important;
    line-height: 28px !important;
  }
}
.p-0 {
  padding: 0 !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pr-0 {
  padding-right: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pl-0 {
  padding-left: 0 !important;
}
.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.p-1 {
  padding: 4px !important;
}
.pt-1 {
  padding-top: 4px !important;
}
.pr-1 {
  padding-right: 4px !important;
}
.pb-1 {
  padding-bottom: 4px !important;
}
.pl-1 {
  padding-left: 4px !important;
}
.px-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.p-2 {
  padding: 8px !important;
}
.pt-2 {
  padding-top: 8px !important;
}
.pr-2 {
  padding-right: 8px !important;
}
.pb-2 {
  padding-bottom: 8px !important;
}
.pl-2 {
  padding-left: 8px !important;
}
.px-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.p-3 {
  padding: 12px !important;
}
.pt-3 {
  padding-top: 12px !important;
}
.pr-3 {
  padding-right: 12px !important;
}
.pb-3 {
  padding-bottom: 12px !important;
}
.pl-3 {
  padding-left: 12px !important;
}
.px-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.p-4 {
  padding: 16px !important;
}
.pt-4 {
  padding-top: 16px !important;
}
.pr-4 {
  padding-right: 16px !important;
}
.pb-4 {
  padding-bottom: 16px !important;
}
.pl-4 {
  padding-left: 16px !important;
}
.px-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.p-5 {
  padding: 20px !important;
}
.pt-5 {
  padding-top: 20px !important;
}
.pr-5 {
  padding-right: 20px !important;
}
.pb-5 {
  padding-bottom: 20px !important;
}
.pl-5 {
  padding-left: 20px !important;
}
.px-5 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.py-5 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.p-6 {
  padding: 24px !important;
}
.pt-6 {
  padding-top: 24px !important;
}
.pr-6 {
  padding-right: 24px !important;
}
.pb-6 {
  padding-bottom: 24px !important;
}
.pl-6 {
  padding-left: 24px !important;
}
.px-6 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.py-6 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.p-7 {
  padding: 28px !important;
}
.pt-7 {
  padding-top: 28px !important;
}
.pr-7 {
  padding-right: 28px !important;
}
.pb-7 {
  padding-bottom: 28px !important;
}
.pl-7 {
  padding-left: 28px !important;
}
.px-7 {
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.py-7 {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
.p-8 {
  padding: 32px !important;
}
.pt-8 {
  padding-top: 32px !important;
}
.pr-8 {
  padding-right: 32px !important;
}
.pb-8 {
  padding-bottom: 32px !important;
}
.pl-8 {
  padding-left: 32px !important;
}
.px-8 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.py-8 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.p-9 {
  padding: 36px !important;
}
.pt-9 {
  padding-top: 36px !important;
}
.pr-9 {
  padding-right: 36px !important;
}
.pb-9 {
  padding-bottom: 36px !important;
}
.pl-9 {
  padding-left: 36px !important;
}
.px-9 {
  padding-left: 36px !important;
  padding-right: 36px !important;
}
.py-9 {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
.p-10 {
  padding: 40px !important;
}
.pt-10 {
  padding-top: 40px !important;
}
.pr-10 {
  padding-right: 40px !important;
}
.pb-10 {
  padding-bottom: 40px !important;
}
.pl-10 {
  padding-left: 40px !important;
}
.px-10 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}
.py-10 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.p-12 {
  padding: 48px !important;
}
.pt-12 {
  padding-top: 48px !important;
}
.pr-12 {
  padding-right: 48px !important;
}
.pb-12 {
  padding-bottom: 48px !important;
}
.pl-12 {
  padding-left: 48px !important;
}
.px-12 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}
.py-12 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.p-14 {
  padding: 56px !important;
}
.pt-14 {
  padding-top: 56px !important;
}
.pr-14 {
  padding-right: 56px !important;
}
.pb-14 {
  padding-bottom: 56px !important;
}
.pl-14 {
  padding-left: 56px !important;
}
.px-14 {
  padding-left: 56px !important;
  padding-right: 56px !important;
}
.py-14 {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.p-16 {
  padding: 64px !important;
}
.pt-16 {
  padding-top: 64px !important;
}
.pr-16 {
  padding-right: 64px !important;
}
.pb-16 {
  padding-bottom: 64px !important;
}
.pl-16 {
  padding-left: 64px !important;
}
.px-16 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}
.py-16 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
.p-20 {
  padding: 80px !important;
}
.pt-20 {
  padding-top: 80px !important;
}
.pr-20 {
  padding-right: 80px !important;
}
.pb-20 {
  padding-bottom: 80px !important;
}
.pl-20 {
  padding-left: 80px !important;
}
.px-20 {
  padding-left: 80px !important;
  padding-right: 80px !important;
}
.py-20 {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}
.p-24 {
  padding: 96px !important;
}
.pt-24 {
  padding-top: 96px !important;
}
.pr-24 {
  padding-right: 96px !important;
}
.pb-24 {
  padding-bottom: 96px !important;
}
.pl-24 {
  padding-left: 96px !important;
}
.px-24 {
  padding-left: 96px !important;
  padding-right: 96px !important;
}
.py-24 {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}
.p-32 {
  padding: 128px !important;
}
.pt-32 {
  padding-top: 128px !important;
}
.pr-32 {
  padding-right: 128px !important;
}
.pb-32 {
  padding-bottom: 128px !important;
}
.pl-32 {
  padding-left: 128px !important;
}
.px-32 {
  padding-left: 128px !important;
  padding-right: 128px !important;
}
.py-32 {
  padding-top: 128px !important;
  padding-bottom: 128px !important;
}
.m-0 {
  margin: 0 !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mr-0 {
  margin-right: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.ml-0 {
  margin-left: 0 !important;
}
.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.m-1 {
  margin: 4px !important;
}
.mt-1 {
  margin-top: 4px !important;
}
.mr-1 {
  margin-right: 4px !important;
}
.mb-1 {
  margin-bottom: 4px !important;
}
.ml-1 {
  margin-left: 4px !important;
}
.mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
.my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.m-2 {
  margin: 8px !important;
}
.mt-2 {
  margin-top: 8px !important;
}
.mr-2 {
  margin-right: 8px !important;
}
.mb-2 {
  margin-bottom: 8px !important;
}
.ml-2 {
  margin-left: 8px !important;
}
.mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}
.my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.m-3 {
  margin: 12px !important;
}
.mt-3 {
  margin-top: 12px !important;
}
.mr-3 {
  margin-right: 12px !important;
}
.mb-3 {
  margin-bottom: 12px !important;
}
.ml-3 {
  margin-left: 12px !important;
}
.mx-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}
.my-3 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
.m-4 {
  margin: 16px !important;
}
.mt-4 {
  margin-top: 16px !important;
}
.mr-4 {
  margin-right: 16px !important;
}
.mb-4 {
  margin-bottom: 16px !important;
}
.ml-4 {
  margin-left: 16px !important;
}
.mx-4 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.my-4 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.m-5 {
  margin: 20px !important;
}
.mt-5 {
  margin-top: 20px !important;
}
.mr-5 {
  margin-right: 20px !important;
}
.mb-5 {
  margin-bottom: 20px !important;
}
.ml-5 {
  margin-left: 20px !important;
}
.mx-5 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}
.my-5 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.m-6 {
  margin: 24px !important;
}
.mt-6 {
  margin-top: 24px !important;
}
.mr-6 {
  margin-right: 24px !important;
}
.mb-6 {
  margin-bottom: 24px !important;
}
.ml-6 {
  margin-left: 24px !important;
}
.mx-6 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}
.my-6 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.m-7 {
  margin: 28px !important;
}
.mt-7 {
  margin-top: 28px !important;
}
.mr-7 {
  margin-right: 28px !important;
}
.mb-7 {
  margin-bottom: 28px !important;
}
.ml-7 {
  margin-left: 28px !important;
}
.mx-7 {
  margin-left: 28px !important;
  margin-right: 28px !important;
}
.my-7 {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}
.m-8 {
  margin: 32px !important;
}
.mt-8 {
  margin-top: 32px !important;
}
.mr-8 {
  margin-right: 32px !important;
}
.mb-8 {
  margin-bottom: 32px !important;
}
.ml-8 {
  margin-left: 32px !important;
}
.mx-8 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}
.my-8 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}
.m-9 {
  margin: 36px !important;
}
.mt-9 {
  margin-top: 36px !important;
}
.mr-9 {
  margin-right: 36px !important;
}
.mb-9 {
  margin-bottom: 36px !important;
}
.ml-9 {
  margin-left: 36px !important;
}
.mx-9 {
  margin-left: 36px !important;
  margin-right: 36px !important;
}
.my-9 {
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}
.m-10 {
  margin: 40px !important;
}
.mt-10 {
  margin-top: 40px !important;
}
.mr-10 {
  margin-right: 40px !important;
}
.mb-10 {
  margin-bottom: 40px !important;
}
.ml-10 {
  margin-left: 40px !important;
}
.mx-10 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}
.my-10 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
.m-12 {
  margin: 48px !important;
}
.mt-12 {
  margin-top: 48px !important;
}
.mr-12 {
  margin-right: 48px !important;
}
.mb-12 {
  margin-bottom: 48px !important;
}
.ml-12 {
  margin-left: 48px !important;
}
.mx-12 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}
.my-12 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}
.m-14 {
  margin: 56px !important;
}
.mt-14 {
  margin-top: 56px !important;
}
.mr-14 {
  margin-right: 56px !important;
}
.mb-14 {
  margin-bottom: 56px !important;
}
.ml-14 {
  margin-left: 56px !important;
}
.mx-14 {
  margin-left: 56px !important;
  margin-right: 56px !important;
}
.my-14 {
  margin-top: 56px !important;
  margin-bottom: 56px !important;
}
.m-16 {
  margin: 64px !important;
}
.mt-16 {
  margin-top: 64px !important;
}
.mr-16 {
  margin-right: 64px !important;
}
.mb-16 {
  margin-bottom: 64px !important;
}
.ml-16 {
  margin-left: 64px !important;
}
.mx-16 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}
.my-16 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}
.m-20 {
  margin: 80px !important;
}
.mt-20 {
  margin-top: 80px !important;
}
.mr-20 {
  margin-right: 80px !important;
}
.mb-20 {
  margin-bottom: 80px !important;
}
.ml-20 {
  margin-left: 80px !important;
}
.mx-20 {
  margin-left: 80px !important;
  margin-right: 80px !important;
}
.my-20 {
  margin-top: 80px !important;
  margin-bottom: 80px !important;
}
.m-24 {
  margin: 96px !important;
}
.mt-24 {
  margin-top: 96px !important;
}
.mr-24 {
  margin-right: 96px !important;
}
.mb-24 {
  margin-bottom: 96px !important;
}
.ml-24 {
  margin-left: 96px !important;
}
.mx-24 {
  margin-left: 96px !important;
  margin-right: 96px !important;
}
.my-24 {
  margin-top: 96px !important;
  margin-bottom: 96px !important;
}
.m-32 {
  margin: 128px !important;
}
.mt-32 {
  margin-top: 128px !important;
}
.mr-32 {
  margin-right: 128px !important;
}
.mb-32 {
  margin-bottom: 128px !important;
}
.ml-32 {
  margin-left: 128px !important;
}
.mx-32 {
  margin-left: 128px !important;
  margin-right: 128px !important;
}
.my-32 {
  margin-top: 128px !important;
  margin-bottom: 128px !important;
}
.gap-0 {
  gap: 0 !important;
}
.gap-x-0 {
  column-gap: 0 !important;
}
.gap-y-0 {
  row-gap: 0 !important;
}
.gap-1 {
  gap: 4px !important;
}
.gap-x-1 {
  column-gap: 4px !important;
}
.gap-y-1 {
  row-gap: 4px !important;
}
.gap-2 {
  gap: 8px !important;
}
.gap-x-2 {
  column-gap: 8px !important;
}
.gap-y-2 {
  row-gap: 8px !important;
}
.gap-3 {
  gap: 12px !important;
}
.gap-x-3 {
  column-gap: 12px !important;
}
.gap-y-3 {
  row-gap: 12px !important;
}
.gap-4 {
  gap: 16px !important;
}
.gap-x-4 {
  column-gap: 16px !important;
}
.gap-y-4 {
  row-gap: 16px !important;
}
.gap-5 {
  gap: 20px !important;
}
.gap-x-5 {
  column-gap: 20px !important;
}
.gap-y-5 {
  row-gap: 20px !important;
}
.gap-6 {
  gap: 24px !important;
}
.gap-x-6 {
  column-gap: 24px !important;
}
.gap-y-6 {
  row-gap: 24px !important;
}
.gap-7 {
  gap: 28px !important;
}
.gap-x-7 {
  column-gap: 28px !important;
}
.gap-y-7 {
  row-gap: 28px !important;
}
.gap-8 {
  gap: 32px !important;
}
.gap-x-8 {
  column-gap: 32px !important;
}
.gap-y-8 {
  row-gap: 32px !important;
}
.gap-9 {
  gap: 36px !important;
}
.gap-x-9 {
  column-gap: 36px !important;
}
.gap-y-9 {
  row-gap: 36px !important;
}
.gap-10 {
  gap: 40px !important;
}
.gap-x-10 {
  column-gap: 40px !important;
}
.gap-y-10 {
  row-gap: 40px !important;
}
.gap-12 {
  gap: 48px !important;
}
.gap-x-12 {
  column-gap: 48px !important;
}
.gap-y-12 {
  row-gap: 48px !important;
}
.gap-14 {
  gap: 56px !important;
}
.gap-x-14 {
  column-gap: 56px !important;
}
.gap-y-14 {
  row-gap: 56px !important;
}
.gap-16 {
  gap: 64px !important;
}
.gap-x-16 {
  column-gap: 64px !important;
}
.gap-y-16 {
  row-gap: 64px !important;
}
.gap-20 {
  gap: 80px !important;
}
.gap-x-20 {
  column-gap: 80px !important;
}
.gap-y-20 {
  row-gap: 80px !important;
}
.gap-24 {
  gap: 96px !important;
}
.gap-x-24 {
  column-gap: 96px !important;
}
.gap-y-24 {
  row-gap: 96px !important;
}
.gap-32 {
  gap: 128px !important;
}
.gap-x-32 {
  column-gap: 128px !important;
}
.gap-y-32 {
  row-gap: 128px !important;
}
.m-auto {
  margin: auto !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
.mt-auto {
  margin-top: auto !important;
}
.mr-auto {
  margin-right: auto !important;
}
.mb-auto {
  margin-bottom: auto !important;
}
.ml-auto {
  margin-left: auto !important;
}
:root {
  --spacing-card-padding: 24px;
  --spacing-card-margin: 16px;
  --spacing-section: 48px;
  --spacing-page-padding: 24px;
  --spacing-form-field: 16px;
  --spacing-button: 8px;
  --spacing-list-item-padding: 16px;
  --spacing-dialog-padding: 24px;
}
@media (max-width: 768px) {
  :root {
    --spacing-section: 32px;
    --spacing-page-padding: 16px;
    --spacing-card-padding: 16px;
  }
}
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}
.container.container-sm {
  max-width: 640px;
}
.container.container-md {
  max-width: 768px;
}
.container.container-lg {
  max-width: 1024px;
}
.container.container-xl {
  max-width: 1280px;
}
.container.container-2xl {
  max-width: 1536px;
}
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}
.section {
  padding: 48px 0;
}
@media (max-width: 768px) {
  .section {
    padding: 32px 0;
  }
}
.grid {
  display: grid;
  gap: 24px;
}
.grid.grid-cols-1 {
  grid-template-columns: repeat(1, 1fr);
}
.grid.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid.grid-cols-6 {
  grid-template-columns: repeat(6, 1fr);
}
.grid.grid-cols-12 {
  grid-template-columns: repeat(12, 1fr);
}
.grid.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
@media (max-width: 768px) {
  .grid {
    gap: 16px;
  }
  .grid.grid-cols-2,
  .grid.grid-cols-3,
  .grid.grid-cols-4,
  .grid.grid-cols-6,
  .grid.grid-cols-12 {
    grid-template-columns: 1fr !important;
  }
}
.flex {
  display: flex !important;
}
.inline-flex {
  display: inline-flex !important;
}
.flex-row {
  flex-direction: row !important;
}
.flex-col {
  flex-direction: column !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
.justify-start {
  justify-content: flex-start !important;
}
.justify-end {
  justify-content: flex-end !important;
}
.justify-center {
  justify-content: center !important;
}
.justify-between {
  justify-content: space-between !important;
}
.justify-around {
  justify-content: space-around !important;
}
.items-start {
  align-items: flex-start !important;
}
.items-end {
  align-items: flex-end !important;
}
.items-center {
  align-items: center !important;
}
.items-baseline {
  align-items: baseline !important;
}
.items-stretch {
  align-items: stretch !important;
}
:root,
.light-theme {
  --color-primary-50: #e8f0fe;
  --color-primary-100: #d2e3fc;
  --color-primary-200: #aecbfa;
  --color-primary-300: #8ab4f8;
  --color-primary-400: #669df6;
  --color-primary-500: #1a73e8;
  --color-primary-600: #1967d2;
  --color-primary-700: #1558b0;
  --color-primary-800: #185abc;
  --color-primary-900: #174ea6;
  --color-success-50: #e6f4ea;
  --color-success-100: #ceead6;
  --color-success-200: #a8dab5;
  --color-success-300: #81c995;
  --color-success-400: #5bb974;
  --color-success-500: #1e8e3e;
  --color-success-600: #1a7f37;
  --color-success-700: #137333;
  --color-success-800: #0d652d;
  --color-success-900: #0a5228;
  --color-warning-50: #fef7e0;
  --color-warning-100: #feefc3;
  --color-warning-200: #fde293;
  --color-warning-300: #fdd663;
  --color-warning-400: #fcc934;
  --color-warning-500: #f9ab00;
  --color-warning-600: #f29900;
  --color-warning-700: #e37400;
  --color-warning-800: #d56e00;
  --color-warning-900: #c26401;
  --color-error-50: #fce8e6;
  --color-error-100: #fad2cf;
  --color-error-200: #f6aea9;
  --color-error-300: #f28b82;
  --color-error-400: #ee675c;
  --color-error-500: #d93025;
  --color-error-600: #c5221f;
  --color-error-700: #b31412;
  --color-error-800: #a50e0e;
  --color-error-900: #8e0b0b;
  --color-info-50: #e8f0fe;
  --color-info-100: #d2e3fc;
  --color-info-200: #aecbfa;
  --color-info-300: #8ab4f8;
  --color-info-400: #669df6;
  --color-info-500: #1a73e8;
  --color-info-600: #1967d2;
  --color-info-700: #1558b0;
  --color-info-800: #185abc;
  --color-info-900: #174ea6;
  --color-grey-50: #f8f9fa;
  --color-grey-100: #f1f3f4;
  --color-grey-200: #e8eaed;
  --color-grey-300: #dadce0;
  --color-grey-400: #bdc1c6;
  --color-grey-500: #9aa0a6;
  --color-grey-600: #80868b;
  --color-grey-700: #5f6368;
  --color-grey-800: #3c4043;
  --color-grey-900: #202124;
  --surface-1: #ffffff;
  --surface-2: #f8f9fa;
  --surface-3: #f1f3f4;
  --surface-4: #e8eaed;
  --surface-5: #dadce0;
  --text-primary: rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.60);
  --text-disabled: rgba(0, 0, 0, 0.38);
  --text-hint: rgba(0, 0, 0, 0.38);
  --text-on-primary: #ffffff;
  --text-on-success: #ffffff;
  --text-on-warning: #000000;
  --text-on-error: #ffffff;
  --text-on-info: #ffffff;
  --border-light: rgba(0, 0, 0, 0.12);
  --border-medium: rgba(0, 0, 0, 0.24);
  --border-strong: rgba(0, 0, 0, 0.38);
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f1f3f4;
  --overlay-light: rgba(0, 0, 0, 0.04);
  --overlay-medium: rgba(0, 0, 0, 0.08);
  --overlay-strong: rgba(0, 0, 0, 0.12);
}
.dark-theme {
  --color-primary-50: #174ea6;
  --color-primary-100: #185abc;
  --color-primary-200: #1558b0;
  --color-primary-300: #1967d2;
  --color-primary-400: #1a73e8;
  --color-primary-500: #8ab4f8;
  --color-primary-600: #669df6;
  --color-primary-700: #aecbfa;
  --color-primary-800: #d2e3fc;
  --color-primary-900: #e8f0fe;
  --color-success-500: #81c995;
  --color-success-600: #5bb974;
  --color-success-700: #a8dab5;
  --color-warning-500: #fdd663;
  --color-warning-600: #fcc934;
  --color-warning-700: #fde293;
  --color-error-500: #f28b82;
  --color-error-600: #ee675c;
  --color-error-700: #f6aea9;
  --color-info-500: #8ab4f8;
  --color-info-600: #669df6;
  --color-info-700: #aecbfa;
  --color-grey-50: #202124;
  --color-grey-100: #292a2d;
  --color-grey-200: #3c4043;
  --color-grey-300: #5f6368;
  --color-grey-400: #80868b;
  --color-grey-500: #9aa0a6;
  --color-grey-600: #bdc1c6;
  --color-grey-700: #dadce0;
  --color-grey-800: #e8eaed;
  --color-grey-900: #f8f9fa;
  --surface-1: #202124;
  --surface-2: #292a2d;
  --surface-3: #3c4043;
  --surface-4: #5f6368;
  --surface-5: #80868b;
  --text-primary: rgba(255, 255, 255, 0.87);
  --text-secondary: rgba(255, 255, 255, 0.60);
  --text-disabled: rgba(255, 255, 255, 0.38);
  --text-hint: rgba(255, 255, 255, 0.38);
  --border-light: rgba(255, 255, 255, 0.12);
  --border-medium: rgba(255, 255, 255, 0.24);
  --border-strong: rgba(255, 255, 255, 0.38);
  --bg-primary: #202124;
  --bg-secondary: #292a2d;
  --bg-tertiary: #3c4043;
  --overlay-light: rgba(255, 255, 255, 0.04);
  --overlay-medium: rgba(255, 255, 255, 0.08);
  --overlay-strong: rgba(255, 255, 255, 0.12);
}
.bg-primary {
  background-color: var(--color-primary-500) !important;
}
.bg-primary-light {
  background-color: var(--color-primary-100) !important;
}
.bg-primary-dark {
  background-color: var(--color-primary-700) !important;
}
.bg-success {
  background-color: var(--color-success-500) !important;
}
.bg-success-light {
  background-color: var(--color-success-100) !important;
}
.bg-success-dark {
  background-color: var(--color-success-700) !important;
}
.bg-warning {
  background-color: var(--color-warning-500) !important;
}
.bg-warning-light {
  background-color: var(--color-warning-100) !important;
}
.bg-warning-dark {
  background-color: var(--color-warning-700) !important;
}
.bg-error {
  background-color: var(--color-error-500) !important;
}
.bg-error-light {
  background-color: var(--color-error-100) !important;
}
.bg-error-dark {
  background-color: var(--color-error-700) !important;
}
.bg-info {
  background-color: var(--color-info-500) !important;
}
.bg-info-light {
  background-color: var(--color-info-100) !important;
}
.bg-info-dark {
  background-color: var(--color-info-700) !important;
}
.bg-surface-1 {
  background-color: var(--surface-1) !important;
}
.bg-surface-2 {
  background-color: var(--surface-2) !important;
}
.bg-surface-3 {
  background-color: var(--surface-3) !important;
}
.bg-surface-4 {
  background-color: var(--surface-4) !important;
}
.bg-surface-5 {
  background-color: var(--surface-5) !important;
}
.bg-white {
  background-color: #ffffff !important;
}
.bg-transparent {
  background-color: transparent !important;
}
.text-primary {
  color: var(--text-primary) !important;
}
.text-secondary {
  color: var(--text-secondary) !important;
}
.text-disabled {
  color: var(--text-disabled) !important;
}
.text-hint {
  color: var(--text-hint) !important;
}
.text-success {
  color: var(--color-success-500) !important;
}
.text-warning {
  color: var(--color-warning-500) !important;
}
.text-error {
  color: var(--color-error-500) !important;
}
.text-info {
  color: var(--color-info-500) !important;
}
.text-white {
  color: #ffffff !important;
}
.text-black {
  color: #000000 !important;
}
.border {
  border: 1px solid var(--border-light) !important;
}
.border-light {
  border-color: var(--border-light) !important;
}
.border-medium {
  border-color: var(--border-medium) !important;
}
.border-strong {
  border-color: var(--border-strong) !important;
}
.border-primary {
  border-color: var(--color-primary-500) !important;
}
.border-success {
  border-color: var(--color-success-500) !important;
}
.border-warning {
  border-color: var(--color-warning-500) !important;
}
.border-error {
  border-color: var(--color-error-500) !important;
}
.border-info {
  border-color: var(--color-info-500) !important;
}
.border-t {
  border-top: 1px solid var(--border-light) !important;
}
.border-r {
  border-right: 1px solid var(--border-light) !important;
}
.border-b {
  border-bottom: 1px solid var(--border-light) !important;
}
.border-l {
  border-left: 1px solid var(--border-light) !important;
}
.border-0 {
  border: none !important;
}
.border-t-0 {
  border-top: none !important;
}
.border-r-0 {
  border-right: none !important;
}
.border-b-0 {
  border-bottom: none !important;
}
.border-l-0 {
  border-left: none !important;
}
:root .elevation-0,
.light-theme .elevation-0 {
  box-shadow: none !important;
}
:root .elevation-1,
.light-theme .elevation-1 {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important;
}
:root .elevation-2,
.light-theme .elevation-2 {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15) !important;
}
:root .elevation-3,
.light-theme .elevation-3 {
  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3) !important;
}
:root .elevation-4,
.light-theme .elevation-4 {
  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3) !important;
}
:root .elevation-5,
.light-theme .elevation-5 {
  box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3) !important;
}
.dark-theme .elevation-0 {
  box-shadow: none !important;
}
.dark-theme .elevation-1 {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 1px 3px 1px rgba(0, 0, 0, 0.25) !important;
}
.dark-theme .elevation-2 {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 2px 6px 2px rgba(0, 0, 0, 0.25) !important;
}
.dark-theme .elevation-3 {
  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.25), 0px 1px 3px rgba(0, 0, 0, 0.5) !important;
}
.dark-theme .elevation-4 {
  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.25), 0px 2px 3px rgba(0, 0, 0, 0.5) !important;
}
.dark-theme .elevation-5 {
  box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.5) !important;
}
:root {
  --elevation-card: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --elevation-card-hover: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
  --elevation-dialog: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);
  --elevation-app-bar: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --elevation-button: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --elevation-button-hover: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --elevation-fab: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
  --elevation-fab-hover: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
}
.dark-theme {
  --elevation-card: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 1px 3px 1px rgba(0, 0, 0, 0.25);
  --elevation-card-hover: 0px 4px 8px 3px rgba(0, 0, 0, 0.25), 0px 1px 3px rgba(0, 0, 0, 0.5);
  --elevation-dialog: 0px 8px 12px 6px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.5);
  --elevation-app-bar: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 1px 3px 1px rgba(0, 0, 0, 0.25);
  --elevation-button: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 1px 3px 1px rgba(0, 0, 0, 0.25);
  --elevation-button-hover: 0px 1px 2px rgba(0, 0, 0, 0.5), 0px 2px 6px 2px rgba(0, 0, 0, 0.25);
  --elevation-fab: 0px 4px 8px 3px rgba(0, 0, 0, 0.25), 0px 1px 3px rgba(0, 0, 0, 0.5);
  --elevation-fab-hover: 0px 6px 10px 4px rgba(0, 0, 0, 0.25), 0px 2px 3px rgba(0, 0, 0, 0.5);
}
:root {
  --duration-short: 200ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
  --easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
  --easing-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes cardEnter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.fade-in {
  animation: fadeIn 300ms cubic-bezier(0.2, 0, 0, 1);
}
.fade-in-up {
  animation: fadeInUp 300ms cubic-bezier(0.2, 0, 0, 1);
}
.fade-in-down {
  animation: fadeInDown 300ms cubic-bezier(0.2, 0, 0, 1);
}
.slide-in-left {
  animation: slideInLeft 300ms cubic-bezier(0.2, 0, 0, 1);
}
.slide-in-right {
  animation: slideInRight 300ms cubic-bezier(0.2, 0, 0, 1);
}
.scale-in {
  animation: scaleIn 250ms cubic-bezier(0.2, 0, 0, 1);
}
.card-enter {
  animation: cardEnter 400ms cubic-bezier(0.2, 0, 0, 1);
}
.stagger-1 {
  animation-delay: 100ms;
}
.stagger-2 {
  animation-delay: 200ms;
}
.stagger-3 {
  animation-delay: 300ms;
}
.stagger-4 {
  animation-delay: 400ms;
}
.stagger-5 {
  animation-delay: 500ms;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.snackbar-success .mdc-snackbar__surface {
  background:
    linear-gradient(
      135deg,
      #4caf50 0%,
      #2e7d32 100%) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4) !important;
  border-left: 4px solid #81c784;
}
.snackbar-success .mat-mdc-snack-bar-label {
  color: white !important;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.25px;
}
.snackbar-success .mat-mdc-button {
  color: #e8f5e9 !important;
  font-weight: 600;
}
.snackbar-success .mat-mdc-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.snackbar-info .mdc-snackbar__surface {
  background:
    linear-gradient(
      135deg,
      #2196f3 0%,
      #1565c0 100%) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4) !important;
  border-left: 4px solid #64b5f6;
}
.snackbar-info .mat-mdc-snack-bar-label {
  color: white !important;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.25px;
}
.snackbar-info .mat-mdc-button {
  color: #e3f2fd !important;
  font-weight: 600;
}
.snackbar-info .mat-mdc-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.snackbar-warning .mdc-snackbar__surface {
  background:
    linear-gradient(
      135deg,
      #ff9800 0%,
      #f57c00 100%) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4) !important;
  border-left: 4px solid #ffb74d;
}
.snackbar-warning .mat-mdc-snack-bar-label {
  color: white !important;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.25px;
}
.snackbar-warning .mat-mdc-button {
  color: #fff3e0 !important;
  font-weight: 600;
}
.snackbar-warning .mat-mdc-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.snackbar-error .mdc-snackbar__surface {
  background:
    linear-gradient(
      135deg,
      #f44336 0%,
      #c62828 100%) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4) !important;
  border-left: 4px solid #ef5350;
}
.snackbar-error .mat-mdc-snack-bar-label {
  color: white !important;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.25px;
}
.snackbar-error .mat-mdc-button {
  color: #ffebee !important;
  font-weight: 600;
}
.snackbar-error .mat-mdc-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
:host-context(.dark-theme) .snackbar-success .mdc-snackbar__surface {
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.6) !important;
}
:host-context(.dark-theme) .snackbar-info .mdc-snackbar__surface {
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.6) !important;
}
:host-context(.dark-theme) .snackbar-warning .mdc-snackbar__surface {
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.6) !important;
}
:host-context(.dark-theme) .snackbar-error .mdc-snackbar__surface {
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.6) !important;
}
.mat-mdc-snack-bar-container .mdc-snackbar__surface {
  border-radius: 8px !important;
  min-width: 344px;
  max-width: 568px;
  padding: 0 !important;
}
.mat-mdc-snack-bar-container .mat-mdc-snack-bar-label {
  padding: 14px 16px !important;
}
.mat-mdc-snack-bar-container .mat-mdc-button {
  margin: 8px 8px 8px 0 !important;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.light-theme {
  --mat-sys-background: ;
  --mat-sys-error: ;
  --mat-sys-error-container: ;
  --mat-sys-inverse-on-surface: ;
  --mat-sys-inverse-primary: ;
  --mat-sys-inverse-surface: ;
  --mat-sys-on-background: ;
  --mat-sys-on-error: ;
  --mat-sys-on-error-container: ;
  --mat-sys-on-primary: #d2e3fc;
  --mat-sys-on-primary-container: ;
  --mat-sys-on-primary-fixed: ;
  --mat-sys-on-primary-fixed-variant: ;
  --mat-sys-on-secondary: ;
  --mat-sys-on-secondary-container: ;
  --mat-sys-on-secondary-fixed: ;
  --mat-sys-on-secondary-fixed-variant: ;
  --mat-sys-on-surface: ;
  --mat-sys-on-surface-variant: ;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-on-tertiary-container: #0000ef;
  --mat-sys-on-tertiary-fixed: #00006e;
  --mat-sys-on-tertiary-fixed-variant: #0000ef;
  --mat-sys-outline: ;
  --mat-sys-outline-variant: ;
  --mat-sys-primary: ;
  --mat-sys-primary-container: ;
  --mat-sys-primary-fixed: ;
  --mat-sys-primary-fixed-dim: ;
  --mat-sys-scrim: ;
  --mat-sys-secondary: ;
  --mat-sys-secondary-container: ;
  --mat-sys-secondary-fixed: ;
  --mat-sys-secondary-fixed-dim: ;
  --mat-sys-shadow: ;
  --mat-sys-surface: ;
  --mat-sys-surface-bright: ;
  --mat-sys-surface-container: ;
  --mat-sys-surface-container-high: ;
  --mat-sys-surface-container-highest: ;
  --mat-sys-surface-container-low: ;
  --mat-sys-surface-container-lowest: ;
  --mat-sys-surface-dim: ;
  --mat-sys-surface-tint: ;
  --mat-sys-surface-variant: ;
  --mat-sys-tertiary: #343dff;
  --mat-sys-tertiary-container: #e0e0ff;
  --mat-sys-tertiary-fixed: #e0e0ff;
  --mat-sys-tertiary-fixed-dim: #bec2ff;
  --mat-sys-neutral-variant20: ;
  --mat-sys-neutral10: ;
  --mat-sys-level0:
    0px 0px 0px 0px ,
    0px 0px 0px 0px ,
    0px 0px 0px 0px ;
  --mat-sys-level1:
    0px 2px 1px -1px ,
    0px 1px 1px 0px ,
    0px 1px 3px 0px ;
  --mat-sys-level2:
    0px 3px 3px -2px ,
    0px 3px 4px 0px ,
    0px 1px 8px 0px ;
  --mat-sys-level3:
    0px 3px 5px -1px ,
    0px 6px 10px 0px ,
    0px 1px 18px 0px ;
  --mat-sys-level4:
    0px 5px 5px -3px ,
    0px 8px 10px 1px ,
    0px 3px 14px 2px ;
  --mat-sys-level5:
    0px 7px 8px -4px ,
    0px 12px 17px 2px ,
    0px 5px 22px 4px ;
  --mat-sys-body-large: 400 1rem / 1.5rem Roboto;
  --mat-sys-body-large-font: Roboto;
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 400;
  --mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;
  --mat-sys-body-medium-font: Roboto;
  --mat-sys-body-medium-line-height: 1.25rem;
  --mat-sys-body-medium-size: 0.875rem;
  --mat-sys-body-medium-tracking: 0.016rem;
  --mat-sys-body-medium-weight: 400;
  --mat-sys-body-small: 400 0.75rem / 1rem Roboto;
  --mat-sys-body-small-font: Roboto;
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 400;
  --mat-sys-display-large: 400 3.562rem / 4rem Roboto;
  --mat-sys-display-large-font: Roboto;
  --mat-sys-display-large-line-height: 4rem;
  --mat-sys-display-large-size: 3.562rem;
  --mat-sys-display-large-tracking: -0.016rem;
  --mat-sys-display-large-weight: 400;
  --mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;
  --mat-sys-display-medium-font: Roboto;
  --mat-sys-display-medium-line-height: 3.25rem;
  --mat-sys-display-medium-size: 2.812rem;
  --mat-sys-display-medium-tracking: 0;
  --mat-sys-display-medium-weight: 400;
  --mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;
  --mat-sys-display-small-font: Roboto;
  --mat-sys-display-small-line-height: 2.75rem;
  --mat-sys-display-small-size: 2.25rem;
  --mat-sys-display-small-tracking: 0;
  --mat-sys-display-small-weight: 400;
  --mat-sys-headline-large: 400 2rem / 2.5rem Roboto;
  --mat-sys-headline-large-font: Roboto;
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 400;
  --mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;
  --mat-sys-headline-medium-font: Roboto;
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 400;
  --mat-sys-headline-small: 400 1.5rem / 2rem Roboto;
  --mat-sys-headline-small-font: Roboto;
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 400;
  --mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;
  --mat-sys-label-large-font: Roboto;
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 700;
  --mat-sys-label-medium: 500 0.75rem / 1rem Roboto;
  --mat-sys-label-medium-font: Roboto;
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 700;
  --mat-sys-label-small: 500 0.688rem / 1rem Roboto;
  --mat-sys-label-small-font: Roboto;
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;
  --mat-sys-title-large-font: Roboto;
  --mat-sys-title-large-line-height: 1.75rem;
  --mat-sys-title-large-size: 1.375rem;
  --mat-sys-title-large-tracking: 0;
  --mat-sys-title-large-weight: 400;
  --mat-sys-title-medium: 500 1rem / 1.5rem Roboto;
  --mat-sys-title-medium-font: Roboto;
  --mat-sys-title-medium-line-height: 1.5rem;
  --mat-sys-title-medium-size: 1rem;
  --mat-sys-title-medium-tracking: 0.009rem;
  --mat-sys-title-medium-weight: 500;
  --mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;
  --mat-sys-title-small-font: Roboto;
  --mat-sys-title-small-line-height: 1.25rem;
  --mat-sys-title-small-size: 0.875rem;
  --mat-sys-title-small-tracking: 0.006rem;
  --mat-sys-title-small-weight: 500;
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
  --google-grey-50: #f8f9fa;
  --google-grey-100: #f1f3f4;
  --google-grey-200: #e8eaed;
  --google-grey-300: #dadce0;
  --google-grey-400: #bdc1c6;
  --google-grey-500: #9aa0a6;
  --google-grey-600: #80868b;
  --google-grey-700: #5f6368;
  --google-grey-800: #3c4043;
  --google-grey-900: #202124;
  --google-blue: #1a73e8;
  --google-blue-hover: #1765cc;
  --google-red: #d93025;
  --google-green: #1e8e3e;
  --google-yellow: #f9ab00;
}
.dark-theme {
  --mat-sys-background: ;
  --mat-sys-error: ;
  --mat-sys-error-container: ;
  --mat-sys-inverse-on-surface: ;
  --mat-sys-inverse-primary: ;
  --mat-sys-inverse-surface: ;
  --mat-sys-on-background: ;
  --mat-sys-on-error: ;
  --mat-sys-on-error-container: ;
  --mat-sys-on-primary: ;
  --mat-sys-on-primary-container: ;
  --mat-sys-on-primary-fixed: ;
  --mat-sys-on-primary-fixed-variant: ;
  --mat-sys-on-secondary: ;
  --mat-sys-on-secondary-container: ;
  --mat-sys-on-secondary-fixed: ;
  --mat-sys-on-secondary-fixed-variant: ;
  --mat-sys-on-surface: ;
  --mat-sys-on-surface-variant: ;
  --mat-sys-on-tertiary: #0001ac;
  --mat-sys-on-tertiary-container: #e0e0ff;
  --mat-sys-on-tertiary-fixed: #00006e;
  --mat-sys-on-tertiary-fixed-variant: #0000ef;
  --mat-sys-outline: ;
  --mat-sys-outline-variant: ;
  --mat-sys-primary: ;
  --mat-sys-primary-container: ;
  --mat-sys-primary-fixed: ;
  --mat-sys-primary-fixed-dim: ;
  --mat-sys-scrim: ;
  --mat-sys-secondary: ;
  --mat-sys-secondary-container: ;
  --mat-sys-secondary-fixed: ;
  --mat-sys-secondary-fixed-dim: ;
  --mat-sys-shadow: ;
  --mat-sys-surface: ;
  --mat-sys-surface-bright: ;
  --mat-sys-surface-container: ;
  --mat-sys-surface-container-high: ;
  --mat-sys-surface-container-highest: ;
  --mat-sys-surface-container-low: ;
  --mat-sys-surface-container-lowest: ;
  --mat-sys-surface-dim: ;
  --mat-sys-surface-tint: ;
  --mat-sys-surface-variant: ;
  --mat-sys-tertiary: #bec2ff;
  --mat-sys-tertiary-container: #0000ef;
  --mat-sys-tertiary-fixed: #e0e0ff;
  --mat-sys-tertiary-fixed-dim: #bec2ff;
  --mat-sys-neutral-variant20: ;
  --mat-sys-neutral10: ;
  --mat-sys-level0:
    0px 0px 0px 0px ,
    0px 0px 0px 0px ,
    0px 0px 0px 0px ;
  --mat-sys-level1:
    0px 2px 1px -1px ,
    0px 1px 1px 0px ,
    0px 1px 3px 0px ;
  --mat-sys-level2:
    0px 3px 3px -2px ,
    0px 3px 4px 0px ,
    0px 1px 8px 0px ;
  --mat-sys-level3:
    0px 3px 5px -1px ,
    0px 6px 10px 0px ,
    0px 1px 18px 0px ;
  --mat-sys-level4:
    0px 5px 5px -3px ,
    0px 8px 10px 1px ,
    0px 3px 14px 2px ;
  --mat-sys-level5:
    0px 7px 8px -4px ,
    0px 12px 17px 2px ,
    0px 5px 22px 4px ;
  --mat-sys-body-large: 400 1rem / 1.5rem Roboto;
  --mat-sys-body-large-font: Roboto;
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 400;
  --mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;
  --mat-sys-body-medium-font: Roboto;
  --mat-sys-body-medium-line-height: 1.25rem;
  --mat-sys-body-medium-size: 0.875rem;
  --mat-sys-body-medium-tracking: 0.016rem;
  --mat-sys-body-medium-weight: 400;
  --mat-sys-body-small: 400 0.75rem / 1rem Roboto;
  --mat-sys-body-small-font: Roboto;
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 400;
  --mat-sys-display-large: 400 3.562rem / 4rem Roboto;
  --mat-sys-display-large-font: Roboto;
  --mat-sys-display-large-line-height: 4rem;
  --mat-sys-display-large-size: 3.562rem;
  --mat-sys-display-large-tracking: -0.016rem;
  --mat-sys-display-large-weight: 400;
  --mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;
  --mat-sys-display-medium-font: Roboto;
  --mat-sys-display-medium-line-height: 3.25rem;
  --mat-sys-display-medium-size: 2.812rem;
  --mat-sys-display-medium-tracking: 0;
  --mat-sys-display-medium-weight: 400;
  --mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;
  --mat-sys-display-small-font: Roboto;
  --mat-sys-display-small-line-height: 2.75rem;
  --mat-sys-display-small-size: 2.25rem;
  --mat-sys-display-small-tracking: 0;
  --mat-sys-display-small-weight: 400;
  --mat-sys-headline-large: 400 2rem / 2.5rem Roboto;
  --mat-sys-headline-large-font: Roboto;
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 400;
  --mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;
  --mat-sys-headline-medium-font: Roboto;
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 400;
  --mat-sys-headline-small: 400 1.5rem / 2rem Roboto;
  --mat-sys-headline-small-font: Roboto;
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 400;
  --mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;
  --mat-sys-label-large-font: Roboto;
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 700;
  --mat-sys-label-medium: 500 0.75rem / 1rem Roboto;
  --mat-sys-label-medium-font: Roboto;
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 700;
  --mat-sys-label-small: 500 0.688rem / 1rem Roboto;
  --mat-sys-label-small-font: Roboto;
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;
  --mat-sys-title-large-font: Roboto;
  --mat-sys-title-large-line-height: 1.75rem;
  --mat-sys-title-large-size: 1.375rem;
  --mat-sys-title-large-tracking: 0;
  --mat-sys-title-large-weight: 400;
  --mat-sys-title-medium: 500 1rem / 1.5rem Roboto;
  --mat-sys-title-medium-font: Roboto;
  --mat-sys-title-medium-line-height: 1.5rem;
  --mat-sys-title-medium-size: 1rem;
  --mat-sys-title-medium-tracking: 0.009rem;
  --mat-sys-title-medium-weight: 500;
  --mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;
  --mat-sys-title-small-font: Roboto;
  --mat-sys-title-small-line-height: 1.25rem;
  --mat-sys-title-small-size: 0.875rem;
  --mat-sys-title-small-tracking: 0.006rem;
  --mat-sys-title-small-weight: 500;
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
  --google-grey-50: #202124;
  --google-grey-100: #292a2d;
  --google-grey-200: #3c4043;
  --google-grey-300: #5f6368;
  --google-grey-400: #80868b;
  --google-grey-500: #9aa0a6;
  --google-grey-600: #bdc1c6;
  --google-grey-700: #dadce0;
  --google-grey-800: #e8eaed;
  --google-grey-900: #f8f9fa;
  --google-blue: #8ab4f8;
  --google-blue-hover: #aecbfa;
  --google-red: #f28b82;
  --google-green: #81c995;
  --google-yellow: #fdd663;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  color-scheme: light;
  background-color: #fff;
  color: #202124;
  font-family:
    "Roboto",
    Arial,
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*:focus-visible {
  outline: 3px solid var(--mat-sys-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
*:focus:not(:focus-visible) {
  outline: none;
}
.keyboard-focus {
  outline: 3px solid var(--mat-sys-primary) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(var(--mat-sys-primary-rgb), 0.2) !important;
}
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--mat-sys-primary);
  color: var(--mat-sys-on-primary);
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  font-weight: 600;
  border-radius: 0 0 4px 0;
}
.skip-to-main:focus {
  top: 0;
}
a {
  color: var(--mat-sys-primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
a:hover {
  text-decoration-thickness: 3px;
}
a:focus-visible {
  outline: 3px solid var(--mat-sys-primary);
  outline-offset: 2px;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }
}
.page-header {
  margin-bottom: 32px;
  padding: 24px 0;
}
.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
  color: var(--mat-sys-on-surface);
}
.page-header p {
  margin: 0;
  font-size: 16px;
  color: var(--mat-sys-on-surface-variant);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}
.form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
}
.form-field-full-width {
  width: 100%;
  margin-bottom: 16px;
}
.form-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  margin-top: 24px;
}
@media (max-width: 768px) {
  .form-actions {
    flex-direction: column;
  }
  .form-actions button {
    width: 100%;
  }
}
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}
.error-container {
  padding: 24px;
  text-align: center;
  color: var(--mat-sys-error);
}
.table-container {
  overflow-x: auto;
  margin: 24px 0;
}
.mt-1 {
  margin-top: 8px;
}
.mt-2 {
  margin-top: 16px;
}
.mt-3 {
  margin-top: 24px;
}
.mt-4 {
  margin-top: 32px;
}
.mb-1 {
  margin-bottom: 8px;
}
.mb-2 {
  margin-bottom: 16px;
}
.mb-3 {
  margin-bottom: 24px;
}
.mb-4 {
  margin-bottom: 32px;
}
.p-1 {
  padding: 8px;
}
.p-2 {
  padding: 16px;
}
.p-3 {
  padding: 24px;
}
.p-4 {
  padding: 32px;
}
.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;
}
button,
a[role=button],
input[type=button],
input[type=submit],
input[type=reset],
.mat-mdc-button,
.mat-mdc-raised-button,
.mat-mdc-icon-button {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px;
}
p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5 !important;
  letter-spacing: 0.12em;
}
p {
  margin-bottom: 1em;
  word-spacing: 0.16em;
}
button + button,
a + a,
input + input {
  margin-left: 8px;
}
@media (max-width: 320px) {
  .card-grid,
  .action-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .container {
    padding: 8px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: high) {
  * {
    border-color: currentColor !important;
  }
  button,
  a {
    border: 2px solid currentColor !important;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1.125rem;
}
h6 {
  font-size: 1rem;
}
label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--mat-sys-on-surface);
}
.error-message {
  color: var(--mat-sys-error);
  font-weight: 500;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.error-message::before {
  content: "\26a0";
  font-size: 1.2em;
}
.success-message {
  color: var(--mat-sys-tertiary);
  font-weight: 500;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.success-message::before {
  content: "\2713";
  font-size: 1.2em;
}
.mat-mdc-dialog-container {
  --mdc-dialog-container-color: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow:
    0 11px 15px -7px rgba(0, 0, 0, 0.2),
    0 24px 38px 3px rgba(0, 0, 0, 0.14),
    0 9px 46px 8px rgba(0, 0, 0, 0.12) !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
@media (max-width: 768px) {
  .mat-mdc-dialog-container {
    max-width: 95vw !important;
    margin: 16px !important;
  }
}
@media (max-width: 480px) {
  .mat-mdc-dialog-container {
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}
.mat-mdc-dialog-surface {
  background-color: #ffffff !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-dialog-container {
    --mdc-dialog-container-color: #2c2c2c !important;
    background-color: #2c2c2c !important;
    box-shadow:
      0 11px 15px -7px rgba(0, 0, 0, 0.4),
      0 24px 38px 3px rgba(0, 0, 0, 0.28),
      0 9px 46px 8px rgba(0, 0, 0, 0.24) !important;
  }
  .mat-mdc-dialog-surface {
    background-color: #2c2c2c !important;
  }
}
mat-dialog-content {
  background: transparent;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}
mat-dialog-content > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
mat-dialog-actions {
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
@media (prefers-color-scheme: dark) {
  mat-dialog-actions {
    border-top-color: rgba(255, 255, 255, 0.12);
  }
}
.mat-mdc-select-panel {
  background-color: #ffffff !important;
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-select-panel {
    background-color: #2c2c2c !important;
  }
}
.mat-mdc-option {
  background-color: transparent;
}
.mat-mdc-option:hover {
  background-color: rgba(0, 0, 0, 0.04);
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-option:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
}
.mat-mdc-option.mat-mdc-option-active {
  background-color: rgba(0, 0, 0, 0.04);
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-option.mat-mdc-option-active {
    background-color: rgba(255, 255, 255, 0.08);
  }
}
.mat-mdc-option.mdc-list-item--selected {
  background-color: rgba(26, 115, 232, 0.12);
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-option.mdc-list-item--selected {
    background-color: rgba(138, 180, 248, 0.16);
  }
}
.cdk-overlay-container {
  z-index: 10000 !important;
}
.mat-datepicker-popup {
  z-index: 10001 !important;
}
.mat-datepicker-content {
  background-color: #ffffff !important;
  box-shadow:
    0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
}
@media (prefers-color-scheme: dark) {
  .mat-datepicker-content {
    background-color: #2c2c2c !important;
  }
}
mat-form-field input[type=time],
mat-form-field input[type=datetime-local] {
  cursor: pointer;
}
mat-form-field input[type=time]::-webkit-calendar-picker-indicator,
mat-form-field input[type=datetime-local]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  filter: invert(0.5);
}
mat-form-field input[type=time]::-webkit-calendar-picker-indicator:hover,
mat-form-field input[type=datetime-local]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  filter: invert(0.3);
}
@media (prefers-color-scheme: dark) {
  mat-form-field input[type=time]::-webkit-calendar-picker-indicator,
  mat-form-field input[type=datetime-local]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
  }
  mat-form-field input[type=time]::-webkit-calendar-picker-indicator:hover,
  mat-form-field input[type=datetime-local]::-webkit-calendar-picker-indicator:hover {
    filter: invert(1);
  }
}
mat-form-field input[type=time]::-webkit-datetime-edit-fields-wrapper,
mat-form-field input[type=datetime-local]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary {
  position: relative;
  overflow: hidden;
  border-radius: 8px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25px !important;
  transition: all 250ms cubic-bezier(0.2, 0, 0, 1) !important;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important;
}
.mat-mdc-raised-button.mat-primary::before,
.mat-mdc-unelevated-button.mat-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 70%);
  opacity: 0;
  transform: scale(0);
  transition: all 300ms cubic-bezier(0.2, 0, 0, 1);
}
.mat-mdc-raised-button.mat-primary:hover:not(:disabled),
.mat-mdc-unelevated-button.mat-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3) !important;
}
.mat-mdc-raised-button.mat-primary:active:not(:disabled)::before,
.mat-mdc-unelevated-button.mat-primary:active:not(:disabled)::before {
  opacity: 1;
  transform: scale(1);
}
.mat-mdc-raised-button.mat-primary:disabled,
.mat-mdc-unelevated-button.mat-primary:disabled {
  transform: none;
  box-shadow: none !important;
}
.mat-mdc-outlined-button {
  border-radius: 8px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25px !important;
  border-width: 1px !important;
  transition: all 200ms cubic-bezier(0.2, 0, 0, 1) !important;
}
.mat-mdc-outlined-button:hover:not(:disabled) {
  background-color: var(--overlay-light) !important;
  border-width: 2px !important;
}
.mat-mdc-button {
  border-radius: 8px !important;
  font-weight: 500 !important;
  letter-spacing: 0.25px !important;
  transition: all 200ms cubic-bezier(0.2, 0, 0, 1) !important;
}
.mat-mdc-button:hover:not(:disabled) {
  background-color: var(--overlay-light) !important;
}
.mat-mdc-icon-button {
  position: relative;
  transition: all 200ms cubic-bezier(0.2, 0, 0, 1) !important;
}
.mat-mdc-icon-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0);
  transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
}
.mat-mdc-icon-button:hover:not(:disabled) {
  background-color: var(--overlay-medium) !important;
}
.mat-mdc-icon-button:hover:not(:disabled)::before {
  opacity: 0.08;
  transform: scale(1);
}
.mat-mdc-icon-button:active:not(:disabled)::before {
  opacity: 0.12;
}
.mat-mdc-fab,
.mat-mdc-mini-fab {
  box-shadow: var(--elevation-fab) !important;
  transition: all 250ms cubic-bezier(0.2, 0, 0, 1) !important;
}
.mat-mdc-fab:hover:not(:disabled),
.mat-mdc-mini-fab:hover:not(:disabled) {
  transform: translateY(-4px);
  box-shadow: var(--elevation-fab-hover) !important;
}
.mat-mdc-fab:active:not(:disabled),
.mat-mdc-mini-fab:active:not(:disabled) {
  transform: translateY(-2px);
}
.button-loading {
  position: relative;
  pointer-events: none;
}
.button-loading .button-content {
  opacity: 0;
}
.button-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}
.mat-mdc-form-field .mat-mdc-text-field-wrapper {
  transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
}
.mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: var(--border-medium);
  transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
}
.mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: var(--color-grey-600);
}
.mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mdc-notched-outline .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mdc-notched-outline .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: var(--color-primary-500) !important;
  border-width: 2px !important;
}
.mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-form-field-label {
  color: var(--color-primary-500) !important;
}
.mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-invalid .mat-mdc-text-field-wrapper .mdc-notched-outline .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-invalid .mat-mdc-text-field-wrapper .mdc-notched-outline .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-invalid .mat-mdc-text-field-wrapper .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: var(--color-error-500) !important;
}
.mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-invalid .mat-mdc-form-field-label {
  color: var(--color-error-500) !important;
}
.mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-text-field-wrapper {
  background-color: var(--surface-2);
  border-radius: 8px 8px 0 0;
}
.mat-mdc-form-field.mat-form-field-appearance-fill .mat-mdc-text-field-wrapper:hover:not(.mdc-text-field--disabled) {
  background-color: var(--surface-3);
}
.mat-mdc-form-field.mat-form-field-appearance-fill.mat-focused .mat-mdc-text-field-wrapper {
  background-color: var(--surface-1);
}
.mat-mdc-form-field .mat-mdc-form-field-label {
  color: var(--text-secondary);
  transition: all 250ms cubic-bezier(0.2, 0, 0, 1);
}
.mat-mdc-form-field .mat-mdc-input-element {
  color: var(--text-primary);
  caret-color: var(--color-primary-500);
}
.mat-mdc-form-field .mat-mdc-form-field-error {
  color: var(--color-error-500);
  font-size: 12px;
  animation: fadeInDown 200ms cubic-bezier(0.2, 0, 0, 1);
}
.mat-mdc-form-field .mat-mdc-form-field-hint {
  color: var(--text-secondary);
  font-size: 12px;
}
.mat-mdc-form-field .mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field .mat-mdc-form-field-icon-suffix {
  color: var(--text-secondary);
  transition: color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field.mat-focused .mat-mdc-form-field-icon-suffix {
  color: var(--color-primary-500);
}
textarea.mat-mdc-input-element {
  resize: vertical;
  min-height: 80px;
}
textarea.mat-mdc-input-element::-webkit-scrollbar {
  width: 8px;
}
textarea.mat-mdc-input-element::-webkit-scrollbar-track {
  background: transparent;
}
textarea.mat-mdc-input-element::-webkit-scrollbar-thumb {
  background: var(--color-grey-300);
  border-radius: 4px;
}
textarea.mat-mdc-input-element::-webkit-scrollbar-thumb:hover {
  background: var(--color-grey-400);
}
.mat-mdc-card {
  border-radius: 12px !important;
  border: 1px solid var(--border-light);
  background: var(--surface-1);
  box-shadow: var(--elevation-card) !important;
  transition: all 300ms cubic-bezier(0.2, 0, 0, 1) !important;
}
.mat-mdc-card .mat-mdc-card-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-light);
}
.mat-mdc-card .mat-mdc-card-header .mat-mdc-card-title {
  font-family:
    "Google Sans",
    "Roboto",
    Arial,
    sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.mat-mdc-card .mat-mdc-card-header .mat-mdc-card-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
}
.mat-mdc-card .mat-mdc-card-content {
  padding: 24px;
  color: var(--text-primary);
}
.mat-mdc-card .mat-mdc-card-content:last-child {
  padding-bottom: 24px;
}
.mat-mdc-card .mat-mdc-card-actions {
  padding: 16px 24px;
  border-top: 1px solid var(--border-light);
}
.mat-mdc-card .mat-mdc-card-actions:last-child {
  padding-bottom: 20px;
}
.mat-mdc-card.hoverable {
  cursor: pointer;
}
.mat-mdc-card.hoverable:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-card-hover) !important;
  border-color: var(--color-primary-200);
}
.mat-mdc-card.clickable {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.mat-mdc-card.clickable::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary-500);
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}
.mat-mdc-card.clickable:hover::before {
  opacity: 0.04;
}
.mat-mdc-card.clickable:active::before {
  opacity: 0.08;
}
.mat-mdc-dialog-container .mdc-dialog__surface {
  border-radius: 16px !important;
  box-shadow: var(--elevation-dialog) !important;
  background: var(--surface-1);
  border: 1px solid var(--border-light);
  animation: scaleIn 250ms cubic-bezier(0.2, 0, 0, 1);
}
.mat-mdc-dialog-container .mat-mdc-dialog-title {
  font-family:
    "Google Sans",
    "Roboto",
    Arial,
    sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--text-primary);
  padding: 24px 24px 16px;
  margin: 0;
}
.mat-mdc-dialog-container .mat-mdc-dialog-content {
  color: var(--text-primary);
  padding: 0 24px;
  max-height: 65vh;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}
.mat-mdc-dialog-container .mat-mdc-dialog-content > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.mat-mdc-dialog-container .mat-mdc-dialog-content::-webkit-scrollbar {
  width: 8px;
}
.mat-mdc-dialog-container .mat-mdc-dialog-content::-webkit-scrollbar-track {
  background: transparent;
}
.mat-mdc-dialog-container .mat-mdc-dialog-content::-webkit-scrollbar-thumb {
  background: var(--color-grey-300);
  border-radius: 4px;
}
.mat-mdc-dialog-container .mat-mdc-dialog-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-grey-400);
}
.mat-mdc-dialog-container .mat-mdc-dialog-actions {
  padding: 16px 24px 24px;
  gap: 12px;
}
.mat-mdc-dialog-container .mat-mdc-dialog-actions button {
  min-width: 80px;
}
.cdk-overlay-dark-backdrop {
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fadeIn 200ms cubic-bezier(0.2, 0, 0, 1);
}
.mat-mdc-snack-bar-container.mdc-snackbar {
  border-radius: 8px !important;
  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3) !important;
  min-width: 344px !important;
}
.mat-mdc-snack-bar-container.mdc-snackbar .mdc-snackbar__surface {
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  padding: 16px !important;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mat-mdc-snack-bar-container.mdc-snackbar .mdc-snackbar__label {
  color: var(--text-primary);
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  line-height: 1.5;
  flex: 1;
}
.mat-mdc-snack-bar-container.mdc-snackbar .mat-mdc-button {
  color: var(--color-primary-500);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mat-mdc-snack-bar-container.success-snackbar .mdc-snackbar__surface {
  background: var(--color-success-50);
  border-left: 4px solid var(--color-success-500);
  border-color: var(--color-success-200);
}
.mat-mdc-snack-bar-container.success-snackbar .mdc-snackbar__label {
  color: var(--color-success-700);
}
.mat-mdc-snack-bar-container.success-snackbar .mdc-snackbar__label::before {
  content: "\2713";
  display: inline-block;
  margin-right: 8px;
  font-weight: bold;
  color: var(--color-success-500);
}
.mat-mdc-snack-bar-container.success-snackbar .mat-mdc-button {
  color: var(--color-success-600);
}
.mat-mdc-snack-bar-container.error-snackbar .mdc-snackbar__surface {
  background: var(--color-error-50);
  border-left: 4px solid var(--color-error-500);
  border-color: var(--color-error-200);
}
.mat-mdc-snack-bar-container.error-snackbar .mdc-snackbar__label {
  color: var(--color-error-700);
}
.mat-mdc-snack-bar-container.error-snackbar .mdc-snackbar__label::before {
  content: "\2715";
  display: inline-block;
  margin-right: 8px;
  font-weight: bold;
  color: var(--color-error-500);
}
.mat-mdc-snack-bar-container.error-snackbar .mat-mdc-button {
  color: var(--color-error-600);
}
.mat-mdc-snack-bar-container.warning-snackbar .mdc-snackbar__surface {
  background: var(--color-warning-50);
  border-left: 4px solid var(--color-warning-500);
  border-color: var(--color-warning-200);
}
.mat-mdc-snack-bar-container.warning-snackbar .mdc-snackbar__label {
  color: var(--color-warning-700);
}
.mat-mdc-snack-bar-container.warning-snackbar .mdc-snackbar__label::before {
  content: "\26a0";
  display: inline-block;
  margin-right: 8px;
  font-weight: bold;
  color: var(--color-warning-500);
}
.mat-mdc-snack-bar-container.warning-snackbar .mat-mdc-button {
  color: var(--color-warning-700);
}
.mat-mdc-snack-bar-container.info-snackbar .mdc-snackbar__surface {
  background: var(--color-info-50);
  border-left: 4px solid var(--color-info-500);
  border-color: var(--color-info-200);
}
.mat-mdc-snack-bar-container.info-snackbar .mdc-snackbar__label {
  color: var(--color-info-700);
}
.mat-mdc-snack-bar-container.info-snackbar .mdc-snackbar__label::before {
  content: "\2139";
  display: inline-block;
  margin-right: 8px;
  font-weight: bold;
  color: var(--color-info-500);
}
.mat-mdc-snack-bar-container.info-snackbar .mat-mdc-button {
  color: var(--color-info-600);
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-snack-bar-container.mdc-snackbar {
    box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.5) !important;
  }
  .mat-mdc-snack-bar-container.success-snackbar .mdc-snackbar__surface {
    background: rgba(30, 142, 62, 0.2);
    border-color: var(--color-success-700);
  }
  .mat-mdc-snack-bar-container.error-snackbar .mdc-snackbar__surface {
    background: rgba(217, 48, 37, 0.2);
    border-color: var(--color-error-700);
  }
  .mat-mdc-snack-bar-container.warning-snackbar .mdc-snackbar__surface {
    background: rgba(249, 171, 0, 0.2);
    border-color: var(--color-warning-700);
  }
  .mat-mdc-snack-bar-container.info-snackbar .mdc-snackbar__surface {
    background: rgba(26, 115, 232, 0.2);
    border-color: var(--color-info-700);
  }
}
.mat-mdc-chip {
  border-radius: 16px !important;
  padding: 6px 12px !important;
  font-family: "Roboto", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: var(--surface-3) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-light) !important;
  transition: all 200ms cubic-bezier(0.2, 0, 0, 1) !important;
  height: auto !important;
  min-height: 32px !important;
}
.mat-mdc-chip:hover:not(.mat-mdc-chip-disabled) {
  background: var(--surface-4) !important;
  transform: scale(1.02);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.mat-mdc-chip.mat-mdc-chip-selected {
  background: var(--color-primary-100) !important;
  color: var(--color-primary-700) !important;
  border-color: var(--color-primary-300) !important;
}
.mat-mdc-chip .mat-mdc-chip-remove {
  opacity: 0.6;
  transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1);
}
.mat-mdc-chip .mat-mdc-chip-remove:hover {
  opacity: 1;
}
.mat-mdc-chip.status-active,
.mat-mdc-chip.status-published,
.mat-mdc-chip.status-open,
.mat-mdc-chip.status-completed {
  background: var(--color-success-100) !important;
  color: var(--color-success-700) !important;
  border-color: var(--color-success-300) !important;
}
.mat-mdc-chip.status-inactive,
.mat-mdc-chip.status-draft,
.mat-mdc-chip.status-closed {
  background: var(--color-grey-200) !important;
  color: var(--color-grey-700) !important;
  border-color: var(--color-grey-400) !important;
}
.mat-mdc-chip.status-error,
.mat-mdc-chip.status-failed,
.mat-mdc-chip.status-rejected {
  background: var(--color-error-100) !important;
  color: var(--color-error-700) !important;
  border-color: var(--color-error-300) !important;
}
.mat-mdc-chip.status-warning,
.mat-mdc-chip.status-pending,
.mat-mdc-chip.status-in-progress {
  background: var(--color-warning-100) !important;
  color: var(--color-warning-700) !important;
  border-color: var(--color-warning-300) !important;
}
.mat-mdc-chip.status-info {
  background: var(--color-info-100) !important;
  color: var(--color-info-700) !important;
  border-color: var(--color-info-300) !important;
}
@media (prefers-color-scheme: dark) {
  .mat-mdc-chip {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.87) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
  .mat-mdc-chip:hover:not(.mat-mdc-chip-disabled) {
    background: rgba(255, 255, 255, 0.12) !important;
  }
  .mat-mdc-chip.mat-mdc-chip-selected {
    background: rgba(138, 180, 248, 0.2) !important;
    color: var(--color-primary-300) !important;
    border-color: var(--color-primary-500) !important;
  }
  .mat-mdc-chip.status-active,
  .mat-mdc-chip.status-published,
  .mat-mdc-chip.status-open,
  .mat-mdc-chip.status-completed {
    background: rgba(129, 201, 149, 0.2) !important;
    color: var(--color-success-300) !important;
    border-color: var(--color-success-600) !important;
  }
  .mat-mdc-chip.status-error,
  .mat-mdc-chip.status-failed,
  .mat-mdc-chip.status-rejected {
    background: rgba(242, 139, 130, 0.2) !important;
    color: var(--color-error-300) !important;
    border-color: var(--color-error-600) !important;
  }
  .mat-mdc-chip.status-warning,
  .mat-mdc-chip.status-pending,
  .mat-mdc-chip.status-in-progress {
    background: rgba(253, 214, 99, 0.2) !important;
    color: var(--color-warning-300) !important;
    border-color: var(--color-warning-600) !important;
  }
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  background: var(--color-error-500);
  color: white;
  line-height: 1;
}
.badge.badge-primary {
  background: var(--color-primary-500);
}
.badge.badge-success {
  background: var(--color-success-500);
}
.badge.badge-warning {
  background: var(--color-warning-500);
  color: var(--color-grey-900);
}
.badge.badge-info {
  background: var(--color-info-500);
}
.badge.badge-dot {
  min-width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
}
.fullscreen-dialog .mat-mdc-dialog-container {
  padding: 0;
  border-radius: 0;
  max-width: 100vw !important;
  max-height: 100vh !important;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.fullscreen-dialog .mdc-dialog__surface {
  border-radius: 0;
}
.cdk-overlay-pane {
  max-width: 95vw !important;
  box-sizing: border-box !important;
}
@media (max-width: 480px) {
  .cdk-overlay-pane {
    max-width: 100vw !important;
  }
}
.mat-mdc-dialog-container mat-form-field,
.mat-mdc-dialog-container .mat-mdc-form-field {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.mat-mdc-dialog-container input,
.mat-mdc-dialog-container textarea,
.mat-mdc-dialog-container select,
.mat-mdc-dialog-container .mat-mdc-input-element {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.mat-mdc-dialog-container table {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.mat-mdc-dialog-container img,
.mat-mdc-dialog-container video,
.mat-mdc-dialog-container iframe {
  max-width: 100% !important;
  height: auto !important;
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */