/* ==================================================================
   Free Tools: hub, APS Calculator, Past Papers, Budget Planner
   (ported from the Lovable/React version, same design, plain CSS)
   ================================================================== */

/* ---------------- Tools hub ---------------- */
.tools-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}

.tool-card{
  position:relative;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; display:flex; flex-direction:column; gap:10px;
  text-decoration:none; color:var(--text);
  cursor:pointer;
  transition: box-shadow .18s ease, border-color .18s ease;
}

.tool-card:hover,
.tool-card:focus-within{
  border-color:var(--primary-light);
  box-shadow:0 12px 26px -18px rgba(18,74,61,.55);
}

/* Lift contents, not the card box */
.tool-card > *{
  transition: transform .18s ease;
}
.tool-card:hover > *,
.tool-card:focus-within > *{
  transform: translateY(-3px);
}

.tool-card .card-icon{
  width:42px; height:42px; border-radius:11px;
  color:var(--primary); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  margin-bottom:2px;
}
.tool-card .card-icon svg{width:20px; height:20px; display:block;}

.tool-card:hover .card-icon,
.tool-card:focus-within .card-icon{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--accent);
}

.tool-card h3{font-size:18px; margin-bottom:0;}
.tool-card p{color:var(--muted); font-size:14.5px; margin-bottom:0; flex-grow:1;}
.tool-card .card-link{
  font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}
.tool-card .card-link .arrow{
  transition: transform .18s ease;
  display:inline-block;
}
.tool-card:hover .card-link .arrow{transform:translateX(3px);}

/* Stretched CTA should not lift */
.tool-card .card-link{transform:none !important;}
.tool-card:hover .card-link{transform:none !important;}

.tool-card:focus-visible{outline:2px solid var(--primary-light); outline-offset:3px;}

/* Reveal on scroll */
.reveal{
  opacity:0; transform:translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-visible{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .tool-card, .tool-card > *, .tool-card .card-icon, .tool-card .card-link .arrow{transition:none;}
  .tool-card:hover > *{transform:none;}
}

@media (max-width:700px){
  .tool-card:hover > *{transform:none;}
  .tool-card .card-link{transform:none !important;}
}


/* ---------------- Shared tool page layout ---------------- */
.tool-layout{
  display:grid; gap:24px;
}
@media (min-width:960px){
  .tool-layout.two-col{grid-template-columns:1.05fr 0.95fr; align-items:start;}
}
.tool-panel{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:26px;
}
.tool-panel.soft-panel{background:var(--bg-soft);}
.tool-panel h2{font-size:19px;}
.tool-panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;}

.tool-btn-add{
  border:1px solid var(--border); background:var(--bg-soft); color:var(--primary);
  border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer;
  font-family:inherit; transition:border-color .15s ease;
}
.tool-btn-add:hover{border-color:var(--primary);}
.tool-btn-remove{
  border:1px solid var(--border); background:#fff; color:var(--muted);
  border-radius:8px; padding:8px 10px; cursor:pointer; font-family:inherit;
  transition:border-color .15s ease, color .15s ease;
}
.tool-btn-remove:hover{border-color:var(--primary); color:var(--primary);}

.tool-select, .tool-input{
  width:100%; border:1px solid var(--border); border-radius:8px; padding:9px 12px;
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--text); background:#fff;
  outline:none; transition:border-color .15s ease;
}
.tool-select:focus, .tool-input:focus{border-color:var(--primary);}
.tool-field-label{font-size:13px; font-weight:600; color:var(--primary); display:block; margin-bottom:5px;}

/* ---------------- APS Calculator ---------------- */
.subject-row{
  display:grid; grid-template-columns:1.4fr 1fr auto; gap:8px; align-items:center;
  margin-bottom:10px;
}
.aps-score-box{
  margin-top:20px; border-radius:14px; padding:22px;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
  color:#fff;
}
.aps-score-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.aps-score-label{font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.72);}
.aps-score-value{font-family:'Poppins',sans-serif; font-weight:800; font-size:42px; line-height:1; margin-top:4px;}
.aps-status-badge{
  background:var(--accent); color:#231a00; font-size:11.5px; font-weight:800;
  border-radius:999px; padding:5px 12px; white-space:nowrap;
}
.aps-status-msg{font-size:14px; color:rgba(255,255,255,0.92); margin-top:12px; margin-bottom:0;}
.aps-note{font-size:12px; color:rgba(255,255,255,0.7); margin-top:6px; margin-bottom:0;}

.aps-filter-grid{display:grid; gap:12px; grid-template-columns:repeat(2,1fr); margin-top:14px;}
.aps-toggle-row{display:flex; align-items:center; gap:8px; margin-top:6px;}
.aps-toggle-row label{font-size:12.5px; display:flex; align-items:center; gap:5px; border:1px solid var(--border); background:#fff; border-radius:8px; padding:8px 10px; font-weight:500;}
.aps-toggle-row input[type="checkbox"]{accent-color:var(--primary);}

.aps-match-count{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted); margin:16px 0 10px 0;}
.aps-results{display:flex; flex-direction:column; gap:12px; max-height:560px; overflow-y:auto; padding-right:4px;}
.qual-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; transition:box-shadow .15s ease;}
.qual-card:hover{box-shadow:0 10px 24px rgba(18,74,61,0.08);}
.qual-top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.qual-tag{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--primary-light);}
.qual-course{font-size:16px; margin:4px 0 2px 0;}
.qual-meta{font-size:13px; color:var(--muted); margin:0;}
.qual-aps-badge{
  flex-shrink:0; background:var(--accent); color:#231a00; font-size:12px; font-weight:800;
  border-radius:999px; padding:5px 12px; white-space:nowrap;
}
.qual-card a{font-size:13.5px; font-weight:600; display:inline-block; margin-top:10px;}
.no-matches{border:1.5px dashed var(--border); border-radius:12px; padding:26px; text-align:center; color:var(--muted); font-size:14px;}

/* ---------------- Past Papers ---------------- */
.paper-filter-grid{display:grid; gap:12px; grid-template-columns:2fr 1fr 1fr;}
@media (max-width:720px){ .paper-filter-grid{grid-template-columns:1fr;} }
.paper-result-count{font-size:13px; color:var(--muted); margin-top:10px;}
.paper-subject-group{margin-top:30px;}
.paper-subject-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px;}
.paper-subject-head h3{font-size:18px; margin-bottom:0;}
.paper-subject-head span{font-size:13px; color:var(--muted);}
.paper-grid{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));}
.paper-card{background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px; transition:box-shadow .15s ease;}
.paper-card:hover{box-shadow:0 10px 24px rgba(18,74,61,0.08);}
.paper-card-top{display:flex; justify-content:space-between; align-items:center;}
.paper-year-badge{background:var(--bg-soft); color:var(--primary); font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px;}
.paper-lang{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted);}
.paper-card h4{font-size:15.5px; margin:10px 0 12px 0;}
.paper-card-actions{display:flex; gap:8px;}
.paper-card-actions a{
  flex:1; text-align:center; border-radius:8px; padding:8px 10px; font-size:13px; font-weight:600; text-decoration:none;
}
.paper-card-actions a.primary{background:var(--primary); color:#fff;}
.paper-card-actions a.primary:hover{background:var(--primary-light);}
.paper-card-actions a.ghost{border:1px solid var(--primary); color:var(--primary);}
.paper-card-actions a.ghost:hover{background:var(--bg-soft);}

/* ---------------- Budget Planner ---------------- */
.budget-income-field input{font-size:20px; font-weight:700; color:var(--primary); background:var(--bg-soft);}
.expense-table-head{
  display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:8px;
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted);
  margin-bottom:6px;
}
.expense-row{display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:8px; align-items:center; margin-bottom:8px;}
.expense-row input[type="number"]{text-align:right;}

.budget-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}

.balance-box{
  border-radius:14px; padding:22px; color:#fff;
  background:linear-gradient(135deg, var(--primary), var(--primary-light));
}
.balance-box.over-budget{background:linear-gradient(135deg, #8b1e1e, #c53030);}
.balance-label{font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.72);}
.balance-value{font-family:'Poppins',sans-serif; font-weight:800; font-size:40px; line-height:1; margin-top:4px;}
.balance-msg{font-size:14px; color:rgba(255,255,255,0.92); margin-top:12px; margin-bottom:0;}
.balance-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px;}
.balance-stat{background:rgba(255,255,255,0.12); border-radius:10px; padding:10px; text-align:center;}
.balance-stat span{display:block; font-size:11px; text-transform:uppercase; color:rgba(255,255,255,0.72);}
.balance-stat strong{display:block; font-family:'Poppins',sans-serif; font-size:15px; margin-top:3px;}

.category-row{margin-bottom:14px;}
.category-row-top{display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:5px;}
.category-row-top .cat-name{font-weight:600; color:var(--text);}
.category-row-top .cat-amount{color:var(--muted);}
.category-bar-track{height:8px; border-radius:999px; background:var(--border); overflow:hidden;}
.category-bar-fill{height:100%; border-radius:999px;}
.budget-tip{background:var(--bg-soft); border-radius:10px; padding:14px 16px; font-size:13.5px; color:var(--muted); margin-top:16px;}

/* Print styles for the budget planner */
@media print{
  header, footer, .no-print{display:none !important;}
  body{background:#fff !important;}
  .tool-panel{box-shadow:none !important; border:1px solid var(--border) !important;}
}