/* ==========================================================================
   PREMIUM POLISH PASS (Phases 3, 4 partial, 6-9)
   Purely additive — every original class in components.css still works
   exactly as before; these rules only refine spacing/motion/color on top.
   ========================================================================== */

/* ---- Buttons: consistent height/radius/hover-lift on the big block buttons ---- */
.btn,.assess-save,.review-save,.csa-copy,.csa-ai,.ib-btn{
  border-radius:var(--radius-btn) !important;
  transition:transform .2s ease,box-shadow .2s ease,background .15s ease,border-color .15s ease !important;
}
.btn:hover,.assess-save:hover,.review-save:hover,.ib-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-card);
}
button, .oc-btn, .del-btn, .paste-btn, .show-img-btn, .replay-toggle{
  transition:transform .15s ease,color .15s ease,border-color .15s ease,background .15s ease;
}
.oc-btn:hover{transform:translateY(-1px);}

/* ---- Inputs: consistent height/padding/radius, blue focus (never red unless error) ---- */
.finput,.sr-input,.auth-gate-input,.exit-input,.result-note-input,input[type="text"],
input[type="number"],input[type="time"],input[type="password"],input[type="email"],textarea,select{
  border-radius:var(--radius-input) !important;
}
.finput:focus,.sr-input:focus,.auth-gate-input:focus,input:focus,textarea:focus,select:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

/* ---- Cards: journal entries, analytics cards, settings sections, home widgets ---- */
.entry,.an-card,.settings-section,.hw-box,.goal-card,.cheat-card{
  border-radius:var(--radius-card) !important;
  background:var(--card);
  transition:transform .2s ease,box-shadow .2s ease;
}
.entry:hover{transform:translateY(-2px);box-shadow:var(--shadow-card);}

/* ---- Modals / overlays: soft blur backdrop + scale-in ---- */
[class*="overlay"]{
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
@keyframes modalScaleIn{from{opacity:0;transform:scale(.96) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
.auth-gate-box,.chart-shot-popup{animation:modalScaleIn .2s ease;}

/* ---- Empty states: invitation to act, not just "no data" ---- */
.no-data{
  border:1.5px dashed var(--b2);
  border-radius:var(--radius-card);
  background:var(--surface);
}

/* ---- Skeleton loader (utility — replaces spinner-style loading text going forward) ---- */
.skeleton{
  border-radius:8px;
  background:linear-gradient(90deg,var(--s2) 25%,var(--s3) 37%,var(--s2) 63%);
  background-size:400% 100%;
  animation:skeletonShine 1.4s ease infinite;
}
@keyframes skeletonShine{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
.skeleton-line{height:14px;margin-bottom:8px;}
.skeleton-card{height:80px;border-radius:var(--radius-card);}

/* ---- Toast: on desktop move to top-right (brief's spec); mobile keeps
   bottom placement since that's the reachable thumb zone on a phone ---- */
@media (min-width:901px){
  .undo-toast{
    left:auto;right:24px;bottom:auto;top:24px;
    transform:translateY(-12px);
  }
  .undo-toast.show{transform:translateY(0);}
}

/* ---- Mobile floating "New Trade" button (brief item 24) ---- */
.mobile-fab{
  display:none;
}
@media (max-width:900px){
  .mobile-fab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:18px;bottom:84px;z-index:250;
    width:56px;height:56px;border-radius:50%;
    background:var(--primary);color:#fff;border:none;cursor:pointer;
    box-shadow:var(--shadow-card);
    transition:transform .2s ease;
  }
  .mobile-fab:active{transform:scale(.94);}
}

/* ---- Touch target floor on mobile (accessibility item 24/25) ---- */
@media (max-width:900px){
  .bnav-item{min-height:44px;}
  .btn,.oc-btn,.assess-save,.review-save{min-height:44px;}
}

/* ---- Settings: light two-tab split reusing the existing two columns,
   so nothing about the settings content itself was reorganized ---- */
.settings-tabbar{display:none;gap:8px;margin-bottom:16px;}
@media (max-width:999px){
  /* Only needed on the breakpoint where settings-col already stacks
     (desktop already shows both columns side-by-side, see components.css) */
  .settings-tabbar{display:flex;}
  .settings-tab-btn{
    flex:1;padding:10px;border-radius:var(--radius-btn);
    background:var(--s2);border:var(--border);color:var(--t2);
    font-size:var(--fs-small);font-weight:600;cursor:pointer;font-family:inherit;
  }
  .settings-tab-btn.active{background:var(--primary-bg);color:var(--primary);border-color:var(--primary);}
  #pgSettings.show .settings-col{display:none;}
  #pgSettings.show .settings-col.tab-active{display:block;}
}