/* ─────────────────────────────────────────────────────
 * CreTech HotCRP — custom theme
 *
 * Color palette extracted from cretech.rmutk.ac.th:
 *   Green accent:  #55ac55  (nav borders, hover states, active highlights)
 *   Blue action:   #207daf  (buttons, links)
 *   Dark chrome:   #27272A  (nav bar, footer)
 *   Body:          #ffffff
 *   Surface:       #f4f4f5  (utility bar, card backgrounds)
 *   Text:          #333333
 *   Muted:         #71717A
 *   Font:          Open Sans 18px (site), Sarabun (Thai)
 *
 * Injected via $Opt["stylesheets"] = ["stylesheets/cretech.css"];
 * ───────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600;700&family=Open+Sans:wght@400;600;700&display=swap');

/* ── Override HotCRP's pink brand variables ─────────── */
:root {
    /* Core palette — replaces HotCRP defaults */
    --brand-fg:           #207daf;
    --brand-bg:           #f4f7fa;
    --brand-bg-dark:      #27272A;
    --brand-decor-light:  #dce9f0;
    --headline-fg:        #27272A;
    --headline-decor:     #55ac55;

    /* Submission colors — keep subtle and consistent */
    --submission-bg-dark: #f8f9fa;
    --submission-bg:      #ffffff;
    --submission-sidebar-bg: #f8f9fa;

    /* CreTech tokens */
    --cretech-green:   #55ac55;
    --cretech-blue:    #207daf;
    --cretech-dark:    #27272A;
    --cretech-darker:  #1a1a1c;
    --cretech-white:   #ffffff;
    --cretech-surface: #f4f4f5;
    --cretech-border:  #e4e4e7;
    --cretech-text:    #333333;
    --cretech-muted:   #71717A;
    --cretech-radius:  8px;
    --cretech-shadow:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --cretech-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
}

/* ── Typography ─────────────────────────────────────── */
html, body {
    font-family: "Sarabun", "Open Sans", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cretech-text);
    background: var(--cretech-white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--headline-fg);
    font-weight: 700;
}

/* ── Page backgrounds ───────────────────────────────── */
/* Kill the hardcoded pink backgrounds */
#p-page {
    background: var(--cretech-white) !important;
}

#p-page.body-signin,
#p-page.body-error {
    background: var(--cretech-surface) !important;
}

#p-page.leftmenu {
    background: var(--cretech-white) !important;
}

#p-page.paper {
    background: var(--cretech-white) !important;
}

/* ── Header — dark top bar like official site ────────── */
/* Apply dark header to ALL page types including paper/submission */
#p-header,
body.paper #p-header,
body.leftmenu #p-header {
    background: var(--cretech-dark) !important;
    padding: 0;
    border-bottom: 3px solid var(--cretech-green) !important;
}

#p-header hr.c {
    border-color: transparent;
    margin: 0;
}

/* Site name badge */
#h-site {
    background: var(--cretech-green) !important;
    border: none !important;
    border-radius: 0 0 var(--cretech-radius) 0 !important;
    padding: 8px 20px 8px 24px !important;
}

#h-site h1 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

#h-site a,
#h-site a:hover {
    color: var(--cretech-white) !important;
    text-decoration: none;
}

/* Right side of header (user menu, email, hamburger ☰) */
#h-right {
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#h-right,
#h-right a,
#h-right span,
#h-right button,
.profile-dropmenu-menubutton,
.dropmenu-details > summary {
    color: rgba(255,255,255,0.9) !important;
    font-size: 0.9rem;
}

#h-right a:hover,
#h-right button:hover,
.profile-dropmenu-menubutton:hover {
    color: var(--cretech-white) !important;
}

/* Hamburger menu button — cleaner styling */
#h-right summary,
#h-right .dropmenu-details > summary,
.profile-dropmenu-menubutton {
    padding: 6px 10px !important;
    border-radius: 6px;
    transition: background 0.12s;
    cursor: pointer;
}

#h-right summary:hover,
#h-right .dropmenu-details > summary:hover,
.profile-dropmenu-menubutton:hover {
    background: rgba(255,255,255,0.12) !important;
}

/* Navigation tabs below header — scope to header nav only,
 * NOT the home-sidebar <nav> which has dark text on light bg. */
#p-header nav,
nav.p-nav,
.p-nav {
    background: var(--cretech-dark);
}

#p-header nav a,
nav.p-nav a,
.p-nav a {
    color: rgba(255,255,255,0.85);
}

#p-header nav a:hover,
nav.p-nav a:hover,
.p-nav a:hover {
    color: var(--cretech-white);
}

/* Sidebar links need normal link colors, not white */
.home-sidebar a {
    color: var(--cretech-blue) !important;
}

.home-sidebar a:hover {
    color: var(--cretech-green) !important;
}

/* Subheading bar (below header) */
#p-header + #p-subheader,
.p-subheader,
#h-subheader {
    background: var(--cretech-surface);
    border-bottom: 1px solid var(--cretech-border);
}

/* Banner offset spacing */
.need-banner-offset {
    /* Ensure no rogue pink tints */
}

/* ── Main body container — centered ──────────────────── */
#p-body {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem 24px 3rem;
}

#p-body.body-home {
    margin-top: 1.5rem !important;
    padding-left: 3%;
    padding-right: 3%;
}

/* ── Sign-in / account forms — centered cards ─────── */
.signingrp {
    max-width: 440px !important;
    margin: 2rem auto !important;
    padding: 2rem 2.5rem !important;
    background: var(--cretech-white) !important;
    border: 1px solid var(--cretech-border) !important;
    border-radius: var(--cretech-radius) !important;
    box-shadow: var(--cretech-shadow-md) !important;
}

.signingrp h1,
.signingrp #h-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cretech-dark) !important;
    margin-bottom: 1.25rem;
}

/* Sign-in page center the entire body */
.body-signin #p-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 4rem;
    min-height: 60vh;
}

/* Home page — sign-in box alignment */
.body-home .signingrp {
    margin: 1rem 0 !important;
    max-width: 400px !important;
}

/* ── Home page — sidebar layout fix ─────────────────── */
.home-sidebar {
    float: right;
    width: 17rem;
    padding: 1rem;
    background: var(--cretech-surface);
    border-radius: var(--cretech-radius);
    border: 1px solid var(--cretech-border);
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.home-sidebar h2,
.home-sidebar .homegrp h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cretech-blue);
    margin-top: 0;
}

.avoid-home-sidebar {
    max-width: calc(100% - 21rem);
}

/* ── Headings — section titles ───────────────────────── */
/* Override hardcoded h2.home color: #c72047 → blue */
h2.home, h4.home {
    color: var(--cretech-blue) !important;
    font-size: 1.1rem;
    font-weight: 700;
    border-bottom: 2px solid var(--cretech-green);
    padding-bottom: 0.4rem;
    margin-bottom: 0.75rem;
}

.homegrp h2 {
    color: var(--cretech-blue);
    font-size: 1.1rem;
    font-weight: 700;
    border-bottom: 2px solid var(--cretech-green);
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
}

/* ── Forms — input fields ────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="tel"],
textarea,
select {
    border: 1px solid var(--cretech-border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--cretech-text);
    background: var(--cretech-white);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: var(--cretech-blue);
    box-shadow: 0 0 0 3px rgba(32, 125, 175, 0.12);
}

/* ── Buttons ─────────────────────────────────────────── */
button, .btn, input[type="submit"], input[type="button"] {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--cretech-border);
    background: var(--cretech-white);
    color: var(--cretech-text);
}

button:hover, .btn:hover {
    background: var(--cretech-surface);
    border-color: #d1d1d6;
}

/* Primary / default buttons → blue */
.btn-primary,
.btn-default,
button.btn-primary,
button.btn-default,
input[type="submit"].btn-primary {
    background: var(--cretech-blue) !important;
    border-color: var(--cretech-blue) !important;
    color: var(--cretech-white) !important;
    background-image: none !important;
}

.btn-primary:hover,
.btn-default:hover,
button.btn-primary:hover,
button.btn-default:hover {
    background: #1a6a96 !important;
    border-color: #1a6a96 !important;
}

/* Success buttons → green */
.btn-success,
button.btn-success,
input[type="submit"].btn-success {
    background: var(--cretech-green) !important;
    border-color: #4a9b4a !important;
    color: var(--cretech-white) !important;
    background-image: none !important;
}

.btn-success:hover,
button.btn-success:hover {
    background: #4a9b4a !important;
    border-color: #3f8a3f !important;
}

/* Danger/highlight buttons — keep red but modernize */
.btn-danger,
.btn-highlight {
    background-image: none !important;
    border-radius: 6px;
}

/* Full-width sign-in button */
.signingrp .btn-success {
    width: 100%;
    padding: 10px 18px;
    font-size: 1rem;
    border-radius: 6px;
    margin-top: 0.5rem;
}

/* ── Links ───────────────────────────────────────────── */
a {
    color: var(--cretech-blue);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover {
    color: var(--cretech-green);
    text-decoration: underline;
}

a:visited {
    color: var(--cretech-blue);
}

/* ── Footer — full-width dark bar at page bottom ─────── */
/* HotCRP default: position:absolute; bottom:0; right:0
 * which puts a small badge in the corner. Override to a
 * full-width footer bar matching the official site. */
#p-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    float: none !important;
    width: 100% !important;
    background: var(--cretech-dark) !important;
    color: rgba(255,255,255,0.75) !important;
    border: none !important;
    border-radius: 0 !important;
    border-top: 3px solid var(--cretech-green) !important;
    padding: 0 !important;
    font-size: 0.85rem !important;
    text-align: center;
    z-index: 100;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Make room for the fixed footer so content isn't hidden behind it */
#p-page {
    padding-bottom: 3.5rem !important;
}

#p-footer > a {
    display: none !important;
}

#p-footer a:hover {
    color: #7fcc7f !important;
}

/* CreTech custom footer content */
.rmutk-footer {
    text-align: center;
    padding: 1.25rem 1rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    background: transparent;
    border-top: none;
    margin-top: 0;
}

.rmutk-footer a {
    color: var(--cretech-green) !important;
}

/* ── Settings left-menu pages ────────────────────────── */
.leftmenu-list {
    background: var(--cretech-surface);
    border-right: 1px solid var(--cretech-border);
}

.leftmenu-list a {
    color: var(--cretech-text);
    padding: 6px 16px;
    display: block;
    border-left: 3px solid transparent;
    transition: all 0.12s;
}

.leftmenu-list a:hover {
    background: var(--cretech-white);
    text-decoration: none;
}

.leftmenu-list a.active,
.leftmenu-list a[aria-current] {
    color: var(--cretech-blue);
    border-left-color: var(--cretech-green);
    font-weight: 600;
    background: var(--cretech-white);
}

/* ── Paper submission cards ──────────────────────────── */
.pcard {
    background: var(--cretech-white);
}

.pcard-left {
    background: var(--submission-sidebar-bg);
    border-right: 1px solid var(--cretech-border);
}

/* ── Warning / error messages ────────────────────────── */
.msg.msg-error,
.msg.msg-warning {
    border-radius: var(--cretech-radius);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
}

.msg.msg-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.msg.msg-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

/* ── Tables — cleaner styling ────────────────────────── */
table.pltable th {
    background: var(--cretech-surface);
    font-weight: 600;
    color: var(--cretech-text);
    border-bottom: 2px solid var(--cretech-border);
}

table.pltable td {
    border-bottom: 1px solid var(--cretech-border);
}

/* ── Form sections (fieldsets, groups) ────────────────── */
fieldset {
    border: 1px solid var(--cretech-border);
    border-radius: var(--cretech-radius);
    padding: 1rem;
    background: var(--cretech-white);
}

fieldset legend {
    font-weight: 600;
    color: var(--cretech-blue);
    padding: 0 0.5rem;
    font-size: 0.95rem;
}

/* ── Submission form ─────────────────────────────────── */
.papcard,
.pcontainer {
    background: var(--cretech-white);
    border: 1px solid var(--cretech-border);
    border-radius: var(--cretech-radius);
    box-shadow: var(--cretech-shadow);
}

/* Section headers in submission/review */
.papcard h2,
.pcontainer h2,
.pgsection h2 {
    color: var(--cretech-dark);
    font-size: 1.1rem;
    border-bottom: 2px solid var(--cretech-green);
    padding-bottom: 0.4rem;
}

/* ── Review form styling ─────────────────────────────── */
.revcard {
    border: 1px solid var(--cretech-border);
    border-radius: var(--cretech-radius);
    background: var(--cretech-white);
    box-shadow: var(--cretech-shadow);
}

/* ── Profile page ────────────────────────────────────── */
.profile-g label,
.f-i label {
    font-weight: 600;
    color: var(--cretech-text);
    font-size: 0.9rem;
}

/* ── Dropdown menus & profile menu ──────────────────── */
.dropdown-menu,
.dropmenu,
.dropmenu-details > div,
.dropmenu-container,
.profile-dropmenu .dropmenu-container {
    background: var(--cretech-white) !important;
    border: 1px solid var(--cretech-border) !important;
    border-radius: var(--cretech-radius) !important;
    box-shadow: var(--cretech-shadow-md) !important;
    padding: 6px 0 !important;
    min-width: 200px;
    overflow: hidden;
}

/* All links and menu items inside dropdowns: dark text on white.
 * Override global a/a:hover/a:visited colors + #h-right white text. */
#p-header .dropmenu-container a,
#p-header .dropmenu-container a:link,
#p-header .dropmenu-container a:visited,
#p-header .dropmenu-container button,
#p-header .dropmenu-container [role="menuitem"],
#h-right .dropmenu a,
#h-right .dropmenu a:link,
#h-right .dropmenu a:visited,
#h-right .dropmenu button,
#h-right .dropmenu [role="menuitem"],
#h-right .dropmenu-container a,
#h-right .dropmenu-container a:link,
#h-right .dropmenu-container a:visited,
#h-right .dropmenu-container button,
#h-right .dropmenu-container [role="menuitem"],
.dropmenu a.qx[role="menuitem"],
.dropmenu a.qx[role="menuitem"]:link,
.dropmenu a.qx[role="menuitem"]:visited,
.dropmenu button.qx[role="menuitem"] {
    color: var(--cretech-text) !important;
    padding: 10px 20px !important;
    display: block;
    background: transparent !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    line-height: 1.4;
    border: none !important;
    border-radius: 0 !important;
    transition: background 0.12s;
}

#p-header .dropmenu-container a:hover,
#p-header .dropmenu-container a:focus,
#p-header .dropmenu-container a:active,
#p-header .dropmenu-container button:hover,
#p-header .dropmenu-container [role="menuitem"]:hover,
#p-header .dropmenu-container [role="menuitem"]:focus,
#h-right .dropmenu a:hover,
#h-right .dropmenu a:focus,
#h-right .dropmenu a:active,
#h-right .dropmenu button:hover,
#h-right .dropmenu-container a:hover,
#h-right .dropmenu-container a:focus,
#h-right .dropmenu-container a:active,
#h-right .dropmenu-container button:hover,
.dropmenu a.qx[role="menuitem"]:hover,
.dropmenu a.qx[role="menuitem"]:focus,
.dropmenu a.qx[role="menuitem"]:active,
.dropmenu button.qx[role="menuitem"]:hover {
    background: var(--cretech-surface) !important;
    color: var(--cretech-text) !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Override HotCRP's JS-applied .focus class (style.css line 2003) */
.dropmenu > li.focus,
.dropmenu > li.focus > a,
.dropmenu > li.focus > button,
.dropmenu > li.focus [role="menuitem"] {
    background-color: var(--cretech-surface) !important;
    color: var(--cretech-text) !important;
}

.dropmenu > li.focus.focus-disabled {
    background-color: var(--cretech-surface) !important;
    color: var(--cretech-muted) !important;
}

/* Dividers inside dropdown menus */
.dropmenu hr,
.dropmenu-container hr {
    border: none;
    border-top: 1px solid var(--cretech-border);
    margin: 6px 0;
}

/* Page-level navigation bar (#h-page) — dark bar below header */
#h-page,
.header-page-submission,
.header-page-general,
.header-page-home {
    background: var(--cretech-dark) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#h-page,
#h-page a,
#h-page span,
#h-page div,
#h-page li,
#h-page .pslr,
#h-page [class*="header-page"],
.header-page-submission,
.header-page-submission a,
.header-page-general a,
.header-page-home a,
#h-page #h-title {
    color: rgba(255,255,255,0.9) !important;
}

#h-page a:hover,
.header-page-submission a:hover {
    color: var(--cretech-white) !important;
}

/* Paper mode tabs — override HotCRP's white-on-white papmode styles */
#h-page.header-page-submission {
    background: var(--cretech-dark) !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.papmode {
    color: rgba(255,255,255,0.8) !important;
}

.papmode a {
    color: rgba(255,255,255,0.8) !important;
}

.papmode a:hover {
    color: var(--cretech-white) !important;
}

.papmode.active {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.3) !important;
}

.papmode.active > a {
    color: var(--cretech-white) !important;
    font-weight: bold;
}

/* Submission modes bar */
.submission-modes {
    background: var(--cretech-dark) !important;
}

.submission-modes a,
.papmodes a {
    color: rgba(255,255,255,0.85) !important;
}

/* Paper title in header */
h1.paptitle,
#h-title.paptitle {
    color: var(--cretech-white) !important;
}

/* pslr (prev/next submission links) */
.pslr,
.pslr a {
    color: rgba(255,255,255,0.8) !important;
}

/* Force ALL text inside #h-page to be white — catches search type
   labels, breadcrumbs, select options, everything */
#h-page *,
#h-page select,
#h-page option,
#h-page label,
#h-page .papmode,
#h-page .papmode a,
#h-page .q,
#h-page .nw {
    color: rgba(255,255,255,0.9) !important;
}

/* Select dropdowns in nav bar */
#h-page select {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: var(--cretech-white) !important;
    border-radius: 4px;
    padding: 3px 8px;
}

#h-page select option {
    background: var(--cretech-white) !important;
    color: var(--cretech-text) !important;
}

/* Action bar buttons */
#h-page .btn,
.header-page-submission .btn {
    color: var(--cretech-white) !important;
    border-color: rgba(255,255,255,0.3);
}

/* Quick links bar below page nav — light background, dark text */
#p-quicklinks {
    background: var(--cretech-white) !important;
    border-bottom: 1px solid var(--cretech-border);
    padding: 4px 24px;
}

#p-quicklinks,
#p-quicklinks a,
#p-quicklinks span,
#p-quicklinks * {
    color: var(--cretech-text) !important;
}

#p-quicklinks a:hover {
    color: var(--cretech-blue) !important;
}

#n-list {
    color: var(--cretech-blue) !important;
}

/* ── Search bar in page nav — cohesive input group ──── */
/* Search text input */
#h-page input[type="text"],
#h-page input[type="search"] {
    background: var(--cretech-white) !important;
    color: var(--cretech-text) !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
    border-radius: 6px !important;
    padding: 7px 12px !important;
    font-size: 0.9rem !important;
    font-family: inherit !important;
    min-width: 200px;
    max-width: 320px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

#h-page input[type="text"]:focus,
#h-page input[type="search"]:focus {
    border-color: var(--cretech-green) !important;
    box-shadow: 0 0 0 3px rgba(85, 172, 85, 0.2) !important;
    outline: none !important;
}

/* Select dropdowns in nav bar (the "(All)" filter) */
#h-page select {
    background: var(--cretech-white) !important;
    color: var(--cretech-text) !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
    border-radius: 6px !important;
    padding: 7px 28px 7px 12px !important;
    font-size: 0.9rem !important;
    font-family: inherit !important;
    appearance: auto;
    cursor: pointer;
}

#h-page select:focus {
    border-color: var(--cretech-green) !important;
    outline: none !important;
}

#h-page select option {
    background: var(--cretech-white) !important;
    color: var(--cretech-text) !important;
}

/* Quicklinks area inputs */
#p-quicklinks input[type="text"],
#p-quicklinks input[type="search"],
#p-quicklinks select {
    background: var(--cretech-white) !important;
    color: var(--cretech-text) !important;
    border: 1px solid var(--cretech-border) !important;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.9rem;
}

#h-page input:focus,
#p-quicklinks input:focus {
    border-color: var(--cretech-green) !important;
    outline: none;
}

/* Buttons on dark nav bar — match dark theme */
#h-page .btn,
#h-page button,
#h-page input[type="submit"] {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.95) !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
    border-radius: 6px !important;
    padding: 7px 18px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    background-image: none !important;
    cursor: pointer;
    transition: all 0.15s;
}

#h-page .btn:hover,
#h-page button:hover,
#h-page input[type="submit"]:hover {
    background: rgba(255,255,255,0.2) !important;
    color: var(--cretech-white) !important;
    border-color: rgba(255,255,255,0.4) !important;
}

/* Fix button text color inconsistencies on submission pages */
.pslr a,
.pcard a,
.papcard a {
    color: var(--cretech-blue);
}

/* ── Act-as bar ──────────────────────────────────────── */
#h-actas {
    background: #fefce8;
    border-color: #ca8a04;
    border-radius: 6px;
}

/* ── Search form layout — aligned input group ──────── */
#h-page form,
#h-page .has-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Ensure search container fills width nicely */
#h-page {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px !important;
    flex-wrap: wrap;
}

/* ── Responsive adjustments ──────────────────────────── */
@media (max-width: 768px) {
    #p-body {
        padding: 1rem 12px 2rem;
    }

    .signingrp {
        margin: 1rem auto !important;
        padding: 1.5rem !important;
    }

    .home-sidebar {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-bottom: 1.5rem;
    }

    .avoid-home-sidebar {
        max-width: 100%;
    }

    #h-site {
        padding: 6px 14px !important;
    }
}

@media (max-width: 480px) {
    .signingrp {
        padding: 1rem !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
}

/* ── Language switcher ───────────────────────────────── */
.rmutk-lang-switch {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.75rem;
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid rgba(255,255,255,0.12);
}

.rmutk-lang-switch a {
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none !important;
    padding: 4px 10px;
    border-radius: 4px;
    transition: all 0.15s;
    letter-spacing: 0.03em;
}

.rmutk-lang-switch a:hover {
    color: var(--cretech-white) !important;
    background: rgba(255,255,255,0.1);
}

.rmutk-lang-switch a.active {
    color: var(--cretech-white) !important;
    background: rgba(255,255,255,0.2);
}

.rmutk-lang-switch .sep {
    color: rgba(255,255,255,0.2);
    font-weight: 300;
    padding: 0 2px;
}

/* ── Bilingual announcement banner ───────────────────────────────── */
/* The chair edits TH and EN content at /<confid>/cretech-announcement.
 * Both languages are inlined into HotCRP's CustomBanners ftext as two
 * <span>s; this rule shows one based on the rmutk_lang cookie value
 * (set by rmutk-i18n.js as data-rmutk-lang on <html>).
 */
html[data-rmutk-lang="th"] .rmutk-en-only { display: none; }
html[data-rmutk-lang="en"] .rmutk-th-only { display: none; }