/************************************************************
 * Loughborough University – HotCRP theme override
 * Place in: hotcrp/etc/style.css
 ************************************************************/

/* Base layout & typography */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f6f6fb;
    color: #222;
}

/* Top bar / navigation (depending on HotCRP version/markup) */
#header,
#ht-top,
#top,
#menu,
.menubar {
    background-color: #4C2A85 !important;    /* LU purple */
    color: #ffffff !important;
}

/* Links in the main nav */
#header a,
#ht-top a,
#top a,
.menubar a {
    color: #ffffff !important;
    text-decoration: none;
}

#header a:hover,
#ht-top a:hover,
#top a:hover,
.menubar a:hover {
    text-decoration: underline;
}

/* Page titles */
h1, h2, h3 {
    color: #4C2A85;
    font-weight: 600;
}

/* Subtle cards / panels (for forms, paper views, etc.) */
.paperinfo,
.papcard,
.foldc,
.revcard,
.settings-g,
.main,
body > div.content,
body > div#body {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 12px 16px;
    margin-bottom: 16px;
}

/* Tables (submissions lists, review overviews) */
table,
table.pltable,
table.pltable_full {
    border-collapse: collapse;
    width: 100%;
    background-color: #ffffff;
}

table th,
table.pltable th {
    background-color: #f0edf8;
    color: #4C2A85;
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
}

table td,
table.pltable td {
    padding: 7px 10px;
    border-bottom: 1px solid #eee;
}

table tr:nth-child(even) td {
    background-color: #faf9fe;
}

/* Links */
a {
    color: #4C2A85;
}

a:hover,
a:focus {
    color: #381f63;
    text-decoration: underline;
}

/* Buttons – generic */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
.btn-primary {
    background-color: #4C2A85 !important;
    border-color: #4C2A85 !important;
    color: #ffffff !important;
    border-radius: 4px;
    padding: 6px 14px;
    font-weight: 500;
    cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn-primary:hover {
    background-color: #381f63 !important;
    border-color: #381f63 !important;
}

/* Secondary / neutral buttons */
.btn-secondary,
.btn-default,
input[type="button"].btn-secondary {
    background-color: #ffffff !important;
    color: #4C2A85 !important;
    border: 1px solid #4C2A85 !important;
}

.btn-secondary:hover,
.btn-default:hover {
    background-color: #f0edf8 !important;
}

/* Form controls */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 14px;
    max-width: 100%;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #4C2A85;
    box-shadow: 0 0 0 2px rgba(76, 42, 133, 0.15);
}

/* Review form fields – make headings stand out slightly */
.rf,
.rfname,
.settings-g h3 {
    color: #4C2A85;
    font-weight: 600;
}

/* Tags and labels */
.taghl,
.tagbg,
.badge {
    background-color: #4C2A85;
    color: #ffffff;
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 11px;
}

/* Messages / notices */
.msg,
.merror,
.mwarning,
.minform,
.mstatus {
    border-radius: 4px;
    padding: 8px 12px;
    margin: 8px 0;
}

.mstatus {
    background-color: #e4f2ff;
    border: 1px solid #b7d4ff;
}

.mwarning {
    background-color: #fff9e6;
    border: 1px solid #ffe3a3;
}

.merror {
    background-color: #fdecea;
    border: 1px solid #f5c2c0;
}

/* Footer (if you don’t use footer.php) */
.footer, #footer, body > div.footer {
    font-size: 12px;
    color: #777;
    text-align: center;
    padding: 10px 0 20px;
}

/**********************
 * LU banner (header)
 **********************/
#lu-banner {
    background-color: #4C2A85;
    color: #ffffff;
    border-bottom: 2px solid #381f63;
}

#lu-banner .lu-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lu-banner-logo {
    height: 42px;
    width: auto;
    display: block;
}

.lu-banner-text {
    display: flex;
    flex-direction: column;
}

.lu-banner-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.lu-banner-subtitle {
    font-size: 13px;
    opacity: 0.9;
}

/* Optional: reduce extra top padding on the main content so it “tucks” nicely under the banner */
body > div#body,
body > div.content {
    margin-top: 8px;
}

/**********************
 * LU footer
 **********************/
#lu-footer {
    margin-top: 24px;
    border-top: 1px solid #ddd;
    background-color: #f6f6fb;
}

#lu-footer .lu-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px 16px;
    font-size: 12px;
    color: #555;
    text-align: center;
}

#lu-footer .lu-footer-note {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #777;
}

/* footer */
#p-footer {
    background-color: #f6f6fb;
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 100%;
	background: var(--brand-bg-dark);
	color: var(--brand-fg);
	padding: 0.2em 0.5em;
	border-top-left-radius: 4px;
	border-top: 1px solid var(--brand-fg);
	border-left: 1px solid var(--brand-fg);
	z-index: 0;
	print-color-adjust: exact;
}