/* IBM Carbon Design System Custom Styles */

/* CSS Variables */
:root {
  /* Colors - Interactive */
  --cds-interactive-01: #0f62fe;
  --cds-interactive-02: #393939;
  --cds-interactive-03: #0f62fe;
  --cds-interactive-04: #0f62fe;
  --cds-interactive: #0f62fe;

  /* Colors - UI (Legacy tokens) */
  --cds-ui-01: #f4f4f4;
  --cds-ui-02: #ffffff;
  --cds-ui-03: #e0e0e0;
  --cds-ui-04: #8d8d8d;
  --cds-ui-05: #161616;
  --cds-ui-background: #f4f4f4;

  /* Colors - Layer (New v11 tokens) */
  --cds-layer-01: #f4f4f4;
  --cds-layer-02: #ffffff;
  --cds-layer-03: #f4f4f4;
  --cds-layer-hover-01: #e8e8e8;
  --cds-layer-hover-02: #e8e8e8;
  --cds-layer-selected-01: #e0e0e0;
  --cds-layer-accent-01: #e0e0e0;

  /* Colors - Background */
  --cds-background: #ffffff;
  --cds-background-hover: #e8e8e8;
  --cds-background-active: #c6c6c6;
  --cds-background-selected: #e0e0e0;
  --cds-background-inverse: #393939;

  /* Colors - Field */
  --cds-field-01: #f4f4f4;
  --cds-field-02: #ffffff;
  --cds-field-hover-01: #e8e8e8;
  --cds-field-hover-02: #e8e8e8;

  /* Colors - Border */
  --cds-border-subtle-00: #e0e0e0;
  --cds-border-subtle-01: #e0e0e0;
  --cds-border-subtle-02: #c6c6c6;
  --cds-border-strong-01: #8d8d8d;
  --cds-border-strong-02: #8d8d8d;
  --cds-border-inverse: #161616;

  /* Colors - Text */
  --cds-text-01: #161616;
  --cds-text-02: #525252;
  --cds-text-03: #a8a8a8;
  --cds-text-04: #ffffff;
  --cds-text-05: #6f6f6f;
  --cds-text-primary: #161616;
  --cds-text-secondary: #525252;
  --cds-text-placeholder: #a8a8a8;
  --cds-text-on-color: #ffffff;
  --cds-text-inverse: #ffffff;
  --cds-text-disabled: #c6c6c6;

  /* Colors - Support */
  --cds-support-01: #da1e28;
  --cds-support-02: #198038;
  --cds-support-03: #f1c21b;
  --cds-support-04: #0043ce;
  --cds-support-error: #da1e28;
  --cds-support-success: #198038;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #0043ce;

  /* Colors - Notification backgrounds */
  --cds-notification-info-background: #edf5ff;
  --cds-notification-success-background: #defbe6;
  --cds-notification-warning-background: #fff8e1;
  --cds-notification-error-background: #fff1f1;

  /* Colors - Link */
  --cds-link-01: #0f62fe;
  --cds-link-02: #0043ce;
  --cds-link-primary: #0f62fe;
  --cds-link-visited: #8a3ffc;

  /* Colors - Hover/Active */
  --cds-hover-primary: #0353e9;
  --cds-hover-secondary: #4c4c4c;
  --cds-hover-ui: #e5e5e5;
  --cds-active-primary: #002d9c;
  --cds-focus: #0f62fe;

  /* Spacing */
  --cds-spacing-01: 2px;
  --cds-spacing-02: 4px;
  --cds-spacing-03: 8px;
  --cds-spacing-04: 12px;
  --cds-spacing-05: 16px;
  --cds-spacing-06: 24px;
  --cds-spacing-07: 32px;
  --cds-spacing-08: 40px;
  --cds-spacing-09: 48px;
  --cds-spacing-10: 64px;

  /* Typography */
  --cds-font-family: 'IBM Plex Sans', 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
  --cds-font-family-mono: 'IBM Plex Mono', 'Menlo', monospace;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--cds-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cds-text-01);
  background-color: var(--cds-ui-01);
  margin: 0;
  padding: 0;
}

/* Header */
.cds--header {
  background-color: var(--cds-ui-05);
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8000;
}

.cds--header__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cds-text-04);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 100%;
}

.cds--header__name:hover {
  background-color: #353535;
}

.cds--header__name--prefix {
  font-weight: 400;
  margin-right: 4px;
}

.cds--header__nav {
  height: 100%;
  padding-left: 16px;
}

.cds--header__menu-bar {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.cds--header__menu-item {
  font-size: 14px;
  color: #c6c6c6;
  text-decoration: none;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  transition: background-color 110ms;
}

.cds--header__menu-item:hover {
  background-color: #353535;
  color: var(--cds-text-04);
}

.cds--header__menu-item--current {
  color: var(--cds-text-04);
  border-bottom: 3px solid var(--cds-interactive-01);
}

.cds--header__global {
  display: flex;
  margin-left: auto;
  height: 100%;
}

.cds--header__action {
  background: none;
  border: none;
  color: #c6c6c6;
  padding: 0 16px;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.cds--header__action:hover {
  background-color: #353535;
  color: var(--cds-text-04);
}

/* Side Navigation */
.cds--side-nav {
  width: 256px;
  background-color: var(--cds-ui-02);
  border-right: 1px solid var(--cds-ui-03);
  height: calc(100vh - 48px);
  position: fixed;
  top: 48px;
  left: 0;
  overflow-y: auto;
  z-index: 7000;
}

.cds--side-nav__items {
  list-style: none;
  margin: 0;
  padding: 16px 0;
}

.cds--side-nav__item {
  margin: 0;
}

.cds--side-nav__link {
  font-size: 14px;
  color: var(--cds-text-02);
  text-decoration: none;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background-color 110ms;
}

.cds--side-nav__link:hover {
  background-color: var(--cds-hover-ui);
}

.cds--side-nav__link--current {
  background-color: var(--cds-ui-03);
  color: var(--cds-text-01);
  font-weight: 600;
  position: relative;
}

.cds--side-nav__link--current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--cds-interactive-01);
}

.cds--side-nav__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.cds--side-nav__divider {
  height: 1px;
  background-color: var(--cds-ui-03);
  margin: 8px 16px;
}

/* Main Content */
.app-shell {
  min-height: 100vh;
}

.app-content {
  margin-left: 256px;
  margin-top: 48px;
  padding: var(--cds-spacing-07);
  background-color: var(--cds-ui-01);
  min-height: calc(100vh - 48px);
}

/* Page Header */
.page-header {
  margin-bottom: var(--cds-spacing-07);
}

.page-header__title {
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  color: var(--cds-text-01);
  margin: 0 0 8px 0;
}

.page-header__description {
  font-size: 14px;
  color: var(--cds-text-02);
  margin: 0;
}

/* Buttons */
.cds--btn {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.16px;
  padding: 14px 64px 14px 16px;
  min-height: 48px;
  border-radius: 0;
  cursor: pointer;
  transition: all 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: none;
}

.cds--btn--sm {
  min-height: 32px;
  padding: 7px 60px 7px 12px;
}

.cds--btn--md {
  min-height: 40px;
  padding: 11px 60px 11px 12px;
}

.cds--btn--primary {
  background-color: var(--cds-interactive-01);
  color: var(--cds-text-04);
}

.cds--btn--primary:hover {
  background-color: var(--cds-hover-primary);
}

.cds--btn--primary:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 1px var(--cds-focus), inset 0 0 0 2px #fff;
}

.cds--btn--secondary {
  background-color: var(--cds-interactive-02);
  color: var(--cds-text-04);
}

.cds--btn--secondary:hover {
  background-color: var(--cds-hover-secondary);
}

.cds--btn--tertiary {
  background-color: transparent;
  color: var(--cds-interactive-01);
  border: 1px solid var(--cds-interactive-01);
  padding: 13px 63px 13px 15px;
}

.cds--btn--tertiary:hover {
  background-color: var(--cds-interactive-01);
  color: var(--cds-text-04);
}

.cds--btn--ghost {
  background-color: transparent;
  color: var(--cds-link-01);
  padding: 14px 16px;
}

.cds--btn--ghost:hover {
  background-color: var(--cds-hover-ui);
}

.cds--btn--danger {
  background-color: var(--cds-support-01);
  color: var(--cds-text-04);
}

.cds--btn--danger:hover {
  background-color: #ba1b23;
}

.cds--btn:disabled {
  background-color: var(--cds-ui-03);
  color: var(--cds-text-03);
  cursor: not-allowed;
}

/* Form Elements */
.cds--form-item {
  margin-bottom: var(--cds-spacing-06);
}

.cds--label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--cds-text-02);
  margin-bottom: 8px;
  display: block;
}

.cds--label--required::after {
  content: ' *';
  color: var(--cds-support-01);
}

.cds--text-input {
  font-size: 14px;
  font-family: inherit;
  line-height: 18px;
  height: 40px;
  padding: 0 16px;
  background-color: var(--cds-ui-01);
  border: none;
  border-bottom: 1px solid var(--cds-ui-04);
  color: var(--cds-text-01);
  width: 100%;
  outline: none;
  transition: outline 70ms;
}

.cds--text-input::placeholder {
  color: var(--cds-text-03);
}

.cds--text-input:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

/* Number input - hide spin buttons for cleaner look */
.cds--text-input[type="number"]::-webkit-outer-spin-button,
.cds--text-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cds--text-input[type="number"] {
  -moz-appearance: textfield;
}

.cds--text-input[data-invalid],
.cds--text-input--invalid {
  outline: 2px solid var(--cds-support-01);
  outline-offset: -2px;
}

.cds--text-input__field-wrapper {
  position: relative;
}

.cds--form__helper-text {
  font-size: 12px;
  line-height: 16px;
  color: var(--cds-text-05);
  margin-top: 4px;
}

.cds--form-requirement {
  font-size: 12px;
  line-height: 16px;
  color: var(--cds-support-01);
  margin-top: 4px;
}

/* Select */
.cds--select {
  position: relative;
}

.cds--select-input {
  font-size: 14px;
  font-family: inherit;
  height: 40px;
  padding: 0 48px 0 16px;
  background-color: var(--cds-ui-01);
  border: none;
  border-bottom: 1px solid var(--cds-ui-04);
  color: var(--cds-text-01);
  width: 100%;
  outline: none;
  appearance: none;
  cursor: pointer;
}

.cds--select-input:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

.cds--select::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--cds-ui-05);
  pointer-events: none;
}

/* Checkbox */
.cds--checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cds--checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--cds-interactive-01);
}

.cds--checkbox-label {
  font-size: 14px;
  color: var(--cds-text-01);
  cursor: pointer;
}

/* Textarea */
.cds--text-area {
  font-size: 14px;
  font-family: inherit;
  line-height: 20px;
  padding: 12px 16px;
  background-color: var(--cds-ui-01);
  border: none;
  border-bottom: 1px solid var(--cds-ui-04);
  color: var(--cds-text-01);
  width: 100%;
  outline: none;
  resize: vertical;
  min-height: 100px;
}

.cds--text-area:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

/* Data Table */
.cds--data-table-container {
  background-color: var(--cds-ui-02);
}

.cds--data-table {
  width: 100%;
  border-collapse: collapse;
}

.cds--data-table thead {
  background-color: var(--cds-ui-03);
}

.cds--data-table th {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  padding: 16px;
  text-align: left;
  color: var(--cds-text-01);
  border: none;
}

.cds--data-table td {
  font-size: 14px;
  line-height: 18px;
  padding: 16px;
  color: var(--cds-text-01);
  border-top: 1px solid var(--cds-ui-03);
  background-color: var(--cds-ui-02);
}

.cds--data-table tbody tr:hover td {
  background-color: var(--cds-hover-ui);
}

.cds--table-toolbar {
  padding: 16px;
  background-color: var(--cds-ui-02);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Tags */
.cds--tag {
  font-size: 12px;
  line-height: 16px;
  padding: 4px 8px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cds--tag--gray { background-color: #e0e0e0; color: #393939; }
.cds--tag--red { background-color: #ffd7d9; color: #a2191f; }
.cds--tag--green { background-color: #a7f0ba; color: #0e6027; }
.cds--tag--blue { background-color: #d0e2ff; color: #0043ce; }
.cds--tag--cyan { background-color: #bae6ff; color: #00539a; }
.cds--tag--purple { background-color: #e8daff; color: #6929c4; }
.cds--tag--magenta { background-color: #ffd6e8; color: #9f1853; }
.cds--tag--teal { background-color: #9ef0f0; color: #005d5d; }
.cds--tag--orange { background-color: #ffd8a8; color: #8a3800; }

/* Tiles / Cards */
.cds--tile {
  background-color: var(--cds-ui-02);
  padding: var(--cds-spacing-05);
  min-height: 64px;
}

.cds--tile--clickable {
  cursor: pointer;
  transition: background-color 110ms;
}

.cds--tile--clickable:hover {
  background-color: var(--cds-hover-ui);
}

.cds--tile__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cds-text-01);
  margin: 0 0 8px 0;
}

.cds--tile__description {
  font-size: 14px;
  color: var(--cds-text-02);
  margin: 0;
}

/* Notifications */
.cds--inline-notification {
  padding: 16px;
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--cds-spacing-05);
}

.cds--inline-notification--info {
  background-color: #edf5ff;
  border-left: 3px solid var(--cds-support-04);
}

.cds--inline-notification--success {
  background-color: #defbe6;
  border-left: 3px solid var(--cds-support-02);
}

.cds--inline-notification--warning {
  background-color: #fcf4d6;
  border-left: 3px solid var(--cds-support-03);
}

.cds--inline-notification--error {
  background-color: #fff1f1;
  border-left: 3px solid var(--cds-support-01);
}

.cds--inline-notification__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cds-text-01);
  margin-bottom: 4px;
}

.cds--inline-notification__subtitle {
  font-size: 14px;
  color: var(--cds-text-02);
}

/* Modal */
.cds--modal {
  position: fixed;
  inset: 0;
  background-color: rgba(22, 22, 22, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}

.cds--modal.is-visible {
  display: flex;
}

.cds--modal-container {
  background-color: var(--cds-ui-02);
  width: 100%;
  max-width: 640px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
}

.cds--modal-header {
  padding: 16px 16px 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cds--modal-header__heading {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--cds-text-01);
  margin: 0;
}

.cds--modal-close {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: var(--cds-text-02);
}

.cds--modal-content {
  padding: 0 16px 16px 16px;
  overflow-y: auto;
  flex: 1;
}

.cds--modal-footer {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 0;
  background-color: var(--cds-ui-03);
}

.cds--modal-footer .cds--btn {
  flex: 0 1 50%;
  max-width: 50%;
  margin: 0;
  padding-right: 16px;
}

/* Search */
.cds--search {
  position: relative;
}

.cds--search-input {
  font-size: 14px;
  font-family: inherit;
  height: 40px;
  padding: 0 40px;
  background-color: var(--cds-ui-01);
  border: none;
  border-bottom: 1px solid var(--cds-ui-04);
  color: var(--cds-text-01);
  width: 100%;
  outline: none;
}

.cds--search-input:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: -2px;
}

.cds--search-magnifier {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cds-text-02);
}

/* Pagination */
.cds--pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px;
  background-color: var(--cds-ui-02);
  border-top: 1px solid var(--cds-ui-03);
  gap: 16px;
}

.cds--pagination__text {
  font-size: 14px;
  color: var(--cds-text-02);
}

.cds--pagination__button {
  background: none;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--cds-link-01);
}

.cds--pagination__button:hover {
  background-color: var(--cds-hover-ui);
}

.cds--pagination__button:disabled {
  color: var(--cds-text-03);
  cursor: not-allowed;
}

/* Loading */
.cds--loading {
  display: inline-flex;
  animation: rotate 700ms linear infinite;
}

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

/* Breadcrumb */
.cds--breadcrumb {
  display: flex;
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
}

.cds--breadcrumb-item {
  display: flex;
  align-items: center;
}

.cds--breadcrumb-item::after {
  content: '/';
  color: var(--cds-text-02);
  margin: 0 8px;
}

.cds--breadcrumb-item:last-child::after {
  display: none;
}

.cds--link {
  font-size: 14px;
  color: var(--cds-link-01);
  text-decoration: none;
}

.cds--link:hover {
  color: var(--cds-link-02);
  text-decoration: underline;
}

.cds--link--current {
  color: var(--cds-text-01);
  pointer-events: none;
}

/* Grid - 16 column system */
.cds--grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 99rem;
  padding-left: 16px;
  padding-right: 16px;
}

.cds--row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.cds--col {
  padding-left: 8px;
  padding-right: 8px;
  flex: 1;
}

/* Column widths based on 16-column grid */
.cds--col-1 { flex: 0 0 6.25%; max-width: 6.25%; padding-left: 8px; padding-right: 8px; }
.cds--col-2 { flex: 0 0 12.5%; max-width: 12.5%; padding-left: 8px; padding-right: 8px; }
.cds--col-3 { flex: 0 0 18.75%; max-width: 18.75%; padding-left: 8px; padding-right: 8px; }
.cds--col-4 { flex: 0 0 25%; max-width: 25%; padding-left: 8px; padding-right: 8px; }
.cds--col-5 { flex: 0 0 31.25%; max-width: 31.25%; padding-left: 8px; padding-right: 8px; }
.cds--col-6 { flex: 0 0 37.5%; max-width: 37.5%; padding-left: 8px; padding-right: 8px; }
.cds--col-7 { flex: 0 0 43.75%; max-width: 43.75%; padding-left: 8px; padding-right: 8px; }
.cds--col-8 { flex: 0 0 50%; max-width: 50%; padding-left: 8px; padding-right: 8px; }
.cds--col-9 { flex: 0 0 56.25%; max-width: 56.25%; padding-left: 8px; padding-right: 8px; }
.cds--col-10 { flex: 0 0 62.5%; max-width: 62.5%; padding-left: 8px; padding-right: 8px; }
.cds--col-11 { flex: 0 0 68.75%; max-width: 68.75%; padding-left: 8px; padding-right: 8px; }
.cds--col-12 { flex: 0 0 75%; max-width: 75%; padding-left: 8px; padding-right: 8px; }
.cds--col-13 { flex: 0 0 81.25%; max-width: 81.25%; padding-left: 8px; padding-right: 8px; }
.cds--col-14 { flex: 0 0 87.5%; max-width: 87.5%; padding-left: 8px; padding-right: 8px; }
.cds--col-15 { flex: 0 0 93.75%; max-width: 93.75%; padding-left: 8px; padding-right: 8px; }
.cds--col-16 { flex: 0 0 100%; max-width: 100%; padding-left: 8px; padding-right: 8px; }

/* Form layout utilities */
.form-container {
  max-width: 800px;
}

.form-section {
  margin-bottom: 24px;
  padding: 24px;
}

.form-section__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cds-ui-03);
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
  margin-bottom: 24px;
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-col {
  padding-left: 12px;
  padding-right: 12px;
}

.form-col-full { flex: 0 0 100%; max-width: 100%; }
.form-col-half { flex: 0 0 50%; max-width: 50%; }
.form-col-third { flex: 0 0 33.333%; max-width: 33.333%; }
.form-col-two-thirds { flex: 0 0 66.666%; max-width: 66.666%; }
.form-col-quarter { flex: 0 0 25%; max-width: 25%; }
.form-col-three-quarters { flex: 0 0 75%; max-width: 75%; }

/* Gap utilities */
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
.gap-4 { gap: 32px; }

/* Utilities */
.mt-1 { margin-top: var(--cds-spacing-03); }
.mt-2 { margin-top: var(--cds-spacing-05); }
.mt-3 { margin-top: var(--cds-spacing-06); }
.mt-4 { margin-top: var(--cds-spacing-07); }
.mb-1 { margin-bottom: var(--cds-spacing-03); }
.mb-2 { margin-bottom: var(--cds-spacing-05); }
.mb-3 { margin-bottom: var(--cds-spacing-06); }
.mb-4 { margin-bottom: var(--cds-spacing-07); }

.text-center { text-align: center; }
.text-right { text-align: right; }

/* Auth Layout */
.auth-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cds-ui-01);
}

.auth-container {
  width: 100%;
  max-width: 400px;
  padding: var(--cds-spacing-07);
}

.auth-card {
  background-color: var(--cds-ui-02);
  padding: var(--cds-spacing-07);
}

.auth-logo {
  text-align: center;
  margin-bottom: var(--cds-spacing-07);
}

.auth-logo__text {
  font-size: 20px;
  font-weight: 600;
  color: var(--cds-text-01);
}

.auth-title {
  font-size: 28px;
  font-weight: 400;
  color: var(--cds-text-01);
  margin: 0 0 8px 0;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--cds-text-02);
  margin: 0 0 var(--cds-spacing-06) 0;
}

.auth-footer {
  text-align: center;
  margin-top: var(--cds-spacing-06);
  font-size: 14px;
  color: var(--cds-text-02);
}

/* Status Dot */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

.status-dot--active { background-color: var(--cds-support-02); }
.status-dot--inactive { background-color: var(--cds-ui-04); }
.status-dot--warning { background-color: var(--cds-support-03); }
.status-dot--error { background-color: var(--cds-support-01); }

/* Responsive */
@media (max-width: 672px) {
  .cds--side-nav {
    transform: translateX(-100%);
    transition: transform 110ms;
  }

  .cds--side-nav.is-expanded {
    transform: translateX(0);
  }

  .app-content {
    margin-left: 0;
    padding: var(--cds-spacing-05);
  }

  .cds--col-4,
  .cds--col-6,
  .cds--col-8,
  .cds--col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}