/* ============================================================
   SkillUp Business School — polish.css
   Purely additive visual enhancement layer.
   Load LAST, after dashboard.css and glass.css.
   Brand: blue #1A56DB / pink #E5117F
   Low-specificity rules — safe to drop on every page.
   ============================================================ */

/* ── Polish Design Tokens ─────────────────────────────────── */
:root {
  --polish-pink:        #E5117F;
  --polish-pink-light:  rgba(229, 17, 127, 0.10);
  --polish-blue:        #1A56DB;
  --polish-focus-ring:  0 0 0 3px rgba(26, 86, 219, 0.22);
  --polish-focus-ring-pink: 0 0 0 3px rgba(229, 17, 127, 0.20);
  --polish-lift-sm:     0 6px 20px rgba(15, 23, 42, 0.09), 0 2px 6px rgba(15, 23, 42, 0.05);
  --polish-lift-md:     0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);
  --polish-lift-blue:   0 10px 28px rgba(26, 86, 219, 0.20);
  --polish-transition:  0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Custom Scrollbar ─────────────────────────────────────── */
/* Applies to all pages that do not already define scrollbar styles */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.16);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 86, 219, 0.45);
  background-clip: padding-box;
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.16) transparent;
}

/* ── Accessible Focus-Visible Outlines ────────────────────── */
/* Override browser defaults with branded focus rings — keyboard only */
:focus {
  outline: none;
}
:focus-visible {
  outline: 2px solid var(--polish-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Buttons get a richer ring */
.btn:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--polish-focus-ring);
}

/* Inputs/selects/textareas: brand ring on keyboard focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.form-control:focus-visible,
.search-box input:focus-visible,
.filter-select:focus-visible,
.sort-select:focus-visible,
.notes-textarea:focus-visible,
.qa-input:focus-visible {
  outline: none;
  border-color: var(--polish-blue) !important;
  box-shadow: var(--polish-focus-ring) !important;
}

/* Nav links */
.nav-link:focus-visible,
.nav-item:focus-visible,
a:focus-visible {
  outline: 2px solid var(--polish-blue);
  outline-offset: 2px;
}

/* ── Button Micro-Interactions ────────────────────────────── */
/* Ensure all .btn variants have a smooth, consistent transition baseline */
.btn {
  transition:
    background    var(--polish-transition),
    border-color  var(--polish-transition),
    box-shadow    var(--polish-transition),
    transform     0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    color         var(--polish-transition),
    opacity       var(--polish-transition);
  will-change: transform, box-shadow;
}

/* Active press — consistent across all button variants */
.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.08s;
}

/* Disabled state */
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Enroll button (dashboard course cards) */
.enroll-btn {
  transition:
    background    var(--polish-transition),
    box-shadow    var(--polish-transition),
    transform     0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.enroll-btn:active {
  transform: scale(0.96);
}

/* Topbar and sidebar action buttons */
.topbar-btn,
.sidebar-logout,
.edit-profile-btn,
.tab-btn {
  transition:
    background    var(--polish-transition),
    color         var(--polish-transition),
    border-color  var(--polish-transition),
    box-shadow    var(--polish-transition),
    transform     0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.topbar-btn:active,
.sidebar-logout:active,
.edit-profile-btn:active,
.tab-btn:active {
  transform: scale(0.96);
}

/* ── Consistent Card Hover Lift + Shadow ──────────────────── */
/* .stat-card already has a transform in dashboard.css — polish refines timing */
.stat-card {
  transition:
    box-shadow  var(--polish-transition),
    transform   var(--polish-transition),
    border-color var(--polish-transition),
    background  var(--polish-transition);
}
.stat-card:hover {
  box-shadow: var(--polish-lift-md) !important;
}

/* Panel cards / section cards */
.panel-card,
.section-card {
  transition:
    box-shadow   var(--polish-transition),
    border-color var(--polish-transition),
    transform    var(--polish-transition);
}
.panel-card:hover,
.section-card:hover {
  box-shadow: var(--polish-lift-sm);
  transform: translateY(-1px);
}

/* Course progress cards in student dashboard */
.course-progress-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition);
}

/* Dashboard course cards and catalog cards */
.course-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition),
    background   var(--polish-transition);
}
.course-card:hover {
  box-shadow: var(--polish-lift-blue) !important;
}

/* Continue card (home dashboard "continue where you left off") */
.continue-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition);
}

/* Certificate cards */
.cert-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition);
}
.cert-card:hover {
  box-shadow: var(--polish-lift-sm);
  transform: translateY(-2px);
}

/* Activity card */
.activity-card {
  transition:
    box-shadow   var(--polish-transition),
    border-color var(--polish-transition);
}

/* Feature cards (marketing pages) */
.feature-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition);
}

/* Category cards */
.cat-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition),
    background   var(--polish-transition);
}

/* Testimonial cards */
.testi-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition);
}

/* scard / lic / org (company and admin portals) */
.scard,
.lic,
.org {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    border-color var(--polish-transition),
    background   var(--polish-transition);
}
.scard:hover,
.lic:hover,
.org:hover {
  box-shadow: var(--polish-lift-sm);
  transform: translateY(-2px);
}

/* glass-card utility */
.glass-card {
  transition:
    box-shadow   var(--polish-transition),
    transform    var(--polish-transition),
    background   var(--polish-transition);
}
.glass-card:hover {
  box-shadow: var(--polish-lift-sm);
  transform: translateY(-2px);
}

/* ── Nicer Form Inputs & Selects ──────────────────────────── */
/* Universal refinement — applies everywhere, overrides if needed */
.form-control,
.form-group input,
.form-group textarea,
.form-group select,
.search-box input,
.filter-select,
.sort-select,
.notes-textarea,
.qa-input {
  transition:
    border-color  var(--polish-transition),
    box-shadow    var(--polish-transition),
    background    var(--polish-transition);
}

/* Slightly elevated placeholder contrast */
.form-control::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder,
.search-box input::placeholder,
.notes-textarea::placeholder,
.qa-input::placeholder {
  color: rgba(148, 163, 184, 0.85);
}

/* Select arrow refinement — brand blue caret */
select.form-control,
.filter-select,
.sort-select,
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A56DB' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.25rem;
}

/* ── Table Row Interactions ───────────────────────────────── */
tbody tr {
  transition: background var(--polish-transition);
}

/* ── Pagination Buttons ───────────────────────────────────── */
.page-btn {
  transition:
    background    var(--polish-transition),
    border-color  var(--polish-transition),
    color         var(--polish-transition),
    box-shadow    var(--polish-transition),
    transform     0.12s ease;
}
.page-btn:hover:not(.active):not(.disabled) {
  transform: scale(1.05);
}
.page-btn.active {
  box-shadow: 0 2px 8px rgba(26, 86, 219, 0.30);
}

/* ── Nav Link Transitions ─────────────────────────────────── */
.nav-link,
.nav-item {
  transition:
    color        var(--polish-transition),
    background   var(--polish-transition),
    box-shadow   var(--polish-transition);
}

/* ── Curriculum Item Hover ────────────────────────────────── */
.curriculum-item,
.video-item {
  transition:
    background   var(--polish-transition),
    transform    var(--polish-transition);
}

/* ── Modal Entry Refinement ───────────────────────────────── */
.modal {
  transition:
    transform  0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity    0.22s ease;
}

/* ── Progress Bars ────────────────────────────────────────── */
.progress-bar-fill,
.cppd-bar-fill,
.progress-fill {
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Skeleton Shimmer Utility ─────────────────────────────── */
/*
  Usage: add class "skeleton-block" to any empty container
  while data is loading. Combine with inline style for size.
  Example: <div class="skeleton-block" style="height:1.2rem;width:60%;border-radius:6px;"></div>
*/
@keyframes polish-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}

.skeleton-block {
  display: block;
  background: linear-gradient(
    90deg,
    rgba(226, 232, 240, 0.80)   0%,
    rgba(226, 232, 240, 0.80)   30%,
    rgba(241, 245, 249, 0.90)  48%,
    rgba(255, 255, 255, 0.90)  52%,
    rgba(241, 245, 249, 0.90)  56%,
    rgba(226, 232, 240, 0.80)   70%,
    rgba(226, 232, 240, 0.80)  100%
  );
  background-size: 300% 100%;
  animation: polish-shimmer 1.7s ease-in-out infinite;
  border-radius: 6px;
}

/* Convenience row for full skeleton card mock */
.skeleton-card {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.skeleton-line {
  height: 0.875rem;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(226, 232, 240, 0.80)   0%,
    rgba(226, 232, 240, 0.80)   30%,
    rgba(255, 255, 255, 0.90)  50%,
    rgba(226, 232, 240, 0.80)   70%,
    rgba(226, 232, 240, 0.80)  100%
  );
  background-size: 300% 100%;
  animation: polish-shimmer 1.7s ease-in-out infinite;
}
.skeleton-line.short  { width: 45%; }
.skeleton-line.medium { width: 65%; }
.skeleton-line.full   { width: 100%; }

/* Shimmer variation for glass pages (lighter sweep) */
.glass-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.30)  0%,
    rgba(255, 255, 255, 0.30)  30%,
    rgba(255, 255, 255, 0.60)  50%,
    rgba(255, 255, 255, 0.30)  70%,
    rgba(255, 255, 255, 0.30) 100%
  );
  background-size: 300% 100%;
  animation: polish-shimmer 1.7s ease-in-out infinite;
  border-radius: 8px;
}

/* ── Sidebar Transitions ──────────────────────────────────── */
.sidebar {
  transition:
    transform    0.30s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow   var(--polish-transition);
}

/* ── Topbar Scroll State ──────────────────────────────────── */
.topbar,
.dash-topbar {
  transition:
    background      var(--polish-transition),
    backdrop-filter var(--polish-transition),
    box-shadow      var(--polish-transition),
    border-color    var(--polish-transition);
}

/* ── Notification Dot Pulse ───────────────────────────────── */
@keyframes notif-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  50%       { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}
.notification-dot {
  animation: notif-pulse 2.2s ease-in-out infinite;
}

/* ── Link Hover State (nav/utility) ───────────────────────── */
.section-link,
.back-link,
footer ul li a,
.footer-legal a {
  transition:
    color         var(--polish-transition),
    opacity       var(--polish-transition),
    padding-left  var(--polish-transition);
}

/* ── Social Buttons ───────────────────────────────────────── */
.social-btn {
  transition:
    background    var(--polish-transition),
    border-color  var(--polish-transition),
    color         var(--polish-transition),
    transform     0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow    var(--polish-transition);
}
.social-btn:active {
  transform: scale(0.92);
}

/* ── Avatar Hover ─────────────────────────────────────────── */
.nav-user-btn,
.user-avatar-sm,
.sidebar-avatar,
.user-avatar-placeholder,
.profile-avatar {
  transition:
    transform    0.20s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow   var(--polish-transition);
}
.nav-user-btn:hover,
.user-avatar-sm:hover,
.sidebar-avatar:hover,
.user-avatar-placeholder:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(26, 86, 219, 0.22);
}

/* ── Badge Micro-Transitions ──────────────────────────────── */
.badge,
.course-tag,
.profile-badge,
.nav-badge,
.cppd-tag {
  transition:
    background  var(--polish-transition),
    color       var(--polish-transition),
    transform   0.12s ease;
}

/* ── Option Buttons (Exam) ────────────────────────────────── */
.option-btn {
  transition:
    border-color  var(--polish-transition),
    background    var(--polish-transition),
    color         var(--polish-transition),
    transform     0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow    var(--polish-transition);
}
.option-btn:focus-visible {
  outline: none;
  box-shadow: var(--polish-focus-ring);
}

/* ── Resource Items ───────────────────────────────────────── */
.resource-item {
  transition:
    border-color  var(--polish-transition),
    background    var(--polish-transition),
    transform     var(--polish-transition);
}
.resource-item:hover {
  transform: translateX(3px);
}

/* ── Smooth Image Zoom on Cards ───────────────────────────── */
.course-thumb img,
.course-card-img {
  transition: transform 0.40s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Welcome Banner Glow Enhancement ─────────────────────── */
.welcome-banner {
  transition:
    box-shadow  var(--polish-transition);
}

/* ── Stat Top-Border Height Transition ───────────────────── */
.stat-card::before {
  transition: height 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Auth Card Entry Enhancement ─────────────────────────── */
.auth-card {
  transition:
    box-shadow  var(--polish-transition),
    transform   var(--polish-transition);
}

/* ── Filter Option Hover ──────────────────────────────────── */
.filter-option {
  transition:
    color         var(--polish-transition),
    background    var(--polish-transition);
  border-radius: 4px;
}

/* ── Tabs (pill segment control) ─────────────────────────── */
.tab-btn {
  transition:
    background  var(--polish-transition),
    color       var(--polish-transition),
    box-shadow  var(--polish-transition);
}

/* ── Topbar Buttons ───────────────────────────────────────── */
.topbar-btn:focus-visible {
  outline: none;
  box-shadow: var(--polish-focus-ring);
}

/* ── Video Controls ───────────────────────────────────────── */
.vc-btn {
  transition:
    color        0.15s ease,
    background   0.15s ease,
    transform    0.12s ease;
}

/* ── Breadcrumb Link ──────────────────────────────────────── */
.breadcrumb a {
  transition: color var(--polish-transition);
}
.breadcrumb a:hover {
  color: var(--polish-blue);
}

/* ── Page-Button Disabled ─────────────────────────────────── */
.page-btn.disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ── Addbar (admin/company form areas) ───────────────────── */
.addbar {
  transition:
    box-shadow   var(--polish-transition),
    border-color var(--polish-transition);
}

/* ── Print Safety ─────────────────────────────────────────── */
@media print {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
  }
}

/* ── Reduced-Motion: disable all animations & transitions ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }

  /* Skeleton shimmer becomes a static tint */
  .skeleton-block,
  .skeleton-line,
  .glass-shimmer {
    animation: none !important;
    background: rgba(226, 232, 240, 0.75) !important;
  }

  /* Notification dot stops pulsing */
  .notification-dot {
    animation: none !important;
  }

  /* Stat number no longer bounces */
  .stat-card:hover {
    transform: none;
  }

  /* Cards no longer lift */
  .stat-card:hover,
  .course-card:hover,
  .continue-card:hover,
  .cert-card:hover,
  .panel-card:hover,
  .section-card:hover,
  .scard:hover,
  .lic:hover,
  .org:hover,
  .glass-card:hover {
    transform: none !important;
  }
}

/* ── Browser autofill: keep fields clean white instead of the default pale yellow ── */
/* Chrome/Safari paint -webkit-autofill fields yellow; the inset box-shadow trick
   repaints the background white while keeping the text dark and readable. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #0f172a;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  caret-color: #0f172a;
  transition: background-color 9999s ease-in-out 0s;
}