/* ==========================================================================
   Adarsh CSAB College Predictor — v5 design
   Deep-blue "counselling portal" look. Every interactive control (chips,
   buttons, selects, badges, pills) carries !important on its color /
   background / border so the host WordPress theme's own button/select
   CSS can never make our text invisible — this was the root cause of the
   blank-looking chips and the "white until hover" PDF button.
   ========================================================================== */

.csab-container{
--grad-start:#0B2A6B;
--grad-end:#1D4ED8;
--ink:#0F172A;
--ink-soft:#1E293B;
--paper:#F6F7FB;
--surface:#FFFFFF;
--brand:#1D4ED8;
--brand-bg:#EAF1FE;
--brand-border:#BFD4FB;
--safe:#15803D;
--safe-bg:#ECFDF3;
--safe-border:#BBF0D0;
--moderate:#B45309;
--moderate-bg:#FEF6E7;
--moderate-border:#F6DFAE;
--ambitious:#DC2626;
--ambitious-bg:#FDEDEE;
--ambitious-border:#F6C6CB;
--line:#E5E7EB;
--muted:#64748B;

--font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
--font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

font-family:var(--font-body) !important;
max-width:1200px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:20px;
}

.csab-container *{ box-sizing:border-box; }

.csab-container button,
.csab-container select,
.csab-container input,
.csab-container th{
font-family:var(--font-body) !important;
}

/* ---------------- Hero ---------------- */

.csab-hero{
background:linear-gradient(135deg,var(--grad-start),var(--grad-end)) !important;
color:#fff !important;
padding:34px 38px;
border-radius:24px;
box-shadow:0 16px 36px rgba(11,42,107,0.32);
}

.csab-hero-top{
margin-bottom:16px;
}

.csab-eyebrow{
display:inline-block;
font-family:var(--font-mono) !important;
font-size:11.5px;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
color:#fff !important;
background:rgba(255,255,255,0.16) !important;
border:1px solid rgba(255,255,255,0.32);
padding:7px 14px;
border-radius:999px;
text-decoration:none !important;
cursor:pointer;
transition:background .15s ease, border-color .15s ease;
}

.csab-eyebrow:hover{
background:rgba(255,255,255,0.28) !important;
border-color:rgba(255,255,255,0.5);
color:#fff !important;
}

.csab-hero h2{
font-family:var(--font-display) !important;
font-size:36px;
font-weight:700;
margin:0 0 12px 0;
line-height:1.15;
letter-spacing:-0.01em;
color:#fff !important;
}

.csab-subtitle{
font-size:15.5px;
color:#DCE6FB !important;
margin:0;
max-width:640px;
line-height:1.6;
}

/* ---------------- WhatsApp banner ---------------- */
/* Scoped to .csab-container and !important on every property — WP themes
   commonly style bare <a> tags (color, display:inline, border-bottom,
   text-decoration) with selectors like ".entry-content a" that outrank a
   lone class, which is what made this banner render as unstyled text. */

.csab-container a.csab-whatsapp-banner.csab-whatsapp-banner{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:flex-start !important;
align-self:stretch !important;
gap:16px !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
text-decoration:none !important;
border:none !important;
background:linear-gradient(120deg,#0B3D24,#0F7A42 55%,#12995A) !important;
background-color:#0F7A42 !important;
color:#fff !important;
padding:20px 26px !important;
margin:0 !important;
border-radius:18px !important;
box-shadow:0 14px 30px rgba(6,46,26,0.35) !important;
transition:transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
line-height:1.3 !important;
}

.csab-container a.csab-whatsapp-banner.csab-whatsapp-banner:hover,
.csab-container a.csab-whatsapp-banner.csab-whatsapp-banner:focus,
.csab-container a.csab-whatsapp-banner.csab-whatsapp-banner:visited,
.csab-container a.csab-whatsapp-banner.csab-whatsapp-banner:active{
color:#fff !important;
text-decoration:none !important;
}

.csab-container a.csab-whatsapp-banner.csab-whatsapp-banner:hover{
transform:translateY(-1px);
box-shadow:0 18px 36px rgba(6,46,26,0.42) !important;
filter:brightness(1.04);
}

.csab-container .csab-whatsapp-icon{
flex-shrink:0 !important;
width:44px !important;
height:44px !important;
min-width:44px !important;
border-radius:50% !important;
background:rgba(255,255,255,0.16) !important;
border:1px solid rgba(255,255,255,0.32) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
color:#fff !important;
}

.csab-container .csab-whatsapp-content{
flex:1 !important;
display:flex !important;
flex-direction:column !important;
gap:2px !important;
min-width:0 !important;
}

.csab-container .csab-whatsapp-title{
display:block !important;
font-family:var(--font-display) !important;
font-size:16.5px !important;
font-weight:700 !important;
color:#fff !important;
line-height:1.3 !important;
}

.csab-container .csab-whatsapp-sub{
display:block !important;
font-size:13.5px !important;
font-weight:400 !important;
color:rgba(255,255,255,0.85) !important;
line-height:1.4 !important;
}

.csab-container .csab-whatsapp-arrow{
flex-shrink:0 !important;
font-size:20px !important;
font-weight:600 !important;
color:#fff !important;
transition:transform .15s ease;
}

.csab-container a.csab-whatsapp-banner.csab-whatsapp-banner:hover .csab-whatsapp-arrow{
transform:translateX(3px);
}

@media (max-width:600px){
.csab-container a.csab-whatsapp-banner.csab-whatsapp-banner{ padding:16px 18px !important; gap:12px !important; }
.csab-container .csab-whatsapp-title{ font-size:14.5px !important; }
.csab-container .csab-whatsapp-sub{ font-size:12.5px !important; }
}

/* ---------------- Form card ---------------- */

.csab-form-card{
background:var(--surface) !important;
border:1px solid var(--line);
border-radius:24px;
box-shadow:0 10px 28px rgba(15,23,42,0.06);
padding:30px 34px;
}

#csab-form{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:22px 24px;
align-items:start;
}

.csab-field{
display:flex;
flex-direction:column;
gap:8px;
}

.csab-field label{
font-family:var(--font-body) !important;
font-size:14px;
font-weight:600;
color:var(--ink) !important;
}

#csab-form input,
#csab-form select{
height:50px;
padding:0 14px;
border:1.5px solid var(--line) !important;
border-radius:12px;
background:var(--surface) !important;
color:var(--ink) !important;
font-size:15px;
font-family:var(--font-body) !important;
transition:border-color .15s ease, box-shadow .15s ease;
appearance:none;
width:100%;
}

#csab-form select{
background-image:url("data:image/svg+xml;charset=UTF-8,%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='%2364748B' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3e%3c/svg%3e") !important;
background-repeat:no-repeat !important;
background-position:right 14px center !important;
padding-right:32px;
}

#csab-form input::placeholder{
color:#9AA3B2;
opacity:1;
}

#csab-form input:hover,
#csab-form select:hover{
border-color:#C7CCD6 !important;
}

#csab-form input:focus,
#csab-form select:focus{
outline:none;
border-color:var(--brand) !important;
box-shadow:0 0 0 4px rgba(29,78,216,0.14);
}

.csab-hint{
margin:0;
font-size:12.5px;
line-height:1.5;
color:var(--muted) !important;
}

.csab-field-submit{
grid-column:1/-1;
align-self:end;
margin-top:4px;
}

#csab-form button{
height:52px;
width:100%;
background:linear-gradient(135deg,var(--grad-start),var(--grad-end)) !important;
color:#fff !important;
border:none !important;
border-radius:12px;
font-family:var(--font-body) !important;
font-size:15.5px;
font-weight:700;
letter-spacing:0.01em;
cursor:pointer;
box-shadow:0 10px 22px rgba(29,78,216,0.34);
transition:filter .15s ease, transform .12s ease;
}

#csab-form button:hover{
filter:brightness(1.08);
transform:translateY(-1px);
}

#csab-form button:active{
transform:translateY(0);
}

/* ---------------- Results wrapper ---------------- */

#csab-results:empty{
padding:0;
}

/* ---------------- Scoreboard pills ---------------- */

.csab-scoreboard{
display:flex;
flex-wrap:wrap;
gap:10px;
animation:csab-rise .35s ease both;
}

.csab-pill{
display:flex;
align-items:baseline;
gap:8px;
padding:12px 20px;
border-radius:999px;
border:1.5px solid var(--line);
background:var(--surface) !important;
}

.csab-pill-num{
font-family:var(--font-body) !important;
font-size:19px;
font-weight:800;
color:var(--ink) !important;
line-height:1;
}

.csab-pill-label{
font-size:14px;
font-weight:600;
color:var(--muted) !important;
}

.csab-pill-total{
background:var(--ink) !important;
border-color:var(--ink);
}

.csab-pill-total .csab-pill-num,
.csab-pill-total .csab-pill-label{
color:#fff !important;
}

.csab-pill-safe{ border-color:var(--safe-border); background:var(--safe-bg) !important; }
.csab-pill-safe .csab-pill-num,
.csab-pill-safe .csab-pill-label{ color:var(--safe) !important; }

.csab-pill-moderate{ border-color:var(--moderate-border); background:var(--moderate-bg) !important; }
.csab-pill-moderate .csab-pill-num,
.csab-pill-moderate .csab-pill-label{ color:var(--moderate) !important; }

.csab-pill-ambitious{ border-color:var(--ambitious-border); background:var(--ambitious-bg) !important; }
.csab-pill-ambitious .csab-pill-num,
.csab-pill-ambitious .csab-pill-label{ color:var(--ambitious) !important; }

.csab-summary-line{
margin:10px 2px 0 2px;
font-size:13.5px;
color:var(--muted) !important;
}

/* ---------------- Toolbar ---------------- */

.csab-toolbar{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
margin-top:18px;
}

.csab-toolbar-second{
margin-top:12px;
justify-content:space-between;
}

.csab-search-wrap{
position:relative;
flex:1 1 260px;
}

.csab-search-icon{
position:absolute;
left:14px;
top:50%;
transform:translateY(-50%);
color:#9AA3B2;
pointer-events:none;
}

#csabSearch{
width:100%;
height:46px;
padding:0 14px 0 40px;
border:1.5px solid var(--line) !important;
border-radius:12px;
font-family:var(--font-body) !important;
font-size:14.5px;
color:var(--ink) !important;
background:var(--surface) !important;
}

#csabSearch::placeholder{
color:#9AA3B2;
opacity:1;
}

#csabSearch:focus{
outline:none;
border-color:var(--brand) !important;
box-shadow:0 0 0 4px rgba(29,78,216,0.14);
}

.csab-chip-wrap{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.csab-chip{
font-family:var(--font-body) !important;
font-size:13.5px;
font-weight:600;
padding:11px 18px;
border-radius:999px;
border:1.5px solid var(--line) !important;
background:var(--surface) !important;
color:var(--ink-soft) !important;
cursor:pointer;
transition:all .12s ease;
}

.csab-chip:hover{
border-color:#C7CCD6 !important;
}

.csab-chip-active{
background:var(--ink) !important;
border-color:var(--ink) !important;
color:#fff !important;
}

.csab-chip-safe.csab-chip-active{ background:var(--safe) !important; border-color:var(--safe) !important; color:#fff !important; }
.csab-chip-moderate.csab-chip-active{ background:var(--moderate) !important; border-color:var(--moderate) !important; color:#fff !important; }
.csab-chip-ambitious.csab-chip-active{ background:var(--ambitious) !important; border-color:var(--ambitious) !important; color:#fff !important; }

.csab-type-wrap select{
height:46px;
padding:0 32px 0 14px;
border:1.5px solid var(--line) !important;
border-radius:12px;
background:var(--surface) !important;
color:var(--ink) !important;
font-size:14px;
font-family:var(--font-body) !important;
appearance:none;
background-image:url("data:image/svg+xml;charset=UTF-8,%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='%2364748B' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3e%3c/svg%3e") !important;
background-repeat:no-repeat !important;
background-position:right 14px center !important;
min-width:150px;
}

.csab-type-wrap select:focus{
outline:none;
border-color:var(--brand) !important;
}

.export-wrap{
display:flex;
gap:10px;
}

.csab-btn-secondary,
.csab-btn-primary{
display:inline-flex;
align-items:center;
gap:8px;
height:46px;
padding:0 18px;
border-radius:12px;
font-family:var(--font-body) !important;
font-size:13.5px;
font-weight:700;
cursor:pointer;
transition:all .12s ease;
white-space:nowrap;
}

.csab-btn-secondary{
background:var(--surface) !important;
color:var(--ink-soft) !important;
border:1.5px solid var(--line) !important;
}

.csab-btn-secondary:hover{
border-color:#C7CCD6 !important;
background:var(--paper) !important;
}

.csab-btn-primary{
background:var(--brand) !important;
color:#fff !important;
border:1.5px solid var(--brand) !important;
box-shadow:0 6px 16px rgba(29,78,216,0.28);
}

.csab-btn-primary svg{
stroke:#fff !important;
}

.csab-btn-primary:hover{
filter:brightness(1.08);
}

/* ---------------- Legend ---------------- */

.csab-legend{
display:flex;
flex-wrap:wrap;
gap:20px;
margin:16px 2px 6px 2px;
}

.csab-legend-item{
display:inline-flex;
align-items:center;
gap:7px;
font-size:13px;
color:var(--muted) !important;
}

.csab-dot{
width:8px;
height:8px;
border-radius:50%;
display:inline-block;
flex:0 0 auto;
}

.csab-dot-safe{ background:var(--safe) !important; }
.csab-dot-moderate{ background:var(--moderate) !important; }
.csab-dot-ambitious{ background:var(--ambitious) !important; }

/* ---------------- Table (vertical scroll only, never horizontal) ---------------- */

.table-scroll{
max-height:660px;
overflow-y:auto;
overflow-x:hidden;
border:1px solid var(--line);
border-radius:18px;
animation:csab-rise .4s ease both;
}

.csab-table{
width:100%;
table-layout:fixed;
border-collapse:collapse;
}

.csab-table col.col-chance{ width:15%; }
.csab-table col.col-college{ width:23%; }
.csab-table col.col-branch{ width:29%; }
.csab-table col.col-type{ width:8%; }
.csab-table col.col-quota{ width:15%; }
.csab-table col.col-rank{ width:10%; }

.csab-table th,
.csab-table td{
padding:16px 16px;
border-bottom:1px solid var(--line);
font-size:13.5px;
text-align:left;
vertical-align:middle;
word-wrap:break-word;
overflow-wrap:break-word;
}

.csab-table th{
background:var(--grad-start) !important;
color:#fff !important;
position:sticky;
top:0;
z-index:2;
font-family:var(--font-body) !important;
font-weight:700;
font-size:12px;
letter-spacing:0.04em;
text-transform:uppercase;
cursor:pointer;
user-select:none;
white-space:nowrap;
}

.csab-table th::after{
content:'\25BE';
display:inline-block;
margin-left:6px;
font-size:10px;
opacity:0.6;
}

.csab-table th:hover{
background:#0F3480 !important;
}

.csab-table tbody tr{
background:var(--surface) !important;
}

.csab-table tbody tr:nth-child(even){
background:#F7F9FE !important;
}

.csab-table tbody tr:hover{
background:var(--brand-bg) !important;
}

.csab-td-college{
display:flex;
flex-direction:column;
gap:3px;
}

.csab-college-name{
font-weight:700;
color:var(--ink) !important;
line-height:1.35;
}

.csab-college-state{
font-family:var(--font-mono) !important;
font-size:11px;
font-weight:600;
letter-spacing:0.04em;
text-transform:uppercase;
color:var(--muted) !important;
}

.csab-td-branch{
color:var(--ink-soft) !important;
line-height:1.45;
}

.csab-td-rank{
font-family:var(--font-mono) !important;
font-weight:700;
color:var(--ink) !important;
font-size:14px;
}

.csab-badge{
display:inline-block;
padding:5px 10px;
border-radius:8px;
font-size:11.5px;
font-weight:700;
letter-spacing:0.02em;
white-space:nowrap;
}

.csab-badge-type{
background:var(--brand-bg) !important;
color:var(--brand) !important;
}

.csab-badge-quota{
background:#F1F2F5 !important;
color:var(--ink-soft) !important;
white-space:normal;
}

.csab-chance{
display:inline-flex;
align-items:center;
gap:7px;
padding:6px 12px;
border-radius:999px;
font-size:12.5px;
font-weight:700;
}

.csab-chance-safe{ background:var(--safe-bg) !important; color:var(--safe) !important; }
.csab-chance-moderate{ background:var(--moderate-bg) !important; color:var(--moderate) !important; }
.csab-chance-ambitious{ background:var(--ambitious-bg) !important; color:var(--ambitious) !important; }

/* ---------------- Empty state ---------------- */

.csab-empty{
text-align:center;
padding:52px 20px;
border:1px dashed var(--line);
border-radius:18px;
background:var(--paper) !important;
margin-top:22px;
}

.csab-empty h3{
margin:0 0 8px 0;
color:var(--ink) !important;
font-family:var(--font-display) !important;
font-size:21px;
font-weight:700;
}

.csab-empty p{
margin:0;
color:var(--muted) !important;
}

/* ---------------- Loading ---------------- */

.csab-loading{
display:flex;
align-items:center;
gap:12px;
padding:34px 0 10px 0;
color:var(--muted) !important;
font-family:var(--font-body) !important;
font-size:14px;
}

.csab-spinner{
width:18px;
height:18px;
border:2.5px solid var(--line);
border-top-color:var(--brand);
border-radius:50%;
animation:csab-spin 0.8s linear infinite;
}

@keyframes csab-spin{
to{ transform:rotate(360deg); }
}

@keyframes csab-rise{
from{ opacity:0; transform:translateY(6px); }
to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
.csab-spinner{ animation:none; }
.csab-scoreboard,
.table-scroll{ animation:none; }
}

/* ---------------- Responsive ---------------- */

@media(max-width:900px){

.csab-hero{
padding:28px 24px;
}

.csab-hero h2{
font-size:27px;
}

.csab-form-card{
padding:24px 22px;
}

#csab-form{
grid-template-columns:1fr;
}

.csab-toolbar-second{
flex-direction:column;
align-items:stretch;
}

.export-wrap{
justify-content:stretch;
}

.csab-btn-secondary,
.csab-btn-primary{
flex:1;
justify-content:center;
}

.csab-type-wrap select{
width:100%;
}

/* Table becomes a stacked card list on small screens — still only
   vertical scroll, no horizontal overflow */

.csab-table{
table-layout:auto;
}

.csab-table thead{
display:none;
}

.csab-table,
.csab-table tbody{
display:block;
width:100%;
}

.csab-table tbody tr{
display:flex;
flex-direction:column;
width:100%;
padding:14px 16px 6px 16px;
border-bottom:8px solid var(--paper);
border-radius:14px;
background:var(--surface) !important;
border:1px solid var(--line);
margin-bottom:10px;
}

.csab-table td{
display:block;
width:100%;
border-bottom:none;
padding:6px 0;
}

.csab-td-chance{
order:-1;
padding-bottom:10px;
}

.csab-table td[data-label]:not(.csab-td-college):not(.csab-td-chance)::before{
content:attr(data-label);
display:block;
font-family:var(--font-body) !important;
font-size:10.5px;
font-weight:700;
letter-spacing:0.05em;
text-transform:uppercase;
color:var(--muted) !important;
margin-bottom:3px;
}

}

/* ---------------- Print (fallback) ---------------- */

@media print{

body *{
visibility:hidden;
}

.table-scroll,
.table-scroll *{
visibility:visible;
}

.table-scroll{
position:absolute;
left:0;
top:0;
width:100%;
max-height:none !important;
overflow:visible !important;
}

}

/* ==========================================================================
   Admin settings page (wp-admin only, scoped to .csab-admin-wrap)
   ========================================================================== */

.csab-admin-wrap{
max-width:920px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

.csab-admin-header{
display:flex;
align-items:center;
justify-content:space-between;
margin:18px 0 22px 0;
}

.csab-admin-header h1{
margin:0;
font-size:23px;
}

.csab-admin-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-bottom:18px;
}

@media(max-width:782px){
.csab-admin-grid{ grid-template-columns:1fr; }
}

.csab-admin-card{
background:#fff;
border:1px solid #E2E4E7;
border-radius:12px;
padding:22px 24px;
}

.csab-admin-card h2{
margin:0 0 14px 0;
font-size:15px;
font-weight:600;
color:#0F172A;
}

.csab-stat-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 0;
border-bottom:1px solid #F1F2F5;
}

.csab-stat-row:last-child{
border-bottom:none;
}

.csab-stat-label{
font-size:13.5px;
color:#64748B;
}

.csab-stat-value{
font-size:15px;
font-weight:700;
color:#0F172A;
}

.csab-upload-dropzone{
border:2px dashed #CBD5E1;
border-radius:12px;
padding:26px 20px;
text-align:center;
background:#F8FAFC;
margin-bottom:16px;
}

.csab-upload-dropzone input[type="file"]{
display:block;
margin:0 auto 8px auto;
}

.csab-upload-hint{
font-size:12.5px;
color:#64748B;
margin:6px 0 0 0;
}

.csab-admin-btn{
display:inline-block;
background:#1D4ED8;
color:#fff !important;
border:none;
padding:10px 20px;
border-radius:8px;
font-size:14px;
font-weight:600;
cursor:pointer;
text-decoration:none;
}

.csab-admin-btn:hover{
background:#1740B8;
color:#fff !important;
}

.csab-admin-btn-danger{
background:#fff;
color:#DC2626 !important;
border:1.5px solid #F6C6CB;
}

.csab-admin-btn-danger:hover{
background:#FDEDEE;
}

.csab-admin-notice{
padding:12px 16px;
border-radius:8px;
font-size:13.5px;
margin-bottom:18px;
border-left:4px solid;
}

.csab-admin-notice-success{
background:#ECFDF3;
border-color:#15803D;
color:#15803D;
}

.csab-admin-notice-error{
background:#FDEDEE;
border-color:#DC2626;
color:#DC2626;
}

.csab-format-table{
width:100%;
border-collapse:collapse;
font-size:12.5px;
margin-top:6px;
}

.csab-format-table th,
.csab-format-table td{
border:1px solid #E2E4E7;
padding:6px 8px;
text-align:left;
}

.csab-format-table th{
background:#F8FAFC;
font-weight:600;
color:#0F172A;
}