/**
 * Shared UI component layer for Admin + Student Portal.
 * Keeps current/common class names so templates can adopt it gradually.
 * Source of truth: packages/theme/common-ui.css
 */

:root {
  --ui-control-height: 42px;
  --ui-control-height-sm: 36px;
  --ui-control-height-lg: 48px;
  --ui-control-padding-x: 0.875rem;
  --ui-control-padding-y: 0.625rem;
  --ui-radius: 0.5rem;
  --ui-radius-sm: 0.375rem;
  --ui-radius-lg: 0.75rem;
  --ui-border-width: 1px;
  --ui-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --ui-shadow-md: 0 6px 18px -10px rgb(15 23 42 / 0.25);
  --ui-focus-ring: 0 0 0 0.2rem color-mix(in srgb, var(--theme-color) 16%, transparent);
  --ui-table-cell-padding-y: 0.875rem;
  --ui-table-cell-padding-x: 1rem;
}

button,
input,
select,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Buttons */
.btn,
.commonBtn,
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--ui-control-height);
  padding: 0.625rem 1rem;
  border-radius: var(--ui-radius);
  border: var(--ui-border-width) solid transparent;
  font-family: var(--brand-font-family);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none !important;
  box-shadow: none;
}

.btn:hover,
.commonBtn:hover,
.ui-btn:hover {
  text-decoration: none !important;
}

.btn:focus,
.commonBtn:focus,
.ui-btn:focus,
.btn.focus,
.commonBtn.focus,
.ui-btn.focus {
  outline: 0;
  box-shadow: var(--ui-focus-ring);
}

.btn:disabled,
.btn.disabled,
.commonBtn:disabled,
.commonBtn.disabled,
.ui-btn:disabled,
.ui-btn.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-sm,
.btn-group-sm > .btn,
.ui-btn--sm {
  min-height: var(--ui-control-height-sm);
  padding: 0.45rem 0.8rem;
  border-radius: var(--ui-radius-sm);
  font-size: 0.875rem;
}

.btn-lg,
.btn-group-lg > .btn,
.ui-btn--lg {
  min-height: var(--ui-control-height-lg);
  padding: 0.8rem 1.2rem;
  border-radius: var(--ui-radius-lg);
  font-size: 1rem;
}

.btn-primary,
.btn-theme,
.commonBtn,
.ui-btn--primary {
  color: var(--color-white) !important;
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle,
.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.commonBtn:hover,
.commonBtn:focus,
.ui-btn--primary:hover,
.ui-btn--primary:focus,
.ui-btn--primary:active,
.ui-btn--primary.active {
  color: var(--color-white) !important;
  background-color: var(--primary-hover-color) !important;
  border-color: var(--primary-hover-color) !important;
}

.btn-secondary,
.ui-btn--secondary {
  color: var(--theme-color) !important;
  background-color: var(--color-gray-100) !important;
  border-color: var(--color-gray-300) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle,
.ui-btn--secondary:hover,
.ui-btn--secondary:focus,
.ui-btn--secondary:active,
.ui-btn--secondary.active {
  color: var(--theme-color) !important;
  background-color: var(--brand-primary-light) !important;
  border-color: var(--color-gray-400) !important;
}

.btn-success,
.ui-btn--success {
  color: var(--color-white) !important;
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.show > .btn-success.dropdown-toggle,
.ui-btn--success:hover,
.ui-btn--success:focus,
.ui-btn--success:active,
.ui-btn--success.active {
  color: var(--color-white) !important;
  background-color: var(--color-success-dark) !important;
  border-color: var(--color-success-dark) !important;
}

.btn-danger,
.ui-btn--destructive {
  color: var(--color-white) !important;
  background-color: var(--color-danger-bootstrap) !important;
  border-color: var(--color-danger-bootstrap) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.show > .btn-danger.dropdown-toggle,
.ui-btn--destructive:hover,
.ui-btn--destructive:focus,
.ui-btn--destructive:active,
.ui-btn--destructive.active {
  color: var(--color-white) !important;
  background-color: var(--color-danger-dark) !important;
  border-color: var(--color-danger-dark) !important;
}

.btn-warning,
.ui-btn--warning {
  color: var(--color-gray-850) !important;
  background-color: var(--color-warning-alt) !important;
  border-color: var(--color-warning-alt) !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.show > .btn-warning.dropdown-toggle,
.ui-btn--warning:hover,
.ui-btn--warning:focus,
.ui-btn--warning:active,
.ui-btn--warning.active {
  color: var(--color-gray-850) !important;
  background-color: var(--color-warning-dark) !important;
  border-color: var(--color-warning-dark) !important;
}

.btn-info,
.ui-btn--info {
  color: var(--color-white) !important;
  background-color: var(--color-info-bootstrap) !important;
  border-color: var(--color-info-bootstrap) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.show > .btn-info.dropdown-toggle,
.ui-btn--info:hover,
.ui-btn--info:focus,
.ui-btn--info:active,
.ui-btn--info.active {
  color: var(--color-white) !important;
  background-color: var(--color-info-dark) !important;
  border-color: var(--color-info-dark) !important;
}

.btn-light,
.ui-btn--light {
  color: var(--color-gray-750) !important;
  background-color: var(--color-white) !important;
  border-color: var(--color-gray-300) !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active,
.btn-light.active,
.show > .btn-light.dropdown-toggle,
.ui-btn--light:hover,
.ui-btn--light:focus,
.ui-btn--light:active,
.ui-btn--light.active {
  color: var(--color-gray-850) !important;
  background-color: var(--color-gray-50) !important;
  border-color: var(--color-gray-350) !important;
}

.btn-outline-primary,
.ui-btn--outline {
  color: var(--theme-color) !important;
  background-color: transparent !important;
  border-color: var(--theme-color) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle,
.ui-btn--outline:hover,
.ui-btn--outline:focus,
.ui-btn--outline:active,
.ui-btn--outline.active {
  color: var(--color-white) !important;
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}

.commonBtn {
  width: max-content;
  margin-top: 12px;
}

.commonBtn i {
  margin-left: 6px;
}

.commonBtn a,
.commonBtn a:hover {
  color: inherit !important;
}

/* Form controls */
.form-control,
.form-select,
input.form-control,
select.form-control,
textarea.form-control,
.ui-input,
.ui-textarea,
.ui-select-trigger {
  min-height: var(--ui-control-height);
  padding: var(--ui-control-padding-y) var(--ui-control-padding-x);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--ui-radius);
  background-color: var(--color-white);
  color: var(--color-text);
  box-shadow: var(--ui-shadow-sm);
}

select.form-control,
.form-select,
.ui-select-trigger {
  padding-right: 2.5rem;
  background-position: right 0.9rem center;
}

textarea.form-control,
.ui-textarea {
  min-height: 110px;
  resize: vertical;
}

.form-control::placeholder,
.form-select::placeholder,
.ui-input::placeholder,
.ui-textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-control:focus,
.form-select:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
.ui-input:focus,
.ui-textarea:focus,
.ui-select-trigger:focus {
  border-color: color-mix(in srgb, var(--theme-color) 40%, var(--color-white));
  box-shadow: var(--ui-focus-ring);
  outline: none;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.ui-input:disabled,
.ui-textarea:disabled,
.ui-select-trigger:disabled {
  background-color: var(--color-gray-100);
  color: var(--color-gray-500);
  cursor: not-allowed;
  box-shadow: none;
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid {
  border-color: var(--color-danger-bootstrap);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-select:invalid:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-danger-bootstrap) 16%, transparent);
}

.form-control.is-valid,
.was-validated .form-control:valid,
.form-select.is-valid,
.was-validated .form-select:valid {
  border-color: var(--color-success);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus,
.form-select.is-valid:focus,
.was-validated .form-select:valid:focus {
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-success) 16%, transparent);
}

label,
.form-label,
.ui-label {
  color: var(--color-gray-750);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

/* Cards */
.card,
.ui-card {
  border: 1px solid var(--color-border-cloud);
  border-radius: 1rem;
  background-color: var(--color-white);
  box-shadow: var(--ui-shadow-sm);
  overflow: hidden;
}

.card-header,
.card-footer,
.ui-card-header,
.ui-card-footer {
  background-color: var(--color-white);
  border-color: var(--color-border-cloud);
}

.card-header,
.ui-card-header {
  padding: 1rem 1.25rem;
}

.card-body,
.ui-card-body,
.ui-card-content {
  padding: 1.25rem;
}

.card-title,
.ui-card-title {
  color: var(--color-gray-850);
  font-weight: 600;
}

/* Tables */
.table-responsive,
.ui-table-responsive {
  border-radius: 1rem;
  overflow-x: auto;
}

.table,
.ui-table {
  width: 100%;
  margin-bottom: 0;
  color: var(--color-text);
  vertical-align: middle;
  border-color: var(--color-border-cloud);
  background-color: var(--color-white);
}

.table th,
.table td,
.ui-table th,
.ui-table td {
  padding: var(--ui-table-cell-padding-y) var(--ui-table-cell-padding-x);
  border-color: var(--color-border-cloud);
  vertical-align: middle;
}

.table thead th,
.ui-table thead th {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-750);
  background-color: var(--color-surface-slate);
  border-bottom-width: 1px;
  white-space: nowrap;
}

.table tbody tr,
.ui-table tbody tr {
  background-color: var(--color-white);
}

.table-striped tbody tr:nth-of-type(odd),
.ui-table.ui-table--striped tbody tr:nth-of-type(odd) {
  background-color: var(--color-surface-soft);
}

.table-hover tbody tr:hover,
.ui-table.ui-table--hover tbody tr:hover {
  background-color: var(--brand-primary-light);
}

.table-bordered,
.table-bordered th,
.table-bordered td,
.ui-table.ui-table--bordered,
.ui-table.ui-table--bordered th,
.ui-table.ui-table--bordered td {
  border-color: var(--color-border-cloud);
}

.table-sm th,
.table-sm td,
.ui-table.ui-table--sm th,
.ui-table.ui-table--sm td {
  padding: 0.625rem 0.75rem;
}

.ui-btn--ghost {
  color: var(--theme-color) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none;
}

.ui-btn--ghost:hover,
.ui-btn--ghost:focus,
.ui-btn--ghost:active,
.ui-btn--ghost.active {
  color: var(--theme-color) !important;
  background-color: var(--brand-primary-light) !important;
  border-color: transparent !important;
}

.ui-btn--link {
  min-height: auto;
  padding: 0;
  color: var(--theme-color) !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

.ui-btn--link:hover,
.ui-btn--link:focus {
  color: var(--primary-hover-color) !important;
}

.ui-select-content {
  border: 1px solid var(--color-border-cloud);
  border-radius: var(--ui-radius);
  background-color: var(--color-white);
  box-shadow: var(--ui-shadow-md);
}