/*
 * OSCE360 Apple-inspired component layer.
 * Bootstrap remains responsible for layout and JS. This file only replaces the visual skin.
 */
* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, var(--brand-tint), transparent 34%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading);
  letter-spacing: var(--tracking);
}

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

::selection {
  background: var(--action-soft);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

.container,
.container-fluid {
  max-width: 1120px;
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
}

.container-fluid {
  max-width: 1280px;
}

body > .container,
body > .container-fluid,
main,
.page-shell {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-10);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.16;
}

h1,
.display-5 {
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
}

h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4, h5, h6 { font-size: var(--text-md); }

p,
.text-muted,
small {
  color: var(--ink-2) !important;
}

.text-theme-purple,
.text-primary {
  color: var(--brand) !important;
}

/* Phase 4 hierarchy: page opening rows become quiet hero bars without markup changes. */
.container > .d-flex.justify-content-between:first-child,
.container-fluid > .d-flex.justify-content-between:first-child,
.container > .d-flex.align-items-center:first-child,
.container-fluid > .d-flex.align-items-center:first-child,
.page-header,
.app-page-header {
  align-items: center;
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  gap: var(--sp-4);
  margin-bottom: var(--sp-8) !important;
  padding: var(--sp-6);
}

.container > h1:first-child,
.container > h2:first-child,
.container-fluid > h1:first-child,
.container-fluid > h2:first-child {
  margin-bottom: var(--sp-6);
}

.skip-link {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-float);
  color: var(--brand);
  font-weight: 700;
  left: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  position: fixed;
  top: var(--sp-4);
  transform: translateY(calc(-100% - var(--sp-6)));
  transition: transform var(--dur-fast) var(--ease);
  z-index: 2000;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* Navigation */
.app-navbar,
.navbar {
  background: var(--glass) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  padding: var(--sp-3) 0;
  z-index: 1030;
}

.app-navbar .container-fluid {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
}

.brand-title {
  color: var(--brand) !important;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
}

.app-nav-logo {
  filter: none !important;
}

.navbar .nav-link,
.user-chip {
  border-radius: var(--radius-pill) !important;
  color: var(--ink-2) !important;
  font-weight: 600;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3) !important;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible,
.user-chip:hover {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}

.navbar .active-link,
.navbar .nav-link.active {
  background: var(--brand) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--surface) !important;
}

.dropdown-menu,
.app-dropdown {
  background: var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-float) !important;
  padding: var(--sp-2);
}

.dropdown-item {
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: var(--sp-2) var(--sp-3);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--brand-soft);
  color: var(--brand);
}

.nav-search {
  background: var(--brand-soft) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-pill) !important;
}

.nav-search i,
.nav-search .form-control,
.nav-search .form-control::placeholder {
  color: var(--ink-2) !important;
}

.nav-icon-btn {
  align-items: center;
  background: var(--brand-soft) !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  color: var(--brand) !important;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

/* Surfaces */
.card,
.dashboard-card,
.modal-content,
.list-group,
.auth-card,
.login-panel,
.dashboard-shell,
.accordion-item {
  background: var(--surface) !important;
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--ink) !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.accordion-button {
  background: transparent !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}

.card-body,
.modal-body,
.accordion-body {
  padding: var(--sp-6) !important;
}

.card-title,
.section-title,
h5.card-title-main,
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6 {
  color: var(--ink) !important;
}

.card:hover,
.dashboard-card:hover {
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

.modal-content {
  box-shadow: var(--shadow-modal) !important;
}

.modal-backdrop.show {
  opacity: .32;
}

/* Buttons */
.btn,
.btn-login,
button[type="submit"],
input[type="submit"] {
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700;
  letter-spacing: var(--tracking);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-5);
  text-transform: none !important;
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.btn:hover,
.btn-login:hover,
button[type="submit"]:hover {
  transform: translateY(-1px);
}

.btn:active,
.btn-login:active,
button[type="submit"]:active {
  transform: scale(.97);
}

.btn-primary,
.btn-success,
.btn-login,
button[type="submit"]:not(.btn-outline-secondary):not(.btn-secondary):not(.btn-light) {
  background: linear-gradient(180deg, var(--action-2), var(--action)) !important;
  box-shadow: 0 10px 22px var(--action-soft) !important;
  color: var(--on-action) !important;
}

.btn-secondary,
.btn-outline-secondary,
.btn-info,
.btn-outline-primary,
.btn-outline-success {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}

.btn-danger,
.btn-outline-danger {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
}

.btn-warning,
.btn-outline-warning {
  background: var(--warn-soft) !important;
  color: var(--warn) !important;
}

.btn-light,
.btn-link,
.text-link,
.download-link {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink-2) !important;
}

.btn:disabled,
.disabled,
.is-loading {
  opacity: .55;
  pointer-events: none;
}

.btn.is-loading::after,
.btn-login.is-loading::after {
  animation: appleSpin .8s linear infinite;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  content: "";
  display: inline-block;
  height: 1em;
  margin-left: var(--sp-2);
  vertical-align: -.15em;
  width: 1em;
}

/* Forms */
.form-label,
label {
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

.form-control,
.form-select,
.input-group-text,
.dataTables_wrapper .dataTables_filter input {
  background: var(--surface) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  min-height: 44px;
}

.form-control::placeholder {
  color: var(--ink-3) !important;
}

.form-control:focus,
.form-select:focus {
  background: var(--surface) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 3px var(--action-soft) !important;
}

.form-check-input {
  accent-color: var(--brand);
}

.input-group .form-control {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}

.input-group-text {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}

.invalid-feedback,
.text-danger {
  color: var(--danger) !important;
}

/* Tables and data */
.table-responsive {
  background: var(--surface);
  border: 0 !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-2);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: var(--brand-tint);
  --bs-table-striped-bg: transparent;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
}

.table thead th {
  background: transparent !important;
  border-bottom: 1px solid var(--hairline) !important;
  color: var(--ink-3) !important;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  padding: var(--sp-3) !important;
  text-transform: uppercase;
}

.table td,
.table th {
  border-color: var(--hairline) !important;
  padding: var(--sp-3) !important;
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: transparent;
}

.table-hover tbody tr:hover > * {
  background: var(--brand-tint) !important;
}

.dataTables_wrapper .row {
  align-items: center;
  row-gap: var(--sp-3);
}

.dataTables_info,
.dataTables_length label,
.dataTables_filter label {
  color: var(--ink-2) !important;
  font-size: var(--text-sm);
}

.pagination .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item .page-link {
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  margin: 0 var(--sp-1);
  min-width: 36px;
  text-align: center;
}

.pagination .active .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background: var(--brand);
  color: var(--surface);
}

/* Feedback */
.alert {
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-card);
  color: var(--ink) !important;
  padding: var(--sp-4) var(--sp-5);
}

.alert-success { background: var(--ok-soft) !important; }
.alert-warning { background: var(--warn-soft) !important; }
.alert-danger { background: var(--danger-soft) !important; }
.alert-info { background: var(--info-soft) !important; }

.badge,
.role-pill,
.rounded-pill {
  border-radius: var(--radius-pill) !important;
}

.badge,
.role-pill {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  font-weight: 700;
  padding: var(--sp-1) var(--sp-2);
}

.progress {
  background: var(--brand-soft);
  border-radius: var(--radius-pill);
  height: var(--sp-2);
}

.progress-bar {
  background: var(--brand);
}

.metric-card,
.gradient-green,
.gradient-blue,
.gradient-purple,
.gradient-orange {
  background: var(--brand) !important;
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--surface) !important;
}

.metric-card *,
.gradient-green *,
.gradient-blue *,
.gradient-purple *,
.gradient-orange * {
  color: var(--surface) !important;
}

.metric-value {
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.metric-label {
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Auth */
.auth-shell,
.login-page {
  background:
    radial-gradient(circle at top, var(--brand-tint), transparent 36%),
    var(--bg) !important;
}

.auth-header h1 {
  text-transform: none !important;
}

.auth-header p {
  color: var(--ink-2) !important;
}

/* SweetAlert2 visual skin */
.swal2-popup {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-modal) !important;
  color: var(--ink) !important;
  font-family: var(--font) !important;
}

.swal2-title {
  color: var(--ink) !important;
  letter-spacing: var(--tracking-tight);
}

.swal2-html-container {
  color: var(--ink-2) !important;
}

.swal2-confirm {
  background: var(--action) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--on-action) !important;
}

.swal2-cancel {
  background: var(--brand-soft) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--brand) !important;
}

footer {
  background: transparent !important;
  border: 0 !important;
  color: var(--ink-3) !important;
  margin-top: var(--sp-12) !important;
}

footer hr {
  border-color: var(--hairline);
}

/* Motion */
main,
.page-shell,
.container.mt-4,
.container.py-4,
.container-fluid.mt-4,
.container-fluid.py-4,
.auth-card {
  animation: appleReveal var(--dur-slow) var(--ease) both;
}

@keyframes appleReveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes appleSpin {
  to { transform: rotate(1turn); }
}

/* Responsive floor */
@media (max-width: 768px) {
  .container,
  .container-fluid {
    padding-left: var(--sp-4);
    padding-right: var(--sp-4);
  }

  body > .container,
  body > .container-fluid,
  main,
  .page-shell {
    padding-top: var(--sp-5);
  }

  .container > .d-flex.justify-content-between:first-child,
  .container-fluid > .d-flex.justify-content-between:first-child,
  .container > .d-flex.align-items-center:first-child,
  .container-fluid > .d-flex.align-items-center:first-child,
  .page-header,
  .app-page-header {
    align-items: stretch;
    flex-direction: column;
    padding: var(--sp-5);
  }

  .table-responsive > .table,
  .dataTables_wrapper .table {
    min-width: 720px;
  }

  .navbar-collapse {
    padding-top: var(--sp-3);
  }
}

@media (forced-colors: active) {
  .btn,
  .form-control,
  .form-select,
  .card,
  .modal-content,
  .dropdown-menu,
  .alert {
    border: 1px solid CanvasText !important;
  }

  :focus-visible {
    outline: 2px solid Highlight;
  }
}

/* Colourful card presentation system */
:is(.metric-card, .student-summary-tile, .assignment-summary-card) {
  border: 0 !important;
  box-shadow: var(--card-vibrant-shadow) !important;
  color: var(--on-vibrant) !important;
  overflow: hidden;
  position: relative;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), filter var(--dur-base) var(--ease);
}

:is(.metric-card, .student-summary-tile, .assignment-summary-card)::after {
  background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 44%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

:is(.metric-card, .student-summary-tile, .assignment-summary-card):hover {
  box-shadow: var(--shadow-float) !important;
  filter: saturate(1.03);
  transform: translateY(-2px);
}

:is(.metric-card, .student-summary-tile, .assignment-summary-card) > * {
  position: relative;
  z-index: 1;
}

:is(.metric-card, .student-summary-tile, .assignment-summary-card),
:is(.metric-card, .student-summary-tile, .assignment-summary-card).gradient-green {
  background: linear-gradient(135deg, var(--card-green), var(--card-green-2)) !important;
}

:is(.metric-card, .student-summary-tile, .assignment-summary-card).gradient-purple {
  background: linear-gradient(135deg, var(--card-purple), var(--card-pink)) !important;
}

:is(.metric-card, .student-summary-tile, .assignment-summary-card).gradient-blue {
  background: linear-gradient(135deg, var(--card-indigo), var(--card-sky)) !important;
}

:is(.metric-card, .student-summary-tile, .assignment-summary-card).gradient-orange {
  background: linear-gradient(135deg, var(--card-orange), var(--action)) !important;
}

:is(.metric-card, .student-summary-tile, .assignment-summary-card),
:is(.metric-card, .student-summary-tile, .assignment-summary-card) *,
:is(.metric-card, .student-summary-tile, .assignment-summary-card) .text-muted {
  color: var(--on-vibrant) !important;
}

:is(.dashboard-card, .overview-card, .student-profile-card, .student-profile-table-wrap, .assignment-card, .assignment-surface, .assignment-table-wrap) {
  border: 1px solid var(--hairline) !important;
  box-shadow: var(--shadow-card) !important;
}

:is(.dashboard-card, .overview-card, .student-profile-card, .assignment-card, .assignment-surface):hover {
  box-shadow: var(--shadow-float) !important;
  transform: translateY(-1px);
}

/* Bootstrap colour utility card compatibility
   Some dashboards render summary cards with Bootstrap bg-* + text-white classes.
   Keep those cards vibrant/readable without changing the PHP markup or logic. */
:is(.card.metric-card, .card.student-summary-tile, .card.assignment-summary-card, .card.bg-success, .card.bg-primary, .card.bg-info, .card.bg-danger, .card.bg-warning) {
  border: 0 !important;
  box-shadow: var(--card-vibrant-shadow) !important;
  color: var(--on-vibrant) !important;
  overflow: hidden;
  position: relative;
}

:is(.card.metric-card, .card.student-summary-tile, .card.assignment-summary-card, .card.bg-success, .card.bg-primary, .card.bg-info, .card.bg-danger, .card.bg-warning)::before {
  background: radial-gradient(circle at 88% 16%, rgba(255, 255, 255, .28), transparent 28%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}


:is(.card.metric-card, .card.student-summary-tile, .card.assignment-summary-card, .card.bg-success, .card.bg-primary, .card.bg-info, .card.bg-danger, .card.bg-warning) > * {
  position: relative;
  z-index: 1;
}

.card.bg-success,
.card.metric-card.gradient-green,
.card.student-summary-tile.gradient-green,
.card.assignment-summary-card.gradient-green {
  background: linear-gradient(135deg, var(--card-green), var(--card-green-2)) !important;
}

.card.bg-primary,
.card.metric-card.gradient-blue,
.card.student-summary-tile.gradient-blue,
.card.assignment-summary-card.gradient-blue {
  background: linear-gradient(135deg, var(--card-indigo), var(--card-sky)) !important;
}

.card.bg-info {
  background: linear-gradient(135deg, var(--card-sky), var(--card-indigo)) !important;
}

.card.bg-danger,
.card.metric-card.gradient-purple,
.card.student-summary-tile.gradient-purple,
.card.assignment-summary-card.gradient-purple {
  background: linear-gradient(135deg, var(--card-purple), var(--card-pink)) !important;
}

.card.bg-warning,
.card.metric-card.gradient-orange,
.card.student-summary-tile.gradient-orange,
.card.assignment-summary-card.gradient-orange {
  background: linear-gradient(135deg, var(--card-orange), var(--action)) !important;
}

:is(.card.metric-card, .card.student-summary-tile, .card.assignment-summary-card, .card.bg-success, .card.bg-primary, .card.bg-info, .card.bg-danger, .card.bg-warning) .card-body,
:is(.card.metric-card, .card.student-summary-tile, .card.assignment-summary-card, .card.bg-success, .card.bg-primary, .card.bg-info, .card.bg-danger, .card.bg-warning) .card-header,
:is(.card.metric-card, .card.student-summary-tile, .card.assignment-summary-card, .card.bg-success, .card.bg-primary, .card.bg-info, .card.bg-danger, .card.bg-warning) .card-footer {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .24) !important;
}

:is(.card.metric-card, .card.student-summary-tile, .card.assignment-summary-card, .card.bg-success, .card.bg-primary, .card.bg-info, .card.bg-danger, .card.bg-warning) *,
:is(.card.metric-card, .card.student-summary-tile, .card.assignment-summary-card, .card.bg-success, .card.bg-primary, .card.bg-info, .card.bg-danger, .card.bg-warning) .text-white,
:is(.card.metric-card, .card.student-summary-tile, .card.assignment-summary-card, .card.bg-success, .card.bg-primary, .card.bg-info, .card.bg-danger, .card.bg-warning) .text-muted {
  color: var(--on-vibrant) !important;
}

/* Mobile containment: prevent page-level horizontal overflow while preserving table scroll areas. */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  .container-fluid,
  main,
  .page-shell,
  .card,
  .dashboard-card,
  .assignment-surface,
  .assignment-card,
  .overview-card {
    max-width: 100%;
  }

  .row {
    --bs-gutter-x: var(--sp-4);
  }

  .btn,
  .btn-group,
  .input-group {
    max-width: 100%;
  }

  .btn {
    white-space: normal;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}