/* ============================================================
   Contextual Right Pane — "Visual Learning Companion"
   Reusable across any dashboard page. Include this file + the
   partial partials/contextual-right-pane.blade.php together.
   ============================================================ */

/* ── Page layout: main content + pane side by side ── */
.crp-page{
  max-width:1400px;margin:0 auto;padding:48px 32px 80px;
  display:flex;gap:28px;align-items:flex-start;
}
.crp-main{flex:1;min-width:0;}

/* ── Pane shell ── */
.crp-shell{
  width:320px;flex-shrink:0;position:sticky;top:28px;
  border-radius:24px;border:1px solid var(--border);
  background:linear-gradient(165deg,#fff 0%,#F8FAFC 100%);
  box-shadow:0 10px 32px rgba(15,23,42,0.07);
  overflow:hidden;
}
[data-theme="dark"] .crp-shell{background:linear-gradient(165deg,#161B2C 0%,#12162280 100%);}

.crp-inner{padding:26px 22px 24px;transition:opacity .32s ease, transform .32s ease;}
.crp-inner.crp-swap-out{opacity:0;transform:translateY(6px);}

/* ── Visual stage ── */
.crp-visual{position:relative;height:190px;margin-bottom:18px;overflow:visible;}

.crp-bg-shape{position:absolute;border-radius:50%;opacity:.14;filter:blur(2px);}
.crp-bg-shape-1{width:150px;height:150px;top:-30px;right:-30px;background:var(--crp-a1);}
.crp-bg-shape-2{width:100px;height:100px;bottom:-20px;left:-10px;background:var(--crp-a2);}

.crp-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:22px;
  background:linear-gradient(135deg,var(--crp-a1),var(--crp-a2));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:32px;
  box-shadow:0 10px 26px -6px var(--crp-a1);
}

.crp-orbit-icon{
  position:absolute;width:36px;height:36px;border-radius:11px;background:#fff;
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--crp-a1);box-shadow:0 6px 16px rgba(15,23,42,0.08);
}
.crp-orbit-icon-1{top:6%;left:10%;}
.crp-orbit-icon-2{top:12%;right:8%;}
.crp-orbit-icon-3{bottom:8%;left:4%;}
.crp-orbit-icon-4{bottom:4%;right:14%;}
.crp-orbit-icon-5{top:44%;left:-2%;}

.crp-floater{
  position:absolute;font-size:11.5px;font-weight:700;color:var(--crp-a1);
  background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:4px 10px;box-shadow:0 4px 10px rgba(15,23,42,0.06);white-space:nowrap;
}
.crp-floater-1{top:2%;left:38%;}
.crp-floater-2{top:26%;right:0%;}
.crp-floater-3{bottom:22%;left:0%;}
.crp-floater-4{bottom:0%;right:22%;}
.crp-floater-5{top:60%;right:-4%;}
.crp-floater-6{bottom:14%;left:44%;}
.crp-floater-7{top:16%;left:2%;}

/* ── Text ── */
.crp-title{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:4px;font-family:'Poppins',sans-serif;}
.crp-subtitle{font-size:13px;color:var(--muted);margin-bottom:18px;line-height:1.5;}

/* ── Note / tip card ── */
.crp-note-card{
  background:linear-gradient(135deg,color-mix(in srgb, var(--crp-a1) 10%, transparent),color-mix(in srgb, var(--crp-a2) 10%, transparent));
  border-radius:14px;padding:14px 16px;margin-bottom:16px;
}
.crp-note-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--crp-a1);margin-bottom:5px;}
.crp-note-text{font-size:13px;color:var(--text);line-height:1.55;}

/* ── Stats (optional, data-driven) ── */
.crp-stats-row{display:flex;gap:10px;margin-bottom:16px;}
.crp-stat{flex:1;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center;}
.crp-stat-val{font-size:16px;font-weight:700;color:var(--ink);font-family:'Poppins',sans-serif;}
.crp-stat-lbl{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.02em;}

/* ── Actions ── */
.crp-actions{display:flex;flex-direction:column;gap:8px;}
.crp-action-btn{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--crp-a1),var(--crp-a2));color:#fff;
  padding:11px 16px;border-radius:12px;font-size:13px;font-weight:600;
  transition:transform .15s ease,box-shadow .15s ease;
}
.crp-action-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px -4px var(--crp-a1);}
.crp-action-btn i{font-size:14px;}

/* ── Mobile collapsible toggle (hidden on desktop) ── */
.crp-mobile-toggle{
  display:none;width:100%;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;border:none;
  padding:13px;border-radius:14px;font-size:13.5px;font-weight:600;cursor:pointer;
  margin-top:16px;order:3;font-family:'Inter',sans-serif;
}
.crp-mobile-toggle .ti-chevron-down{transition:transform .25s ease;margin-left:auto;}
.crp-mobile-toggle[aria-expanded="true"] .ti-chevron-down{transform:rotate(180deg);}

/* ============================================================
   Animation system — reusable classes
   ============================================================ */
@keyframes pane-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes pane-float-slow{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
@keyframes pane-pulse{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.05);}}
@keyframes pane-glow{0%,100%{box-shadow:0 10px 26px -6px var(--crp-a1);}50%{box-shadow:0 10px 40px -2px var(--crp-a2);}}
@keyframes pane-orbit{0%{transform:translate(-50%,-50%) rotate(0deg);}100%{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes pane-rotate{0%,100%{transform:translate(-50%,-50%) rotate(-4deg);}50%{transform:translate(-50%,-50%) rotate(4deg);}}
@keyframes pane-fade{from{opacity:0;}to{opacity:1;}}
@keyframes pane-slide{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:translateX(0);}}
@keyframes pane-bounce{0%,100%{transform:translate(-50%,-50%) translateY(0);}50%{transform:translate(-50%,-50%) translateY(-5px);}}
@keyframes pane-shimmer{0%{opacity:.6;}50%{opacity:1;}100%{opacity:.6;}}

.pane-float{animation:pane-float 3.4s ease-in-out infinite;}
.pane-float-slow{animation:pane-float-slow 4.6s ease-in-out infinite;}
.pane-pulse{animation:pane-pulse 2.6s ease-in-out infinite;}
.pane-glow{animation:pane-glow 2.4s ease-in-out infinite;}
.pane-orbit{animation:pane-rotate 5s ease-in-out infinite;}
.pane-bounce{animation:pane-bounce 2.2s ease-in-out infinite;}

/* stagger the floaters/orbit icons so nothing moves in lockstep */
.crp-orbit-icon-2, .crp-floater-2, .crp-floater-5{animation-delay:.6s;}
.crp-orbit-icon-3, .crp-floater-3, .crp-floater-6{animation-delay:1.2s;}
.crp-orbit-icon-4, .crp-floater-4, .crp-floater-7{animation-delay:1.8s;}
.crp-orbit-icon-5{animation-delay:2.4s;}

@media(prefers-reduced-motion: reduce){
  .crp-shell *{animation:none !important;transition:none !important;}
}

/* ============================================================
   Responsive breakpoints
   ============================================================ */
@media(max-width:1300px){
  .crp-shell{width:260px;}
  .crp-orbit-icon{width:32px;height:32px;font-size:14px;}
}

@media(max-width:1024px){
  .crp-page{flex-direction:column;}
  .crp-shell{
    width:100%;position:static;order:2;
    max-height:0;opacity:0;margin-top:0;border:none;box-shadow:none;
    transition:max-height .4s ease,opacity .3s ease,margin-top .3s ease;
  }
  .crp-shell.crp-expanded{
    max-height:1000px;opacity:1;margin-top:4px;border:1px solid var(--border);
    box-shadow:0 10px 32px rgba(15,23,42,0.07);
  }
  .crp-mobile-toggle{display:flex;}
}

@media(max-width:480px){
  .crp-inner{padding:20px 18px;}
  .crp-visual{height:160px;}
  .crp-core{width:64px;height:64px;font-size:26px;}
}