/* Theme tokens and utilities */
:root {
    --pm-primary: #0d6efd; /* bootstrap primary */
    --pm-accent: #6610f2;
    --pm-muted: #6c757d;
    --pm-surface: #ffffff;
    --pm-section-y: 1.5rem;
    --pm-card-radius: 0.5rem;
    --pm-card-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05);
    --pm-navbar-h: 56px;
}

body {
    background-color: #fff;
    min-height: 100vh; /* Ensure body takes full viewport height */
}

/* Utilities */
.pm-section { margin: var(--pm-section-y) 0; }

.pm-card { 
    border-radius: var(--pm-card-radius) !important; 
    box-shadow: var(--pm-card-shadow);
    background: var(--pm-surface);
}

/* Cards and stats */
.stats-card {
  border: 1px solid #e9ecef;
  border-radius: var(--pm-card-radius);
  box-shadow: var(--pm-card-shadow);
}

.score-badge {
  display: inline-block;
  min-width: 96px;
  text-align: center;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-weight: 600;
  background-color: #f1f3f5;
}
.score-high { color: #198754; }
.score-medium { color: #0d6efd; }
.score-low { color: #dc3545; }

/* Timeline */
.history-timeline {
  position: relative;
  padding-left: 1rem;
}
.history-timeline:before {
  content: "";
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e9ecef;
}
.history-item {
  position: relative;
  padding: .75rem 0 .75rem 1rem;
  border-bottom: 1px dashed #e9ecef;
}
.history-item:last-child { border-bottom: 0; }
.history-item:before {
  content: "";
  position: absolute;
  left: 7px;
  top: 1.1rem;
  width: 10px;
  height: 10px;
  background: #0d6efd;
  border-radius: 50%;
}

/* Questionnaire likert grid */
.question-card { border: 1px solid #e9ecef; border-radius: var(--pm-card-radius); box-shadow: var(--pm-card-shadow); }
.question-card .card-body { padding: 1rem 1.25rem; }
.likert-scale-options .scale-option { transition: transform .08s ease, box-shadow .12s ease; }
.likert-scale-options .scale-option.selected { box-shadow: 0 0 0 .2rem rgba(13,110,253,.25); transform: translateY(-1px); }

/* Dashboard tiles */
.card .card-header { background: #f8fafc; }
.badge-progress .progress { height: .5rem; }

.pm-page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--pm-surface);
  border: 1px solid #e9ecef;
  border-radius: var(--pm-card-radius);
  padding: .75rem 1rem;
  margin-bottom: var(--pm-section-y);
  box-shadow: var(--pm-card-shadow);
}
.pm-page-title .pm-title-left { display: flex; align-items: center; gap: .6rem; }
.pm-page-title .pm-title-left i { color: var(--pm-primary); font-size: 1.25rem; }
.pm-page-title .pm-title-left .h2,
.pm-page-title .pm-title-left h1 { font-size: 1.5rem; margin: 0; line-height: 1.2; }

.pm-page-title .pm-title-right { display: flex; align-items: center; }
.pm-page-title .pm-title-actions { display: flex; align-items: center; gap: .5rem; }
.pm-page-title .pm-title-actions form { margin: 0; }
.pm-page-title .pm-title-actions .form-control,
.pm-page-title .pm-title-actions .form-select { min-width: 180px; }
.pm-page-title .pm-title-actions .btn,
.pm-page-title .pm-title-actions .form-control,
.pm-page-title .pm-title-actions .form-select { height: 34px; padding: .25rem .5rem; }

.pm-empty { text-align: center; padding: 2rem 1rem; color: var(--pm-muted); }
.pm-empty .pm-empty-icon { opacity: .6; margin-bottom: .5rem; }
.pm-empty .pm-empty-title { font-weight: 600; margin-bottom: .25rem; }
.pm-empty .pm-empty-subtitle { font-size: .9rem; }

/* Responsive tweaks */
@media (max-width: 576px) {
  .pm-page-title { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .pm-page-title .pm-title-right { width: 100%; }
  .pm-page-title .pm-title-actions { width: 100%; flex-wrap: wrap; gap: .5rem; }
  .pm-page-title .pm-title-actions form { flex: 1 1 auto; display: flex; gap: .5rem; }
  .pm-page-title .pm-title-actions .form-control,
  .pm-page-title .pm-title-actions .form-select { flex: 1 1 auto; min-width: 0; }
  .pm-page-title .pm-title-actions .btn { white-space: nowrap; }
}

/* Icon utilities */
.pm-icon-lg { font-size: 1.5rem; }
.pm-icon-hero { font-size: 3rem; }

/* VARK badge semantics */
.vark-badge { 
  display: inline-block; 
  border-radius: 999px; 
  padding: .35em .6em; 
  font-size: .75rem; 
  font-weight: 600; 
  color: #fff;
}
.vark-badge.visual { background-color: var(--bs-info); }
.vark-badge.auditory { background-color: var(--bs-warning); color: #212529; }
.vark-badge.reading { background-color: var(--bs-success); }
.vark-badge.kinesthetic { background-color: var(--bs-danger); }

/* Login Page Specific Styles */
.container-fluid.h-100 {
    min-height: 100vh;
}

.bg-primary {
    background: linear-gradient(45deg, #007bff, #0056b3) !important; /* Subtle gradient */
}

.login-form-container .card {
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* More pronounced shadow */
    background-color: #ffffff; /* Ensure white background for the card */
}

.login-form-container .card-body {
    padding: 3rem; /* Increased padding inside the card */
}

.login-form-container .form-label {
    font-weight: 600;
    color: #343a40;
}

.login-form-container .form-control {
    height: 48px; /* Taller input fields */
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.login-form-container .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

.login-form-container .input-group-text {
    border-radius: 8px 0 0 8px;
    background-color: #e9ecef;
    border-right: none;
}

.login-form-container .btn-primary {
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.login-form-container .btn-primary:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.login-form-container .feature-list span {
    font-size: 1.1rem;
    line-height: 1.6;
}

.login-form-container .feature-list i {
    font-size: 1.5rem; /* Larger icons in feature list */
    color: rgba(255, 255, 255, 0.8);
}

.login-form-container .text-sm {
    font-size: 0.875rem; /* Smaller text for demo credentials */
}

.login-form-container .text-center.mb-4.d-lg-none h2 {
    font-size: 2.5rem; /* Adjust title size for mobile */
}

/* Specific style for the branding text on the left */
.col-lg-6.d-none.d-lg-flex .display-4 {
    font-size: 3.5rem; /* Slightly larger for impact */
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.col-lg-6.d-none.d-lg-flex .lead {
    font-size: 1.5rem;
    margin-bottom: 2.5rem !important;
}

.login-form-container .card-title {
    font-size: 2rem;
    font-weight: 700;
    color: #343a40;
}

.login-form-container .alert {
    border-radius: 8px;
}

.login-form-container .input-group-text + .form-control {
    border-left: 1px solid #ced4da; /* Restore left border for input */
}

.login-form-container .input-group .btn {
    border-radius: 0 8px 8px 0;
}

.login-form-container .input-group .form-control:focus + .btn {
    border-color: #007bff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

.login-form-container .text-muted small {
    font-size: 0.8rem;
}

.login-form-container .text-sm strong {
    font-weight: 700;
}

/* ============================= */
/* Recommendations Enhancements  */
/* ============================= */
.pm-reco-wrapper { position: relative; }
.pm-reco-action { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border: 1px solid #e5e7eb; border-radius: .65rem; padding: 1rem 1rem .75rem; margin-bottom: 1rem; transition: border-color .25s ease, box-shadow .25s ease, background .3s ease; }
.pm-reco-action:hover { border-color: var(--pm-primary); box-shadow: 0 4px 14px -2px rgba(13,110,253,.15); }
.pm-reco-action-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.pm-reco-action-title { font-size: .95rem; font-weight: 600; margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; color: #0d3d78; }
.pm-reco-q-badge { font-size: .65rem; letter-spacing: .5px; background: #e7f1ff; color: #0d47a1; border: 1px solid #b2d4ff; font-weight: 600; padding: .35em .55em; border-radius: .4rem; }
.pm-reco-meta-count { background: #f1f3f5; font-size: .65rem; font-weight: 600; padding: .35em .55em; border-radius: .4rem; color: #495057; display: inline-flex; align-items: center; gap: .35rem; }
.pm-reco-action { position: relative; }
.pm-reco-action::before { content:""; position:absolute; left:0; top:.5rem; bottom:.5rem; width:4px; background: linear-gradient(180deg,var(--pm-primary), var(--pm-accent)); border-radius:2px; opacity:.18; }
.pm-reco-items { list-style: none; padding: 0; margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.pm-reco-item { background: #ffffff; border: 1px solid #eceff1; border-radius: .55rem; padding: .5rem .6rem; display: flex; gap: .55rem; align-items: flex-start; transition: border-color .25s ease, box-shadow .25s ease; flex: 1 1 calc(100% - .6rem); max-width: 100%; }
@media (min-width: 576px) { .pm-reco-item { flex: 1 1 calc(50% - .6rem); max-width: calc(50% - .6rem); } }
@media (min-width: 992px) { .pm-reco-item { flex: 1 1 calc(33.333% - .6rem); max-width: calc(33.333% - .6rem); } }
.pm-reco-item:hover { border-color: #d0d7de; box-shadow: 0 2px 6px -2px rgba(0,0,0,.08); }
.pm-reco-item-index { font-weight: 600; color: var(--pm-primary); font-size: .75rem; background: #eef6ff; border: 1px solid #d2e7ff; border-radius: .45rem; padding: .3rem .5rem; line-height: 1; min-width: 1.8rem; text-align: center; }
.pm-reco-item-body { flex: 1 1 auto; min-width: 0; }
.pm-reco-item-title { font-size: .8rem; font-weight: 600; margin: 0 0 .15rem; color: #1f2d3d; }
.pm-reco-item-desc { font-size: .65rem; line-height: 1.25; color: #5f6b76; margin: 0 0 .3rem; }
.pm-chip-group { display: flex; flex-wrap: wrap; gap: .35rem; }
.pm-chip { font-size: .6rem; font-weight: 600; letter-spacing: .3px; padding: .35em .55em; border-radius: .4rem; background: #f1f3f5; color: #495057; display: inline-flex; align-items: center; gap: .25rem; border: 1px solid #e2e6ea; }
.pm-chip i { font-size: .65rem; opacity: .75; }
.pm-chip-diff-easy { background: #e6f9ed; color:#1b6e36; border-color:#b8eccd; }
.pm-chip-diff-medium { background:#fff4d8; color:#7a5200; border-color:#fcdba1; }
.pm-chip-diff-hard { background:#fde4e4; color:#8a2222; border-color:#f5b4b4; }
.pm-chip-category { background:#ecf5ff; color:#0d47a1; border-color:#c9e4ff; }
.pm-chip-duration { background:#f0ecff; color:#4b148b; border-color:#dacfff; }
.pm-reco-footer { margin-top: .75rem; font-size: .65rem; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: #6c757d; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.pm-reco-footer strong { color: #343a40; }
@media (min-width: 768px) { .pm-reco-items { flex-direction: column; } }
.pm-reco-action { opacity: 0; transform: translateY(6px); animation: pmFadeUp .5s ease forwards; }
.pm-reco-action:nth-child(2) { animation-delay: .05s; }
.pm-reco-action:nth-child(3) { animation-delay: .1s; }
.pm-reco-action:nth-child(4) { animation-delay: .15s; }
@keyframes pmFadeUp { to { opacity:1; transform: translateY(0); } }

/* Compact mode refinements */
.pm-reco-compact .pm-reco-action { padding: .75rem .85rem .6rem; margin-bottom: .75rem; }
.pm-reco-compact .pm-reco-action-title { font-size: .85rem; }
.pm-reco-compact .pm-reco-q-badge { font-size: .55rem; }
.pm-reco-compact .pm-reco-meta-count { font-size: .55rem; }
.pm-reco-compact .pm-reco-items { display: none; }

/* Pill list for items (collapsed preview) */
.pm-reco-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: .35rem 0 .15rem; max-height: 3.25rem; overflow: hidden; }
.pm-reco-pill { font-size: .55rem; line-height: 1.1; font-weight: 600; background: #f3f4f6; border: 1px solid #e2e6ea; border-radius: .65rem; padding: .25rem .55rem; color:#374151; display: inline-flex; align-items: center; gap: .35rem; max-width: 12rem; position: relative; }
.pm-reco-pill i { font-size: .6rem; opacity: .6; }
.pm-reco-pill .pm-reco-pill-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-reco-pill[data-diff="1"] { background:#e6f9ed; border-color:#b8eccd; color:#1b6e36; }
.pm-reco-pill[data-diff="2"] { background:#fff4d8; border-color:#fcdba1; color:#7a5200; }
.pm-reco-pill[data-diff="3"] { background:#fde4e4; border-color:#f5b4b4; color:#8a2222; }
.pm-reco-pill-more { background:#ecf5ff; border-color:#c9e4ff; color:#0d47a1; cursor: pointer; }

/* Expanded state */
.pm-reco-action.expanded .pm-reco-items { display: flex; }
.pm-reco-action.expanded .pm-reco-pills { display: none; }

/* Global section height clamp with scroll when expanded massively */
.pm-reco-section-clamp { max-height: 480px; overflow-y: auto; overscroll-behavior: contain; }
.pm-reco-section-clamp::-webkit-scrollbar { width: 8px; }
.pm-reco-section-clamp::-webkit-scrollbar-track { background: #f1f3f5; }
.pm-reco-section-clamp::-webkit-scrollbar-thumb { background: #c4ccd4; border-radius: 4px; }
.pm-reco-section-clamp::-webkit-scrollbar-thumb:hover { background: #aab4be; }

/* Show more actions control */
.pm-reco-more-actions { font-size: .6rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; margin-top: .25rem; cursor: pointer; color: var(--pm-primary); display: inline-flex; align-items: center; gap: .3rem; }
.pm-reco-more-actions:hover { text-decoration: none; background:#eef3f8; border-radius:.3rem; }

/* =============================== */
/* Harmonized (Dashboard Consistent) Variant */
/* These overrides neutralize heavier custom styles to align with existing cards/list groups */
/* =============================== */
.pm-reco-wrapper { padding-right: .25rem; }
.pm-reco-action { background:#fff; border:1px solid #e9ecef; box-shadow:none; animation:none; opacity:1; transform:none; }
.pm-reco-action + .pm-reco-action { margin-top:.75rem; }
.pm-reco-action-header { margin-bottom:.35rem; }
.pm-reco-action-title { font-size:.9rem; color:#0d6efd; }
.pm-reco-q-badge { background:#f1f8ff; border-color:#d0e5f9; color:#0a58ca; }
.pm-reco-meta-count { background:#f8f9fa; }

/* Compact list items (consistent spacing with other dashboard lists) */
.pm-reco-items { flex-wrap:nowrap; gap:.35rem; }
.pm-reco-item { flex: 1 1 100%; max-width:100%; padding:.45rem .55rem; border-radius:.35rem; border:1px solid #eef1f3; }
.pm-reco-item:hover { border-color:#d9dde1; }
.pm-reco-item-index { background:#f1f5f9; border-color:#e2e8f0; font-size:.7rem; }
.pm-reco-item-title { font-size:.75rem; }
.pm-reco-item-desc { font-size:.62rem; }

/* Replace pill preview with inline collapsed summary chips */
.pm-reco-collapsed-summary { display:flex; flex-wrap:wrap; gap:.4rem; margin:.25rem 0 .1rem; }
.pm-reco-collapsed-chip { font-size:.55rem; font-weight:600; background:#f8f9fa; border:1px solid #e9ecef; color:#495057; border-radius:1rem; padding:.25rem .6rem; max-width:10rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-reco-collapsed-chip[data-diff="1"] { background:#e9f9ef; border-color:#c9edd6; color:#1f6b39; }
.pm-reco-collapsed-chip[data-diff="2"] { background:#fff4e0; border-color:#f8d9a9; color:#7a5200; }
.pm-reco-collapsed-chip[data-diff="3"] { background:#fde8e8; border-color:#f5bcbc; color:#842029; }
.pm-reco-expand-toggle { font-size:.6rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; cursor:pointer; color:var(--pm-primary); display:inline-flex; align-items:center; gap:.3rem; margin-top:.1rem; }
.pm-reco-expand-toggle:hover { text-decoration:none; background:#f1f3f5; border-radius:.25rem; }

/* Keyboard focus accessibility */
.pm-reco-expand-toggle:focus, .pm-reco-more-actions:focus { outline:2px solid var(--pm-primary); outline-offset:2px; }

/* Clamp refinement for harmonized mode */
.pm-reco-section-clamp { max-height:400px; }