@layer reset, theme, components, layout, utilities;

@layer reset {
	*, *::before, *::after {
		box-sizing: border-box;
	}

	html {
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
		overscroll-behavior-x: none;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	img, svg, video {
		max-width: 100%;
		height: auto;
	}
}

:root {
  --size-content-4: 80ch;
  --size-content-5: 100ch;
  --size-1_5: 0.35rem;
  --size-2_5: 0.75rem;
  --layer-page-overlay: 10;
  --gray-10: #0d1117;
  --gray-11: #010409;
  --font-size-0_5: 0.85rem;
  --font-size-000: 0.75rem;
}

@layer theme {
  :root {
    color-scheme: light dark;
    --surface-0: var(--gray-9);
    --surface-1: var(--gray-0);
    --surface-2: var(--gray-1);
    --surface-3: var(--gray-2);
    --surface-4: var(--gray-3);
    --text-1: var(--gray-9);
    --text-2: var(--gray-7);
    --brand: var(--blue-6);
    --brand-hover: var(--blue-7);
    --success: var(--green-6);
    --success-hover: var(--green-7);
    --danger: var(--red-6);
    --danger-hover: var(--red-7);
    --warning: var(--yellow-3);
    --warning-hover: var(--yellow-4);
    --info: var(--cyan-6);
    --info-hover: var(--cyan-7);
    --secondary: var(--gray-6);
    --secondary-hover: var(--gray-7);
    --input-bg: var(--gray-0);
    --input-bg-focus: var(--gray-0);
    --input-border: var(--gray-4);
    --select-caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  }

  [data-theme="dark"] {
    --surface-0: var(--gray-10);
    --surface-1: var(--gray-9);
    --surface-2: var(--gray-8);
    --surface-3: var(--gray-7);
    --surface-4: var(--gray-6);
    --text-1: var(--gray-1);
    --text-2: var(--gray-3);
    --brand: var(--blue-7);
    --brand-hover: var(--blue-4);
    --success: var(--green-10);
    --success-hover: var(--green-7);
    --danger: var(--red-7);
    --danger-hover: var(--red-5);
    --warning: var(--yellow-4);
    --warning-hover: var(--yellow-2);
    --info: var(--cyan-7);
    --info-hover: var(--cyan-5);
    --secondary: var(--indigo-8);
    --secondary-hover: var(--indigo-6);
    --input-bg: var(--gray-9); /* Darker than gray-9 */
    --input-bg-focus: var(--gray-10); /* Near black */
    --input-border: var(--gray-8);
    --select-caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  }

	body {
		background-color: var(--surface-1);
		color: var(--text-1);
		font-family: var(--font-sans);
		line-height: var(--font-lineheight-3);
		margin: 0;
		padding: 0;
	}

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: var(--size-6);
    margin-bottom: var(--size-2);
    line-height: var(--font-lineheight-1);
    border-left: 4px solid var(--accent, var(--brand));
    padding-left: var(--size-2_5);
  }

  h1:first-child,
  h2:first-child,
  h3:first-child {
    margin-top: 0;
  }

  p {
    margin-top: 0;
    margin-bottom: var(--size-3);
  }
}

@layer layout {

  pre[class*="shj-lang-"],
  pre {
    tab-size: 2;
    background-color: var(--surface-3);
    padding: var(--size-4);
    border-radius: var(--radius-2);
    overflow-x: auto;
    margin-top: var(--size-4);
    margin-inline: auto;
    font-size: var(--font-size-1);
    line-height: var(--font-lineheight-1);
    border: var(--border-size-1) solid var(--surface-3);
    width: 100%;

    @media (min-width: 600px) {
      width: 90%;
      font-size: var(--font-size-2);
    }

    & code {
      background: none;
      padding: 0;
      border-radius: 0;
      font-family: var(--font-mono);
      color: var(--text-1);
    }
  }

  code {
    background-color: var(--surface-3);
    padding: var(--size-1) var(--size-2);
    border-radius: var(--radius-1);
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  .app-layout {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
  }

  .app-header {
    background-color: var(--surface-2);
    border-bottom: var(--border-size-1) solid var(--surface-3);
    position: sticky;
    top: 0;
    z-index: var(--layer-page-overlay);

		& .app-header-inner {
			padding: var(--size-2) var(--size-3);
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--size-2);

			@media (min-width: 400px) {
				padding: var(--size-2) var(--size-5);
				gap: var(--size-3);
			}
		}

		& .header-left {
			display: flex;
			align-items: center;
			gap: var(--size-2);

			@media (min-width: 400px) {
				gap: var(--size-3);
			}
		}

		& .header-app-title {
			font-size: var(--font-size-2);
			font-weight: var(--font-weight-7);
			color: var(--text-1);
			white-space: nowrap;
		}

		& .header-app-title-dropdown {
			display: block;

			& summary {
				font-size: var(--font-size-2);
				font-weight: var(--font-weight-7);
				color: var(--text-1);
				padding: 0;
				white-space: nowrap;
				display: flex;
				align-items: center;
				gap: var(--size-1);
			}
			& summary::after {
				display: none !important;
			}
			& ul {
				min-width: max-content;
			}
		}

		& .header-app-links {
			display: flex;
			align-items: center;
			gap: var(--size-1);
		}

		& .logo {
			display: flex;
			align-items: center;
			gap: var(--size-2);
			font-weight: var(--font-weight-7);
			font-size: var(--font-size-2);
			text-decoration: none;
			transition: transform 0.2s var(--ease-3);

			&:hover {
				transform: scale(1.04);
			}

      & a {
        color: inherit;
        text-decoration: none;
        display: flex;
      }

      & .icon,
      & svg,
      & .logo-svg {
        height: var(--size-6);
        width: var(--size-8);
        flex-shrink: 0;

        & svg { height: 100%; width: 100%; }

        @media (min-width: 400px) {
          height: var(--size-7);
          width: var(--size-10);
        }
      }
    }


		& .search-bar {
			flex: none;

			@media (min-width: 400px) {
				flex: 1;
				max-width: calc((var(--size-content-1) + var(--size-content-2))/2);
			}

			/* Mobile visibility overrides for header-context */
			& input {
				display: none;
				@media (min-width: 400px) { display: block; }
			}
			& .search-icon {
				display: none;
				@media (min-width: 400px) { display: block; }
			}
		}

		& #global-search-container {
			@media (min-width: 400px) {
				background-color: var(--surface-1);
				border: var(--border-size-1) solid var(--surface-3);
				border-radius: var(--radius-2);
				height: var(--size-7);
				transition: background-color 0.2s, border-color 0.2s;

				&:focus-within {
					background-color: var(--surface-2);
					border-color: var(--brand);
				}

				& input {
					border: none;
					background: transparent;
					height: 100%;
					padding: 0;
					padding-right: var(--size-3);
				}

				& .search-icon {
					position: static;
					margin-left: var(--size-3);
					margin-right: var(--size-2);
					transform: none;
				}
			}
		}

		& .search-badge-wrap {
			display: flex;
			align-items: center;
			color: var(--brand);
			font-weight: var(--font-weight-6);
			font-size: var(--font-size-1);
			white-space: nowrap;

			&[hidden] {
				display: none !important;
			}
		}

		& .search-badge-divider {
			color: var(--surface-4);
			margin: 0 var(--size-2);
			font-weight: var(--font-weight-4);
		}

		& .nav-divider {
			display: none;
			width: 1px;
			height: var(--size-5);
			background-color: var(--surface-3);
			margin: 0 var(--size-2);
			align-self: center;

			@media (min-width: 400px) {
				display: block;
			}
		}

		& .nav-link {
			display: none;
			color: var(--text-2);
			text-decoration: none;
			font-weight: var(--font-weight-5);
			font-size: var(--font-size-1);
			padding: var(--size-1);
			border-radius: var(--radius-2);
			transition: background-color 0.2s, color 0.2s;
			user-select: none;
			
			@media (min-width: 400px) {
				display: block;
			}

			&:hover {
				background-color: var(--surface-2);
				color: var(--text-1);
			}
			
			&:active {
				background-color: var(--surface-3);
			}
		}

		& .nav-actions {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex: 1;
			gap: var(--size-2);

			@media (min-width: 400px) {
				gap: var(--size-1);
			}
		}

    & .avatar {
      width: var(--size-6);
      height: var(--size-6);
      border-radius: var(--radius-round);
      background-color: var(--surface-3);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;

      & .icon,
      & svg {
        width: 80%;
        height: 80%;
      }
    }

		& .dropdown summary {
			font-size: var(--font-size-1);
			font-weight: var(--font-weight-5);
			padding: var(--size-1);
			display: flex;
			align-items: center;
			gap: var(--size-2);

			@media (min-width: 400px) {
				padding: var(--size-1) var(--size-3);
				padding-right: var(--size-4);
			}

			& .user-name {
				display: none;
				@media (min-width: 400px) {
					display: inline;
				}
			}

			&::after {
				@media (max-width: 399px) {
					display: none !important;
				}
			}
		}

		& .mobile-search-overlay {
			display: none;
			position: absolute;
			inset: 0;
			background-color: var(--surface-2);
			z-index: 100;
			padding: 0 var(--size-3);
			align-items: center;
			gap: var(--size-2);

			&[data-state="active"] {
				display: flex;
				animation: mobile-search-in 0.2s var(--ease-out-3);
			}

			@media (min-width: 400px) {
				display: none !important;
			}

			& .mobile-search-close {
				background: none;
				border: none;
				padding: var(--size-1);
				color: var(--text-2);
				cursor: pointer;
				display: flex;
				
				& svg {
					width: var(--size-5);
					height: var(--size-5);
				}
			}

			& .mobile-search-input {
				flex: 1;
				background: none;
				border: none;
				font-size: var(--font-size-2);
				color: var(--text-1);
				padding: var(--size-2) 0;
				outline: none;
				
				&::placeholder {
					opacity: 0.4;
				}
			}
		}
	}

	@keyframes mobile-search-in {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.app-main {
		display: grid;
	}

  .content-layout {
    display: grid;
  }

	.sidebar {
		background-color: color-mix(in srgb, var(--surface-1) 50%, var(--surface-2));
		border-right: var(--border-size-1) solid var(--surface-3);
		display: none;

		@media (min-width: 400px) {
			display: block;
		}
	}

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--size-1);
    padding: var(--size-5);

    & button[data-variant="ghost"] {
      justify-content: flex-start;
    }

		@media (min-width: 400px) {
			position: sticky;
			top: 56px;
			max-height: calc(100vh - 56px);
      min-height: calc(100vh - 100px);
			overflow-y: auto;
      overflow-x: hidden;
		}
  }

	.content {
		padding: var(--size-3);
		min-width: 0;

		@media (min-width: 400px) {
			padding: var(--size-5);
		}
	}

	@media (min-width: 900px) {
		.content-layout {
			grid-template-columns: 250px 1fr;
		}
	}

  .sidebar-header {
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-8);
    text-transform: uppercase;
    letter-spacing: var(--font-letterspacing-4);
    color: var(--text-2);
    margin-bottom: var(--size-2);
    opacity: 0.6;
    user-select: none;
    
    &:first-child {
      margin-top: 0;
    }
  }

  .section-header {
    display: block;
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-8);
    text-transform: uppercase;
    letter-spacing: var(--font-letterspacing-2);
    color: var(--text-1);
    margin-top: var(--size-2);
    margin-bottom: var(--size-2);
    user-select: none;
    line-height: 1;
    
    &:first-child {
      margin-top: 0;
    }
  }

  .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--size-6);
    align-items: start;
  }



  .app-footer {
    background-color: var(--surface-2);
    border-top: var(--border-size-1) solid var(--surface-3);
    color: var(--text-2);
  }

  .app-footer-inner {
    padding: var(--size-2);
    text-align: center;
    width: 100%;
    font-size: var(--font-size-00);
  }

	/* Global centering trigger */
	.app-centered .app-header-inner,
	.app-centered .app-main,
	.app-centered .app-footer-inner {
		width: 100%;
		max-width: 100vw;
		margin-inline: auto;

		@media (min-width: 400px) {
			max-width: 1320px;
		}
	}

	.app-wide .app-header-inner,
	.app-wide .app-main,
	.app-wide .app-footer-inner {
		width: 100%;
		max-width: 100vw;
		margin-inline: auto;

		@media (min-width: 400px) {
			max-width: 1800px;
		}
	}
}

@layer components {

	/* Autocomplete */
	.ac-wrapper { position: relative; }
	.ac-results { position: absolute; z-index: 100; min-width: 220px; max-width: 400px; max-height: 280px; overflow-y: auto; background-color: var(--surface-2); border: var(--border-size-1) solid var(--surface-3); border-radius: var(--radius-2); box-shadow: var(--shadow-3); padding: var(--size-1) 0; }
	.ac-item { padding: var(--size-1) var(--size-2); font-size: var(--font-size-1); cursor: pointer; color: var(--text-1); transition: background-color 0.1s; }
	.ac-item:hover, .ac-item.ac-active { background-color: var(--brand); color: var(--gray-0); }
	.ac-item:hover a, .ac-item.ac-active a { color: var(--gray-0); }
	.ac-item.ac-active .ac-highlight { color: var(--gray-0); }
	.ac-item.ac-empty { cursor: default; color: var(--text-2); font-style: italic; }
	.ac-item.ac-empty:hover { background-color: transparent; color: var(--text-2); }
	.ac-highlight { font-weight: var(--font-weight-7); color: var(--brand); white-space: pre-wrap; }
	.is-pre { white-space: pre !important; }
	.ac-item a { color: inherit; text-decoration: none; display: block; }

  /* Search Bar */
  .search-bar {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;

    & .search-toggle {
      display: flex;
      background: none;
      border: none;
      padding: var(--size-1);
      color: var(--text-2);
      cursor: pointer;
      
      @media (min-width: 400px) {
        display: none;
      }

      & .icon,
      & svg {
        position: static;
        width: var(--size-5);
        height: var(--size-5);
        opacity: 1;
        transform: none;
      }
    }

    & .search-icon {
      position: absolute;
      left: var(--font-size-0);
      width: var(--font-size-1);
      height: var(--font-size-1);
      color: var(--text-2);
      pointer-events: none;
      opacity: 0.6;
      transform: translateY(1px);
      display: block;
      z-index: 10;
    }

    & input {
      width: 100%;
      padding: var(--size-1) var(--size-3);
      padding-left: 2.25rem;
      height: var(--size-7);
      line-height: var(--size-7);
      font-size: var(--font-size-1);
      border: var(--border-size-1) solid var(--surface-3);
      background-color: var(--surface-1);
      color: var(--text-1);
      outline-color: var(--brand);
      border-radius: var(--radius-2);
      
      &:focus {
        background-color: var(--surface-2);
        border-color: var(--brand);
      }
    }
  }


  /* Content Header */
  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--size-3);
    
    & h1 {
        margin: 0;
    }
  }

  /* Icon Wrapper */
  .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    color: currentColor;

    & svg {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      display: block;

      /* Auto-show icons if they use fills instead of strokes */
      &[fill="currentColor"] {
        fill: currentColor;
        stroke: none;
      }
    }
    &[data-size="8"] { width: 8px; height: 8px; }
    &[data-size="10"] { width: 10px; height: 10px; }
    &[data-size="12"] { width: 12px; height: 12px; }
    &[data-size="14"] { width: 14px; height: 14px; }
    &[data-size="16"] { width: 16px; height: 16px; }
    &[data-size="18"] { width: 18px; height: 18px; }
    &[data-size="20"] { width: 20px; height: 20px; }
    &[data-size="24"] { width: 24px; height: 24px; }
    &[data-size="32"] { width: 32px; height: 32px; }
    &[data-size="48"] { width: 48px; height: 48px; }
    &[data-size="64"] { width: 64px; height: 64px; }
  }

  /* Button */
  button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--size-2);
    padding: var(--size-2) var(--size-3);
    border-radius: var(--radius-2);
    font-weight: var(--font-weight-6);
    border: none;
    cursor: pointer;
    background-color: var(--surface-3);
    color: var(--text-1);

    & .icon,
    & svg {
      width: 1.25em;
      height: 1.25em;
      flex-shrink: 0;
    }

    &:hover:not(:disabled) {
      background-color: var(--surface-2);
      filter: brightness(0.95);
    }

    &:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    /* Variants */
    &[data-variant="primary"] {
      background-color: var(--brand);
      color: var(--gray-0);

      &:hover:not(:disabled) {
        background-color: var(--brand-hover);
      }
    }

    &[data-variant="danger"] {
      background-color: var(--danger);
      color: var(--gray-0);

      &:hover:not(:disabled) {
        background-color: var(--danger-hover);
      }
    }

    &[data-variant="ghost"] {
      background-color: transparent;

      &:hover:not(:disabled) {
        background-color: var(--surface-2);
      }
    }

    &[data-variant="secondary"] {
      background-color: var(--secondary);
      color: var(--gray-0);

      &:hover:not(:disabled) {
        background-color: var(--secondary-hover);
      }
    }

    &[data-variant="success"] {
      background-color: var(--success);
      color: var(--gray-0);

      &:hover:not(:disabled) {
        background-color: var(--success-hover);
      }
    }

    &[data-variant="warning"] {
      background-color: var(--warning);
      color: var(--gray-9);

      &:hover:not(:disabled) {
        background-color: var(--warning-hover);
      }
    }

    &[data-variant="info"] {
      background-color: var(--info);
      color: var(--gray-0);

      &:hover:not(:disabled) {
        background-color: var(--info-hover);
      }
    }


    /* Sizes */
    &[data-size="small"] {
      padding: var(--size-2);
      font-size: var(--font-size-00);
    }

    &[data-size="large"] {
      padding: var(--size-3) var(--size-5);
      font-size: var(--font-size-2);
    }

    /* States */
    &[data-state="loading"] {
      opacity: 0.7;
      pointer-events: none;
    }
  }

  /* Button Group */
  .button-group {
    display: inline-flex;

    & button {
      border-radius: 0;
      border-right: var(--border-size-1) solid var(--surface-1);

      &:first-child {
        border-top-left-radius: var(--radius-2);
        border-bottom-left-radius: var(--radius-2);
      }

      &:last-child {
        border-top-right-radius: var(--radius-2);
        border-bottom-right-radius: var(--radius-2);
        border-right: none;
      }
    }
  }

  /* Card */
  .card {
    background-color: var(--surface-2);
    border-radius: var(--radius-3);
    padding: var(--size-3);
    box-shadow: var(--shadow-2);
    display: flex;
    flex-direction: column;
    gap: var(--size-3);
    max-width: 100%;
    min-width: 0;
    margin-bottom: var(--size-6);

    & header {
      font-weight: var(--font-weight-6);
      font-size: var(--font-size-3);
      border-bottom: var(--border-size-1) solid var(--surface-3);
      padding-bottom: var(--size-2);
    }

    & footer {
      margin-top: auto;
      padding-top: var(--size-3);
      border-top: var(--border-size-1) solid var(--surface-3);
      display: flex;
      justify-content: flex-end;
      gap: var(--size-2);
    }
  }
  
  /* Tabular Card */
  .tabular-card {
    background-color: var(--surface-1);
    border: var(--border-size-1) solid var(--surface-3); /* Matches Card border */
    border-radius: var(--radius-3);
    overflow: hidden;

    & .tabular-card-header {
      padding: var(--size-2) var(--size-3);
      background-color: var(--surface-2);
      border-bottom: var(--border-size-1) solid var(--surface-3);
      font-weight: var(--font-weight-7);
      font-size: var(--font-size-2);
      display: flex;
      align-items: center;
      gap: var(--size-3);

      & a {
        text-decoration: none;
        color: inherit;
        display: flex;
        align-items: center;
        gap: inherit;
        flex: 1;

        &:hover { color: var(--brand); }
      }
    }

    & .tabular-card-body {
      display: grid;
      grid-template-columns: 1fr;
    }

    & .tabular-row {
      display: flex;
      align-items: center;
      padding: var(--size-2) var(--size-3);
      gap: var(--size-3);
      border-bottom: var(--border-size-1) solid var(--surface-2);
      text-decoration: none;
      color: inherit;
      transition: background-color 0.1s;

      &:hover { background-color: var(--surface-2); }
      &:last-child { border-bottom: none; }
    }

    & .tabular-info {
      flex: 1;
      min-width: 0;
    }

    & .tabular-title {
      font-weight: var(--font-weight-6);
      white-space: normal;
      display: block;
      line-height: var(--font-lineheight-3);
    }

    & .tabular-subtitle {
      font-size: var(--font-size-0);
      color: var(--text-2);
    }

    & .tabular-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-2);
      flex-shrink: 0;
    }
  }

  /* Shared mini thumb */
  .thumb-mini, .thumb-mini-placeholder {
    width: 40px;
    height: 60px;
    border-radius: var(--radius-1);
    object-fit: contain;
    background-color: var(--surface-3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
  }

  .empty-state {
    padding: var(--size-8);
    text-align: center;
    color: var(--text-2);
    font-style: italic;
  }



  /* Progress */
  progress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--size-2);
    border: none;
    border-radius: var(--radius-round);
    background-color: var(--surface-2);
    overflow: hidden;

    &::-webkit-progress-bar {
      background-color: var(--surface-2);
    }

    &::-webkit-progress-value {
      background-color: var(--brand);
      transition: width 0.3s ease;
    }

    &::-moz-progress-bar {
      background-color: var(--brand);
      transition: width 0.3s ease;
    }

    &[data-variant="success"]::-webkit-progress-value {
      background-color: var(--success);
    }

    &[data-variant="success"]::-moz-progress-bar {
      background-color: var(--success);
    }
  }

  /* Switch */
  .switch {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    cursor: pointer;
    --switch-width: calc((var(--size-7) + var(--size-8)) / 2);

    & input[type="checkbox"] {
      appearance: none;
      width: var(--switch-width);
      height: var(--size-5);
      background-color: var(--surface-3);
      border-radius: var(--radius-round);
      cursor: pointer;
      outline: none;
      transition: background-color 0.2s ease;
      margin: 0;
      flex-shrink: 0;
      display: grid;
      place-items: center;

      &::after {
        content: '';
        width: calc(var(--size-5) - 4px);
        height: calc(var(--size-5) - 4px);
        background-color: var(--text-2);
        border-radius: var(--radius-round);
        transition: transform 0.2s ease;
        transform: translateX(calc((var(--switch-width) / -2) + (var(--size-5) / 2) + 0px));
      }

      &:checked {
        background-color: var(--brand);

        &::after {
          transform: translateX(calc((var(--switch-width) / 2) - (var(--size-5) / 2) - 0px));
          background-color: var(--gray-0);
        }
      }

      &:focus-visible {
        box-shadow: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--brand);
      }
    }

    /* embedded svg for light/dark theme switch */
    &[data-variant="theme"] {
      & input[type="checkbox"] {
        &::after {
          -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><circle cx="12" cy="12" r="5"/><path d="M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="black" stroke-width="2"/></svg>') no-repeat center / 70%;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><circle cx="12" cy="12" r="5"/><path d="M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="black" stroke-width="2"/></svg>') no-repeat center / 70%;
        }

        &:checked {
          &::after {
            -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>') no-repeat center / 75%;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>') no-repeat center / 75%;
          }
        }
      }
    }
  }

  /* Radio */
  .radio {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    cursor: pointer;

    & input[type="radio"] {
      appearance: none;
      width: var(--size-5);
      height: var(--size-5);
      border: var(--border-size-2) solid var(--surface-3);
      border-radius: var(--radius-round);
      background-color: var(--surface-1);
      display: grid;
      place-content: center;
      cursor: pointer;
      margin: 0;
      flex-shrink: 0;

      &::after {
        content: '';
        width: var(--size-2);
        height: var(--size-2);
        border-radius: var(--radius-round);
        background-color: var(--brand);
        transform: scale(0);
        transition: transform 0.2s ease;
      }

      &:checked {
        border-color: var(--brand);

        &::after {
          transform: scale(1);
        }
      }

      &:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
      }
    }
  }

  /* Select */
	select {
		appearance: none;
		background-color: var(--input-bg);
		border: var(--border-size-1) solid var(--input-border);
		border-radius: var(--radius-2);
		padding: var(--size-2) var(--size-8) var(--size-2) var(--size-3);
		color: var(--text-2);
		font-family: inherit;
		cursor: pointer;
		background-image: var(--select-caret);
		background-repeat: no-repeat;
		background-position: right var(--size-2) center;
		background-size: var(--size-4);

    &:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 1px var(--brand);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed !important;
      background-color: var(--surface-2) !important;
      border-color: var(--surface-3) !important;
    }
  }

  input:disabled,
  select:disabled,
  textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    background-color: var(--surface-2) !important;
    border-color: var(--surface-3) !important;
  }

  /* Range */
  input[type="range"] {
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    height: 20px;
    display: block;
    vertical-align: middle;

    &::-webkit-slider-runnable-track {
      background: var(--surface-3);
      height: 6px;
      border-radius: var(--radius-round);
    }

    &::-webkit-slider-thumb {
      appearance: none;
      margin-top: -7px; /* (6-20)/2 */
      background-color: var(--brand);
      height: 20px;
      width: 20px;
      border-radius: var(--radius-round);
      box-shadow: var(--shadow-1);
      transition: transform 0.1s ease;

      &:active {
        transform: scale(1.1);
      }
    }

    &::-moz-range-track {
      background: var(--surface-3);
      height: 6px;
      border-radius: var(--radius-round);
    }

    &::-moz-range-thumb {
      background-color: var(--brand);
      height: 20px;
      width: 20px;
      border-radius: var(--radius-round);
      border: none;
      box-shadow: var(--shadow-1);
    }

    /* Range Variants */
    &[data-variant~="mini"] {
      height: 14px;
      &::-webkit-slider-runnable-track { height: 4px; }
      &::-webkit-slider-thumb {
        height: 14px;
        width: 14px;
        margin-top: -5px; /* (4-14)/2 */
      }
      &::-moz-range-track { height: 4px; }
      &::-moz-range-thumb {
        height: 14px;
        width: 14px;
      }
    }

    &[data-variant~="fill"] {
      background-size: 100% 6px;
      background-repeat: no-repeat;
      background-position: center;

      &::-webkit-slider-runnable-track {
        /* Progress fill managed by pppjc.js background-image */
        background: transparent !important;
      }

      &[data-variant~="mini"] {
        background-size: 100% 4px;
      }

      &::-moz-range-progress {
        background: var(--brand);
        height: 6px;
        border-radius: var(--radius-round);
      }
      &[data-variant~="mini"]::-moz-range-progress {
        height: 4px;
      }
    }
  }

  /* Form Layout */
  .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-4);
    align-items: stretch;

    & > * {
      flex: 1 1 auto;
      min-width: 0;
    }

    &[data-variant="column"] {
      flex-direction: column;
      gap: var(--size-4);
    }
  }

  .form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;

    & input:where(:not([type="checkbox"]):not([type="radio"])),
    & select,
    & textarea {
      width: auto !important;
    }

		&[data-layout="inline"] {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--size-1);

			@media (min-width: 400px) {
				flex-direction: row;
				align-items: center;
				gap: var(--size-3);
			}
		}
  }

  /* Text Inputs & Color */
  input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"])),
  textarea {
    background-color: var(--input-bg);
    border: var(--border-size-1) solid var(--input-border);
    border-radius: var(--radius-2);
    padding: var(--size-2) var(--size-3);
    color: var(--text-1);
    font-family: inherit;
    width: 100%;

    &::placeholder {
      color: var(--text-2);
      opacity: 0.3;
    }

    &:focus {
      outline: none;
      border-color: var(--brand);
      background-color: var(--input-bg-focus);
    }
  }

  input[type="color"] {
    padding: var(--size-1);
    height: 2.5rem;
    cursor: pointer;
  }

  textarea {
    min-height: 100px;
    resize: vertical;
  }

  /* Form Validation */
  input:invalid,
  textarea:invalid,
  select:invalid {
    border-color: var(--danger);

    &:focus {
      outline-color: var(--danger);
    }
  }

  .invalid-feedback {
    display: none;
    color: var(--danger);
    font-size: var(--font-size-0);
    margin-top: var(--size-1);
    margin-left: var(--size-1);
  }

  input:invalid~.invalid-feedback,
  textarea:invalid~.invalid-feedback {
    display: block;
  }

  .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-4);
    align-items: stretch;

    & > * {
      flex: 1 1 auto;
      min-width: 0;
    }

    &[data-variant="column"] {
      flex-direction: column;
      gap: var(--size-4); 
    }

    & input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"])),
    & select,
    & textarea {
      width: auto; 
    }

    & input[type="color"] {
      min-width: 100px;
      
    }
  }

  /* Form Floating Labels */
  .form-floating {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--size-1);

    & input,
    & textarea,
    & select {
      padding-block: var(--size-4) var(--size-1);
      padding-inline: var(--size-3);
      height: 3.5rem;
      line-height: var(--font-lineheight-1);
    }

    & textarea {
      padding-block-start: 2rem;
      min-height: 8rem;
      height: auto;
    }

    & label {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: var(--size-1) var(--size-3);
      overflow: hidden;
      text-align: start;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: none;
      transform-origin: 0 0;
      color: var(--text-2);
      font-size: var(--font-size-0);
      opacity: 0.85;
    }

    &[data-variant="opaque"] label {
      background-color: var(--input-bg);
      opacity: 1;
      z-index: 1;
    }
  }

  .form-label {
    display: block;
    font-size: var(--font-size-1);
    text-transform: uppercase;
    font-weight: var(--font-weight-7);
    color: var(--text-1);
    margin-top: 0;
    margin-bottom: var(--size-px-3);
    user-select: none;
    line-height: 1;
    
    &:first-child {
      margin-top: 0;
    }
  }

  /* Input Groups */
	.input-group {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		width: 100%;
    margin-bottom: var(--size-4);

    &>.input-group-text {
      display: flex;
      align-items: center;
      padding: var(--size-2) var(--size-3);
      font-size: var(--font-size-1);
      font-weight: var(--font-weight-4);
      line-height: var(--font-lineheight-3);
      color: var(--text-1);
      text-align: center;
      white-space: nowrap;
      background-color: var(--surface-2);
      border: var(--border-size-1) solid var(--surface-3);
    }

    &>input,
    &>select,
    &>textarea {
      position: relative;
      flex: 1 1 auto;
      width: 1%;
      min-width: 0;
    }

    & .invalid-feedback {
      position: absolute;
      top: 100%;
      left: 0;
    }

    /* Combined Border Radii logic */
    &>*:first-child:not(:last-child):not(.invalid-feedback) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &>*:last-child:not(:first-child):not(.invalid-feedback) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &>*:not(:first-child):not(:last-child):not(.invalid-feedback) {
      border-radius: 0;
    }

    &>*:not(:first-child):not(.invalid-feedback) {
      margin-left: -1px;
    }
  }

  /* Spinner */
  .spinner {
    width: var(--size-6);
    height: var(--size-6);
    border: 3px solid var(--surface-3);
    border-top-color: var(--brand);
    border-radius: var(--radius-round);
    animation: spin 0.8s linear infinite;

    &[data-size="small"] {
      width: var(--size-4);
      height: var(--size-4);
      border-width: 2px;
    }

    &[data-size="large"] {
      width: var(--size-9);
      height: var(--size-9);
      border-width: 4px;
    }
  }

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

  /* Dropdown Component */
  details.dropdown {
    position: relative;
    display: inline-block;

    & summary {
      list-style: none; /* remove default arrow */
      outline: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: var(--size-2);
      padding: var(--size-2) var(--size-3);
      padding-right: var(--size-4);
      background-color: var(--surface-2);
      border: var(--border-size-1) solid var(--surface-3);
      border-radius: var(--radius-2);
      color: var(--text-2);
      transition: all 0.2s ease;
      font-weight: var(--font-weight-6);
      
      /* dropdown arrow marker */
      &::after {
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        margin-left: var(--size-2);
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transition: transform 0.2s var(--ease-3);
        opacity: 0.6;
      }

      &::-webkit-details-marker {
        display: none;
      }
    }

    &[open] summary {
      background-color: var(--surface-1);
      border-color: var(--brand);
      color: var(--text-1);

      &::after {
        transform: rotate(180deg);
        opacity: 1;
      }
    }

    & ul {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: var(--layer-page-overlay);
      min-width: 100%;
      max-width: calc(100vw - var(--size-8));
      margin-top: var(--size-2);
      padding: var(--size-2);
      background-color: var(--surface-1);
      border: var(--border-size-1) solid var(--surface-3);
      border-radius: var(--radius-2);
      box-shadow: var(--shadow-4);
      list-style: none;
      animation: dropdown-in 0.25s var(--ease-out-3) forwards;
      white-space: nowrap;
      
      /* Avoid layout shift/overflow */
      overflow-x: hidden;
      text-overflow: ellipsis;

      & li {
        padding: 0;
        margin: 0;
        
        & a, & button {
          display: flex;
          align-items: center;
          gap: var(--size-3);
          padding: var(--size-2) var(--size-4);
          color: var(--text-1);
          text-decoration: none;
          background: none;
          border: none;
          width: 100%;
          text-align: left;
          cursor: pointer;
          border-radius: var(--radius-1);
          font-weight: var(--font-weight-5);

          & svg {
            width: var(--size-4);
            height: var(--size-4);
            opacity: 0.7;
          }

          &:hover {
            background-color: var(--surface-3);
            color: var(--brand);

            & svg { opacity: 1; }
          }
        }

        & hr {
          margin: var(--size-1) 0;
          border: none;
          border-top: var(--border-size-1) solid var(--surface-3);
        }
      }
    }

    /* Direction variants */
    &[data-align="right"] ul {
      left: auto;
      right: 0;
    }
  }

  @keyframes dropdown-in {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* Tabs */
	.tab-group {
		display: flex;
		gap: var(--size-1);
		background-color: var(--surface-2);
		padding: var(--size-1);
		border-radius: var(--radius-2);
		width: fit-content;
		max-width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-width: none; /* Hide scrollbar for cleaner look */
    margin-bottom: var(--size-2);
		&::-webkit-scrollbar { display: none; }

    & .tab {
      padding: var(--size-2) var(--size-4);
      border-radius: var(--radius-2);
      border: none;
      background: none;
      color: var(--text-2);
      font-weight: var(--font-weight-6);
      cursor: pointer;
      transition: all 0.2s ease;

      &[data-active="true"] {
        background-color: var(--surface-1);
        color: var(--text-1);
        box-shadow: var(--shadow-2);
      }

      &:hover:not([data-active="true"]) {
        color: var(--text-1);
        background-color: var(--surface-3);
      }
    }

    /* Underline Variant */
    &[data-variant="underline"] {
      background: none;
      padding: 0;
      gap: var(--size-5);
      border-radius: 0;
      border-bottom: var(--border-size-1) solid var(--surface-3);
      width: 100%;

      & .tab {
        border-radius: 0;
        padding-inline: 0;
        border-bottom: var(--border-size-2) solid transparent;
        margin-bottom: -1px;

        &[data-active="true"] {
          background: none;
          box-shadow: none;
          color: var(--brand);
          border-bottom-color: var(--brand);
        }

        &:hover:not([data-active="true"]) {
          background: none;
          border-bottom-color: var(--surface-3);
        }
      }
    }
  }

  /* Breadcrumb */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--size-2);
    font-size: var(--font-size-0);
    color: var(--text-2);
    margin-bottom: var(--size-2);
    user-select: none;

    & ol {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--size-2);
    }

    & li {
      display: flex;
      align-items: center;
      gap: var(--size-2);

      &:not(:last-child)::after {
        content: '>';
        opacity: 0.5;
        font-weight: var(--font-weight-3);
      }

      & a {
        color: inherit;
        text-decoration: none;
        transition: color 0.1s var(--ease-3);

        &:hover {
          color: var(--text-1);
          text-decoration: underline;
        }
      }

      &[aria-current="page"] {
        color: var(--text-1);
        font-weight: var(--font-weight-6);
      }
    }
  }

  	/* Pagination */
	.pagination {
		display: flex;
		flex-wrap: wrap; /* Allow pagination to wrap or move to next item */
		gap: var(--size-1);
		padding-left: 0;
		list-style: none;
		border-radius: var(--radius-2);

    & .page-btn {
      position: relative;
      display: block;
      padding: var(--size-2) var(--size-3);
      color: var(--brand);
      background-color: var(--surface-1);
      border: var(--border-size-1) solid var(--surface-3);
      text-decoration: none;
      transition: all 0.2s var(--ease-3);
      cursor: pointer;
      font-weight: var(--font-weight-6);

      &:hover:not([disabled]):not([data-active="true"]) {
        z-index: 2;
        color: var(--brand-hover);
        background-color: var(--surface-2);
        border-color: var(--surface-3);
      }

      &:focus {
        z-index: 3;
        outline: 0;
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand) 25%, transparent);
      }

      &[data-active="true"] {
        z-index: 3;
        color: var(--gray-0);
        background-color: var(--brand);
        border-color: var(--brand);
      }

      &[disabled] {
        color: var(--text-2);
        pointer-events: none;
        background-color: var(--surface-1);
        border-color: var(--surface-3);
        opacity: 0.6;
      }

      /* Border radius logic */
      &:first-child {
        border-top-left-radius: var(--radius-2);
        border-bottom-left-radius: var(--radius-2);
      }

      &:last-child {
        border-top-right-radius: var(--radius-2);
        border-bottom-right-radius: var(--radius-2);
      }

      /* Remove double borders */
      &:not(:first-child) {
        margin-left: -1px;
      }
    }
  }

  /* Table */
  table {
    display: table;
    inline-size: 100%;
    min-inline-size: 100%; /* Ensure it spans full width of container */
    border-collapse: collapse;
    font-size: var(--font-size-1);
    background-color: var(--surface-1);
    border-radius: var(--radius-2);
    
    /* Allow overflow control from parent */
    & th,
    & td {
      padding-block: var(--size-2);
      padding-inline: var(--size-3);
      text-align: start;
      white-space: normal; /* default */
    }

    & th {
      color: var(--text-2);
      font-weight: var(--font-weight-6);
      font-size: var(--font-size-0);
      letter-spacing: var(--font-letterspacing-2);
      border-block-end: var(--border-size-2) solid var(--surface-3);
    }

    & td {
      border-block-end: var(--border-size-1) solid var(--surface-3);
    }

    & tbody tr:hover {
      background-color: var(--surface-2);
    }

    & tbody tr:last-child td {
      border-block-end: none;
    }

    /* Variants */
    &[data-size="compact"] {
      & th, & td {
        padding-block: calc(var(--size-1) + 2px);
        padding-inline: var(--size-3);
      }
    }

    &[data-variant="striped"] {
      & tbody tr:nth-child(even) {
        background-color: var(--surface-2);
      }
    }

    &[data-variant="bordered"] {
      border: var(--border-size-1) solid var(--surface-3);
      & th, & td {
        border-inline: var(--border-size-1) solid var(--surface-3);
      }
    }
  }

  /* Responsive Table (div-based) */
  .responsive-table {
    display: table;
    width: 100%;
    background-color: var(--surface-1);
    border-radius: var(--radius-2);
    overflow: hidden;
    border: var(--border-size-1) solid var(--surface-3);
    border-collapse: collapse;

    & .responsive-table-head { display: table-header-group; }
    & .responsive-table-body { display: table-row-group; }

    & .responsive-table-header,
    & .responsive-table-row {
      display: table-row;
    }

    & .responsive-table-header {
      background-color: var(--surface-3);
      color: var(--text-2);
      font-weight: var(--font-weight-7);
      font-size: var(--font-size-0);
      text-transform: uppercase;
      letter-spacing: var(--font-letterspacing-2);
      /* In table-row/table-cell world, border-bottom applies to cells */
      & .responsive-table-cell {
        border-bottom: var(--border-size-2) solid var(--surface-3);
      }
    }

    & .responsive-table-row {
      transition: background-color 0.2s ease;

      &:hover {
        background-color: var(--surface-2);
      }

      & .responsive-table-cell {
        border-bottom: var(--border-size-1) solid var(--surface-3);
      }

      &:last-child .responsive-table-cell {
        border-bottom: none;
      }
    }

    & .responsive-table-cell {
      display: table-cell;
      padding: var(--size-3);
      vertical-align: middle;
      min-width: 0;
    }

    /* Mobile Collapse Pattern */
    @media (max-width: 768px) {
      display: flex;
      flex-direction: column;
      border: none;
      background: none;
      gap: var(--size-4);

      & .responsive-table-head,
      & .responsive-table-body {
        display: contents;
      }

      & .responsive-table-header {
        display: none;
      }

      & .responsive-table-row {
        display: flex;
        flex-direction: column;
        background-color: var(--surface-1);
        border: var(--border-size-1) solid var(--surface-3);
        border-radius: var(--radius-2);
        padding: var(--size-4);
        gap: var(--size-2);
        box-shadow: var(--shadow-2);

        & .responsive-table-cell {
           border-bottom: var(--border-size-1) solid var(--surface-2);
        }
      }

      & .responsive-table-cell {
        display: grid;
        grid-template-columns: 120px 1fr;
        gap: var(--size-3);
        align-items: center;
        white-space: normal;
        padding: 0;
        padding-bottom: var(--size-1);
        width: 100%;

        &:last-child {
          border-bottom: none;
        }

        &::before {
          content: attr(data-label);
          font-weight: var(--font-weight-8);
          color: var(--text-2);
          font-size: var(--font-size-0);
          text-transform: uppercase;
          opacity: 0.8;
        }
      }
    }
  }

  /* Badge */
  .badge-container {
    position: relative;
    display: inline-flex;
  }

  .badge {
    position: absolute;
    display: grid;
    place-items: center;
    min-width: var(--size-5);
    height: var(--size-5);
    padding: 0 var(--size-2);
    background-color: var(--brand);
    color: var(--gray-0);
    border-radius: var(--radius-round);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    line-height: 1;
    border: 2px solid var(--surface-1);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;

    /* Content from attr */
    &::after {
      content: attr(data-label);
    }

    /* Position Variants */
    &[data-align="top-end"] {
      top: 0;
      right: 0;
      transform: translate(50%, -50%);
    }

    &[data-align="top-start"] {
      top: 0;
      left: 0;
      transform: translate(-50%, -50%);
    }

    &[data-align="bottom-end"] {
      bottom: 0;
      right: 0;
      transform: translate(50%, 50%);
    }

    &[data-align="bottom-start"] {
      bottom: 0;
      left: 0;
      transform: translate(-50%, 50%);
    }

    /* Default position */
    &:not([data-align]) {
      top: 0;
      right: 0;
      transform: translate(50%, -50%);
    }

    &[data-variant~="dot"] {
      min-width: var(--size-2);
      height: var(--size-2);

      &::after {
        content: none;
      }
    }

    /* Color Variants — mirrors button colors */
    &[data-variant~="primary"]  { background-color: var(--brand); color: var(--gray-0); }
    &[data-variant~="secondary"] { background-color: var(--secondary); color: var(--gray-0); }
    &[data-variant~="success"]  { background-color: var(--success); color: var(--gray-0); }
    &[data-variant~="danger"]   { background-color: var(--danger); color: var(--gray-0); }
    &[data-variant~="warning"]  { background-color: var(--warning); color: var(--gray-9); }
    &[data-variant~="info"]     { background-color: var(--info); color: var(--gray-0); }

    &[data-variant~="mini"] {
      min-width: var(--size-4);
      height: var(--size-4);
      font-size: var(--font-size-00);
      padding: 0 var(--size-1);
      border-width: 1px;

      &[data-variant~="dot"] {
        min-width: var(--size-2);
        height: var(--size-2);
      }
    }
  }

  /* Tag */
  .tag {
    display: inline-flex;
    align-items: center;
    padding-block: var(--size-1);
    padding-inline: var(--size-2);
    background-color: var(--surface-3);
    color: var(--text-2);
    border-radius: var(--radius-1);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    line-height: var(--font-lineheight-0);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: var(--font-letterspacing-1);


    &[data-variant~="success"] { background-color: var(--success); color: var(--gray-0); }
    &[data-variant~="danger"] { background-color: var(--danger); color: var(--gray-0); }
    &[data-variant~="warning"] { background-color: var(--warning); color: var(--gray-9); }
    &[data-variant~="info"] { background-color: var(--info); color: var(--gray-0); }
    &[data-variant~="primary"] { background-color: var(--brand); color: var(--gray-0); }
    &[data-variant~="pill"] { border-radius: var(--radius-pill); padding-inline: var(--size-3); }
  }

  /* Toast Notification */
  #toast-container {
    position: fixed;
    top: var(--size-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--layer-important);
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
    pointer-events: none;
  }

  .toast {
    padding: var(--size-3) var(--size-5);
    background-color: var(--brand);
    color: var(--gray-0);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-4);
    pointer-events: auto;
    animation: toast-in 0.3s var(--ease-out-3) forwards;
    min-width: 280px;
    max-width: 90vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-4);
    font-weight: var(--font-weight-6);

    &[data-variant~="success"] {
      background-color: var(--success);
      color: var(--gray-0);
    }

    &[data-variant~="danger"] {
      background-color: var(--danger);
      color: var(--gray-0);
    }

    &[data-variant~="warning"] {
      background-color: var(--warning);
      color: var(--gray-9);
    }

    & .toast-close {
      cursor: pointer;
      opacity: 0.8;
      color: inherit;
      font-size: var(--font-size-2);
      line-height: 1;

      &:hover {
        opacity: 1;
      }
    }

    &[data-variant~="mini"] {
      min-width: 0;
      padding: var(--size-1) var(--size-3);
      font-size: var(--font-size-0);
      font-weight: var(--font-weight-7);
      border-radius: var(--radius-1);
      animation: none;
      box-shadow: var(--shadow-2);
      margin-top: 0;
      
      &:first-child {
        margin-top: calc(var(--size-5) * -1); /* Pins the stack to y=0 if the first toast is mini */
      }

      & .toast-close {
        font-size: var(--font-size-1);
        margin-left: var(--size-2);
      }

      &.toast-out {
        animation: toast-out 0.1s ease forwards;
      }
    }
  }

  @keyframes toast-in {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .toast-out {
    animation: toast-out 0.2s ease forwards;
  }

  @keyframes toast-out {
    to {
      opacity: 0;
    }
  }

  /* Modal */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: hsla(0, 0%, 0%, 0.5);
    backdrop-filter: blur(2px);
    z-index: var(--layer-page-overlay);
    display: grid;
    place-items: center;
    padding: var(--size-5);
    animation: fade-in 0.2s ease forwards;
  }

  .modal {
    background-color: var(--surface-1);
    border-radius: var(--radius-3);
    box-shadow: var(--shadow-6);
    width: 100%;
    max-width: var(--size-content-3);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modal-in 0.3s var(--ease-out-3) forwards;

    &[data-size="large"] { max-width: var(--size-content-5); }
    &[data-size="xl"] { max-width: 90vw; }

    & header {
      padding: var(--size-4) var(--size-5);
      border-bottom: var(--border-size-1) solid var(--surface-3);
      display: flex;
      justify-content: space-between;
      align-items: center;

      & h3 {
        margin: 0;
        font-size: var(--font-size-3);
      }

      & .modal-close {
        font-size: var(--font-size-4);
        padding: 0 var(--size-2);
        line-height: 1;
      }
    }

    & .modal-body {
      padding: var(--size-5);
      overflow-y: auto;
    }

    & footer {
      padding: var(--size-4) var(--size-5);
      border-top: var(--border-size-1) solid var(--surface-3);
      display: flex;
      justify-content: flex-end;
      gap: var(--size-3);
    }
  }

  @keyframes modal-in {
    from {
      transform: scale(0.95);
      opacity: 0;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* DB Status Card */
  .db-status-card {
    background-color: var(--surface-2);
    border-radius: var(--radius-3);
    padding: var(--size-5);
    box-shadow: var(--shadow-2);
    border-left: 4px solid var(--surface-4);
    margin-top: var(--size-4);

    &[data-state="success"] {
      border-left-color: var(--success);
    }

    &[data-state="error"] {
      border-left-color: var(--danger);
    }
  }

  .db-status-indicator {
    display: flex;
    align-items: center;
    gap: var(--size-3);
    margin-bottom: var(--size-4);
  }

  .db-status-icon {
    width: var(--size-6);
    height: var(--size-6);
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    padding: var(--size-1);
    border-radius: var(--radius-round);

    [data-state="success"] & {
      color: var(--success);
      background-color: color-mix(in srgb, var(--success) 15%, transparent);
    }

    [data-state="error"] & {
      color: var(--danger);
      background-color: color-mix(in srgb, var(--danger) 15%, transparent);
    }
  }

  .db-status-label {
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-7);
  }

  .db-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-1);

    & th,
    & td {
      padding: var(--size-2) var(--size-3);
      text-align: left;
      border-bottom: var(--border-size-1) solid var(--surface-3);
    }

    & th {
      color: var(--text-2);
      font-weight: var(--font-weight-5);
      width: 40%;
    }

    & td {
      font-family: var(--font-mono);
      font-size: var(--font-size-0);
    }

    & tr:last-child th,
    & tr:last-child td {
      border-bottom: none;
    }
  }

  .db-error-message {
    color: var(--text-2);
    font-size: var(--font-size-1);
    line-height: var(--font-lineheight-3);

    & code {
      font-size: var(--font-size-0);
    }
  }

  .db-tables-preview {
    margin-top: var(--size-6);
  }

  .table-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2);
    margin-top: var(--size-2);
  }

  .table-tag {
    background-color: var(--surface-3);
    color: var(--text-1);
    padding: var(--size-1) var(--size-3);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-0);
    font-family: var(--font-mono);
    border: var(--border-size-1) solid var(--surface-4);
  }

}

@layer utilities {
  .label-sub {
    font-size: var(--font-size-0);
    color: var(--text-2);
  }

  .max-w-400 { max-width: 400px; }
  .max-w-600 { max-width: 600px; }
  .max-w-800 { max-width: 800px; }
  .max-w-1200 { max-width: 1200px; }
  .w-100 { width: 100%; }
  .h-100 { height: 100%; }

  .is-locked {
    overflow: hidden !important;
  }
}