/* TSP Portal — Dark Theme v2.0.0 (aligned to Leaderboard design system: ciac-lb.css) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

.tspre-portal{font-family:'Inter','Segoe UI',sans-serif;background:#070913;color:#f8fafc;min-height:100vh;padding:0;margin:-20px}
.tspre-portal h1,.tspre-portal h2,.tspre-portal h3,.tp-brand-name,.tp-card-title,.tp-hero-name,.tp-kpi-value,.tp-school-name,.tp-paycard-value,.tp-meta-card-value{font-family:'Outfit',sans-serif}
.tp-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:rgba(15,19,42,.65);backdrop-filter:blur(12px);border-bottom:1px solid rgba(14,104,176,.2)}
.tp-brand-name{font-size:18px;font-weight:700;color:#fff}
.tp-brand-sub{font-size:12px;color:#94a3b8;margin-top:2px}
.tp-header-right{display:flex;align-items:center;gap:10px}
.tp-status-badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px}
.tp-status-in{color:#10b981;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.3)}
.tp-status-out{color:#ef4444;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3)}
.tp-btn{border:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.tp-btn-primary{background:linear-gradient(135deg,#0e68b0,#4457ff);color:#fff;box-shadow:0 4px 10px rgba(14,104,176,.3)}.tp-btn-primary:hover{filter:brightness(1.1)}
.tp-btn-success{background:#10b981;color:#fff}.tp-btn-success:hover{background:#059669}
.tp-btn-danger{background:#ef4444;color:#fff}.tp-btn-danger:hover{background:#dc2626}
.tp-btn-ghost{background:rgba(255,255,255,.08);color:#94a3b8;border:1px solid rgba(14,104,176,.2)}.tp-btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.tp-tabs{display:flex;gap:4px;padding:16px 24px 0;border-bottom:1px solid rgba(14,104,176,.2);overflow-x:auto}
.tp-tab{background:none;border:none;color:#94a3b8;font-size:13px;font-weight:600;padding:10px 16px;cursor:pointer;border-radius:8px 8px 0 0;transition:all .2s;white-space:nowrap}
.tp-tab:hover{color:#f8fafc;background:rgba(255,255,255,.06)}
.tp-tab.active{color:#fff;background:rgba(255,255,255,.1);border-bottom:2px solid #00f0ff}
.tp-tab-content{display:none;padding:24px}
.tp-tab-content.active{display:block}
.tp-card{background:rgba(15,19,42,.65);backdrop-filter:blur(12px);border:1px solid rgba(14,104,176,.2);border-radius:16px;margin-bottom:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.tp-card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(14,104,176,.15)}
.tp-card-title{font-size:15px;font-weight:700;color:#f8fafc}
.tp-card-sub{font-size:12px;color:#94a3b8;margin-top:2px}
.tp-loading{color:#94a3b8;font-size:13px;padding:40px;text-align:center}
.tp-empty{color:#94a3b8;font-size:13px;padding:32px;text-align:center}
/* Dashboard */
.tp-dashboard{display:flex;flex-direction:column;gap:16px}
.tp-hero-card{background:linear-gradient(135deg,rgba(14,104,176,.25),rgba(68,87,255,.12));border:1px solid rgba(14,104,176,.35);border-radius:16px;padding:24px;display:flex;gap:20px;align-items:flex-start}
.tp-hero-avatar{width:56px;height:56px;background:linear-gradient(135deg,#0e68b0,#4457ff);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;flex-shrink:0}
.tp-hero-name{font-size:22px;font-weight:700;color:#fff}
.tp-hero-sub{font-size:13px;color:#94a3b8;margin-top:4px}
.tp-chip{background:rgba(255,255,255,.08);border:1px solid rgba(14,104,176,.2);border-radius:20px;padding:4px 12px;font-size:12px;color:#94a3b8}
.tp-kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.tp-kpi-card{background:rgba(15,19,42,.65);backdrop-filter:blur(12px);border:1px solid rgba(14,104,176,.2);border-top:3px solid;border-radius:16px;padding:16px;text-align:center}
.tp-kpi-icon{font-size:20px;margin-bottom:6px}
.tp-kpi-value{font-size:22px;font-weight:700;margin-bottom:4px}
.tp-kpi-label{font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px}
/* Schools */
.tp-search-bar{margin-bottom:16px}
.tp-schools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.tp-school-card{background:rgba(15,19,42,.65);backdrop-filter:blur(12px);border:1px solid rgba(14,104,176,.2);border-radius:16px;padding:16px}
.tp-school-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.tp-school-name{font-size:14px;font-weight:700;color:#f8fafc}
.tp-school-udise{font-size:11px;color:#94a3b8;margin-top:2px}
.tp-status-chip{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap}
.tp-school-meta{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#94a3b8;margin-bottom:12px}
/* Table */
.tp-table{width:100%;border-collapse:collapse;font-size:13px}
.tp-table thead{background:rgba(15,19,42,.85)}
.tp-table th{padding:12px 14px;text-align:left;font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px}
.tp-table td{padding:12px 14px;border-bottom:1px solid rgba(14,104,176,.12);color:#e2e8f0}
.tp-table tbody tr:hover{background:rgba(14,104,176,.08)}
/* Payroll */
.tp-payroll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.tp-payroll-card{background:rgba(15,19,42,.65);backdrop-filter:blur(12px);border:1px solid rgba(14,104,176,.2);border-radius:16px;padding:16px;text-align:center}
.tp-paycard-total{border-color:rgba(16,185,129,.4);background:rgba(16,185,129,.08)}
.tp-paycard-label{font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.tp-paycard-value{font-size:20px;font-weight:700;color:#f8fafc}
/* Form elements */
.tp-form-group{margin-bottom:14px}
.tspre-portal label{display:block !important;font-size:12px !important;font-weight:600 !important;color:#94a3b8 !important;margin-bottom:6px !important}
.tspre-portal .tp-input,
.tspre-portal input,
.tspre-portal input[type="text"],
.tspre-portal input[type="email"],
.tspre-portal input[type="password"],
.tspre-portal input[type="number"],
.tspre-portal input[type="tel"] {
width: 100% !important;
background: #070913 !important;
border: 1px solid rgba(14,104,176,.2) !important;
border-radius: 8px !important;
padding: 10px 12px !important;
color: #f8fafc !important;
font-size: 13px !important;
box-sizing: border-box !important;
}
.tspre-portal .tp-input:focus,
.tspre-portal input:focus,
.tspre-portal input[type="text"]:focus,
.tspre-portal input[type="email"]:focus,
.tspre-portal input[type="password"]:focus,
.tspre-portal input[type="number"]:focus,
.tspre-portal input[type="tel"]:focus {
outline: none !important;
border-color: #00f0ff !important;
}
.tspre-portal .tp-select,
.tspre-portal select {
width: 100% !important;
background: #0f132a !important;
border: 1px solid rgba(14,104,176,.2) !important;
border-radius: 8px !important;
padding: 10px 12px !important;
color: #f8fafc !important;
font-size: 13px !important;
}
.tp-check-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#e2e8f0;background:rgba(255,255,255,.05);border:1px solid rgba(14,104,176,.15);border-radius:8px;padding:12px;cursor:pointer}
/* CRM Modal */
.tp-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);z-index:99999;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;box-sizing:border-box}
.tp-modal-box{background:#0f132a;color:#f8fafc;border:1px solid rgba(14,104,176,.25);border-radius:16px;padding:28px;max-width:560px;width:100%;margin-bottom:40px}
.tp-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.tp-btn-close{background:rgba(255,255,255,.08);border:none;color:#94a3b8;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:14px}
.tp-btn-close:hover{background:rgba(255,255,255,.14)}
/* CRM Log */
.tp-crm-log-entry{background:rgba(255,255,255,.03);border:1px solid rgba(14,104,176,.15);border-radius:8px;padding:12px;margin-bottom:8px}

/* Championship Duty Booking Layout */
.tp-booking-layout {
display: grid;
grid-template-columns: 1.2fr 2fr !important;
gap: 24px;
align-items: flex-start;
}
@media (max-width: 900px) {
.tp-booking-layout {
grid-template-columns: 1fr !important;
}
}

/* Split-Pane Outreach Hub Layout */
.tp-split-pane-layout {
display: grid;
grid-template-columns: 320px 1fr !important;
gap: 20px;
align-items: stretch;
margin-top: 16px;
min-height: 600px;
}
.tp-schools-sidebar {
background: rgba(15,19,42,.5);
border: 1px solid rgba(14,104,176,.18);
border-radius: 16px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.tp-schools-list {
overflow-y: auto;
max-height: 520px;
display: flex;
flex-direction: column;
}
.tp-school-item {
padding: 14px 16px;
border-bottom: 1px solid rgba(14,104,176,.12);
cursor: pointer;
transition: all 0.2s ease;
}
.tp-school-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.tp-school-item.active {
background: rgba(0, 240, 255, 0.1);
border-left: 4px solid #00f0ff;
}
.tp-school-item-title {
font-weight: 700;
font-size: 13px;
color: #f8fafc;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tp-school-item-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
color: #94a3b8;
margin-top: 6px;
}
.tp-detail-pane {
background: rgba(15,19,42,.5);
border: 1px solid rgba(14,104,176,.18);
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
}
.tp-detail-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #94a3b8;
padding: 100px 20px;
}
.tp-pane-tabs {
display: flex;
gap: 6px;
border-bottom: 1px solid rgba(14,104,176,.2);
margin-bottom: 20px;
}
.tp-pane-tab {
padding: 10px 18px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: #94a3b8;
transition: all 0.2s;
border-radius: 6px 6px 0 0;
}
.tp-pane-tab:hover {
color: #fff;
background: rgba(255, 255, 255, 0.04);
}
.tp-pane-tab.active {
color: #fff;
background: rgba(255, 255, 255, 0.06);
border-bottom: 2px solid #00f0ff;
}
.tp-pane-tab-content {
display: none;
}
.tp-pane-tab-content.active {
display: block;
}
.tp-meta-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.tp-meta-card {
background: rgba(15,19,42,.4);
border: 1px solid rgba(14,104,176,.15);
border-radius: 8px;
padding: 12px 16px;
}
.tp-meta-card-label {
font-size: 10px;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.tp-meta-card-value {
font-size: 13px;
font-weight: 700;
color: #f8fafc;
}
.tp-crm-history {
background: rgba(0, 0, 0, 0.15);
border: 1px solid rgba(14,104,176,.12);
border-radius: 6px;
padding: 10px;
}
.tp-crm-item {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(14,104,176,.12);
border-radius: 6px;
padding: 10px;
margin-bottom: 8px;
}
.tp-crm-item:last-child {
margin-bottom: 0;
}
.tp-crm-item-header {
display: flex;
justify-content: space-between;
font-size: 11px;
color: #94a3b8;
margin-bottom: 6px;
}
@media (max-width: 900px) {
.tp-split-pane-layout {
grid-template-columns: 1fr !important;
}
.tp-schools-sidebar {
max-height: 350px;
}
.tp-schools-list {
max-height: 250px;
}
}

/* Extra small screens: tighten padding/typography so cards don't overflow */
@media (max-width: 480px) {
.tspre-portal { margin: -12px; }
.tp-header { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
.tp-tab-content { padding: 16px 12px; }
.tp-hero-card { flex-direction: column; align-items: flex-start; padding: 18px; }
.tp-kpi-grid, .tp-payroll-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.tp-modal-box { padding: 18px; }
}