:root{--brand:#012169;--accent:#F2C649;--muted:#6b7280;--bg:#f6f8fb}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial; background:var(--bg); color:#111;margin:0}
.container{max-width:980px;margin:28px auto;padding:20px;background:white;border-radius:8px;box-shadow:0 6px 20px rgba(2,6,23,0.08)}
.site-header{display:flex;align-items:center;gap:16px;justify-content:space-between}
.logo{display:flex;flex-direction:column}
.logo .title{font-weight:700;color:var(--brand);font-size:20px}
.logo .tag{font-size:12px;color:var(--muted)}
.top-nav a{margin-left:12px;color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:6px}
.top-nav a:hover{color:var(--brand);background:rgba(1,33,105,0.04)}
.top-nav a:focus{outline:3px solid rgba(1,33,105,0.12);outline-offset:2px}

/* Tutor status (signed-in) links in header */
.tutor-status{margin-top:6px;color:var(--muted);font-size:14px;display:flex;gap:10px;align-items:center}
.tutor-status strong{color:var(--brand);font-weight:600}
.tutor-status a.tutor-link{color:var(--muted);text-decoration:none;padding:4px 6px;border-radius:6px}
.tutor-status a.tutor-link:hover{color:var(--brand);background:rgba(1,33,105,0.04)}
.tutor-status a.tutor-link:focus{outline:3px solid rgba(1,33,105,0.12);outline-offset:2px}

/* Make small action links in tables visually consistent */
.status-table a.action-link{color:var(--brand);text-decoration:none;padding:2px 6px;border-radius:4px}
.status-table a.action-link:hover{background:rgba(1,33,105,0.04);color:var(--brand)}

/* Search input styling */
.search-row{margin:12px 0}
.search-input{width:100%;max-width:420px;padding:8px 10px;border:1px solid #e6e9ef;border-radius:8px;font-size:15px}
.search-input:focus{outline:3px solid rgba(1,33,105,0.08);border-color:var(--brand)}

/* No results indicator */
.no-results{margin-top:10px;padding:10px;border-radius:6px;background:#fff7f0;border:1px solid #f0d7c2;color:#7a5134;max-width:520px}
.hero{padding:18px 0;border-bottom:1px solid #eee;margin-bottom:18px}
.subjects{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.card{padding:12px;border:1px solid #eee;border-radius:6px;background:linear-gradient(180deg,#fff, #fbfdff)}
.muted{color:var(--muted)}
.btn{background:var(--brand);color:white;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block}
.btn.secondary{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.btn:focus{outline:3px solid rgba(1,33,105,0.12);outline-offset:2px}

a{color:var(--brand);text-decoration:underline dotted;color:var(--brand)}
a:hover{color:#001845;text-decoration:underline}
a:visited{color:#2b4a86}
a:focus{outline:3px solid rgba(1,33,105,0.12);outline-offset:2px}

/* Stronger rule for anchor buttons so global `a` rules don't override them */
a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:active {
	color: white !important;
	text-decoration: none !important;
}
/* Secondary buttons (white bg) should keep brand colour */
a.btn.secondary, a.btn.secondary:link, a.btn.secondary:visited {
	color: var(--brand) !important;
}

/* Session table links */
.status-table a{color:#4b39d6;text-decoration:underline;}
.status-table a:hover{background:rgba(75,57,214,0.06);text-decoration:underline;color:#3626a8}
.status-table a:focus{background:rgba(75,57,214,0.08);outline:2px solid rgba(75,57,214,0.12);outline-offset:2px}
/* Stealth links should look like plain text */
.status-table a.stealth-link{color:inherit;text-decoration:none}
.status-table a.stealth-link:hover,.status-table a.stealth-link:focus{color:inherit;background:transparent;text-decoration:none;outline:none}

/* Login prompt link styling */
.login-link{color:var(--muted);text-decoration:underline dotted}
.login-link:hover{color:var(--brand);text-decoration:underline}
.action-link{color:#4b39d6}
.action-link:hover{color:#3626a8}
form label{display:block;margin:8px 0}
.footer{margin-top:22px;border-top:1px solid #eee;padding-top:12px;font-size:14px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--brand)}

/* Ensure buttons (anchors with .btn) don't get global link decorations */
.btn, .btn:link, .btn:visited, .btn:hover, .btn:active { text-decoration: none !important }
.flashes{list-style:none;padding:0}
.flash-error{color:#b91c1c}
.flash-success{color:#047857}
.status-table{width:100%;border-collapse:collapse}
.status-table th,.status-table td{padding:8px;border-bottom:1px solid #f0f0f0}
/* Make columns stable and aligned */
.status-table{table-layout:fixed}
.status-table th{font-weight:600;font-size:14px;text-align:left}
.status-table td{vertical-align:middle}
/* Badge style for cancelled sessions */
.badge{display:inline-block;padding:2px 6px;border-radius:10px;font-size:12px;line-height:1}
.badge-cancelled{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
/* Column widths: Subject, Date, Running */
.status-table th:nth-child(1){width:56%}
.status-table th:nth-child(2){width:24%}
.status-table th:nth-child(3){width:20%}
/* Center date/status columns */
.status-table td:nth-child(2), .status-table td:nth-child(3){text-align:center}

/* Responsive: make session table readable on small screens by stacking rows */
@media (max-width: 720px) {
	.status-table thead { display: none }
	.status-table { table-layout: auto }
	.status-table tr { display: block; border: 1px solid #eee; margin-bottom: 10px; padding: 10px; border-radius: 8px; background: #fff }
	.status-table td { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: none }
	.status-table td:before { content: attr(data-label); font-weight:600; color:var(--muted); margin-right:8px }
	.status-table td:nth-child(1) { font-weight:600 }
}