/* BASE COLOURS AND FULL BACKGROUND WATERMARK */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background: #f5f8fa url('/background.jpg') no-repeat center center fixed;
    background-size: cover;
    color: #1a2543;
    min-height: 100vh;
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}
/* OPTIONAL: Overlay for extra watermark-fade effect */
/*
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(255,255,255,0.85); 
    z-index: 0;
    pointer-events: none;
}
main, header, footer, section, .login-container {
    position: relative;
    z-index: 1;
}
*/

/* HEADER AND NAVIGATION */
header.hero, header, .admin-header {
    background: linear-gradient(90deg, #1a2543 0%, #1565c0 80%);
    color: #fff;
    padding: 2rem 0 1rem 0;
    text-align: center;
    box-shadow: 0 2px 6px rgba(21,101,192,0.10);
    position: relative;
}

.logo {
  display: block;
  margin: 0 auto 1rem auto; /* center and add spacing below */
  max-width: 110px;          /* shrunk to 1/4 original size */
  height: auto;
}

.header-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 0.5rem;
    color: #fff;
}
.subtitle, header .subtitle, header.hero .subtitle {
    font-size: 1.05em;
    color: #e3f2fd;
    margin-top: 0.3em;
    margin-bottom: 0.6em;
    font-weight: 400;
    letter-spacing: 1px;
}
nav {
    margin-top: 1rem;
}
.nav-list, nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    background: none;
    border-radius: 0;
    overflow: visible;
}
.nav-list li, nav ul li {
    display: inline-block;
    margin: 0;
}
.nav-list a, nav ul li a {
    display: block;
    padding: 0.45em 1.25em;
    color: #fff;
    background: #1a2543;
    border-radius: 24px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: background 0.2s, color 0.2s;
}
.nav-list a:hover, .nav-list a:focus,
nav ul li a:hover, nav ul li a:focus {
    background: #1565c0;
    color: #ffe082;
    outline: none;
}
.nav-list a.logout-btn,
nav ul li a.logout-btn,
.nav-list a[style*="background:#d11e1e"] {
    background: #e66 !important;
    color: #fff !important;
}
.nav-list a.logout-btn:hover,
nav ul li a.logout-btn:hover,
.nav-list a[style*="background:#d11e1e"]:hover {
    background: #d11e1e !important;
    color: #fff !important;
}

/* Admin/Secretary navigation row */
.admin-nav {
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.admin-nav a {
    background: #2c3e50;
    font-size: 0.95em;
    padding: 0.4em 1em;
}
.admin-nav a:hover,
.admin-nav a:focus {
    background: #34495e;
    color: #ffd700;
}

/* Admin nav dropdown groups */
.admin-nav .dropdown {
    position: relative;
}
.admin-nav .dropdown-toggle {
    display: block;
    padding: 0.4em 1em;
    color: #fff;
    background: #2c3e50;
    border: none;
    border-radius: 24px;
    font-weight: 500;
    font-size: 0.95em;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    font-family: inherit;
}
.admin-nav .dropdown-toggle:hover,
.admin-nav .dropdown-toggle:focus,
.admin-nav .dropdown:hover .dropdown-toggle,
.admin-nav .dropdown:focus-within .dropdown-toggle {
    background: #34495e;
    color: #ffd700;
    outline: none;
}
.admin-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: #2c3e50;
    border-radius: 8px;
    list-style: none;
    padding: 0.3rem 0;
    margin: 0;
    min-width: 190px;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.admin-nav .dropdown-menu li {
    display: block;
    margin: 0;
}
.admin-nav .dropdown-menu a {
    display: block;
    padding: 0.5em 1.2em;
    border-radius: 0;
    white-space: nowrap;
    background: transparent;
    font-size: 0.9em;
}
.admin-nav .dropdown-menu a:hover,
.admin-nav .dropdown-menu a:focus {
    background: #34495e;
    color: #ffd700;
}
.admin-nav .dropdown-menu li:first-child a { border-radius: 8px 8px 0 0; }
.admin-nav .dropdown-menu li:last-child a  { border-radius: 0 0 8px 8px; }
.admin-nav .dropdown:hover .dropdown-menu,
.admin-nav .dropdown:focus-within .dropdown-menu {
    display: block;
}
.change-password-btn {
    background: #1565c0 !important;
}
.change-password-btn:hover {
    background: #1976d2 !important;
    color: #ffe082 !important;
}

/* MAIN CONTAINER CARD */
main, .opaque-main {
    background: rgba(255,255,255,0.97);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(21,101,192,0.13);
    max-width: 1210px;
    min-width: 0;
    width: calc(100% - 2rem);
    margin: 2.2em auto 2em auto;
    padding: 2.3em 2.1em 2.5em 2.1em;
    box-sizing: border-box;
}
.login-container, .booking-container, .reset-form, #access {
    max-width: 420px;
    margin: 2em auto;
    background: rgba(255,255,255,0.97);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(21,101,192,0.13);
    padding: 2.5rem 2rem 2rem 2rem;
    box-sizing: border-box;
    width: calc(100% - 2rem);
}

/* BUTTONS */
.button, .user-action-btn, .admin-link-btn, .book-slot-btn, .admin-action-btn,
.login-container button,
.booking-container button,
#committee-login button {
    display: inline-block;
    background: #1a2543;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 0.7em 1.8em;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    margin: 0.2em 0.2em 0.2em 0;
    min-width: 90px;
    box-shadow: 0 2px 10px rgba(21,101,192,0.09);
    width: 100%;
}
/* Book buttons in calendar tables - smaller size */
.book-slot-btn, .book-btn {
    padding: 0.4em 0.6em;
    font-size: 0.85em;
    min-width: 40px;
    width: auto;
}
.button:hover, .user-action-btn:hover,
.admin-link-btn:hover, .book-slot-btn:hover, .admin-action-btn:hover,
.login-container button:hover,
.booking-container button:hover,
#committee-login button:hover {
    background: #1565c0;
    color: #ffe082 !important;
}
.logout-btn, .admin-action-btn.cancel, .action-btn-small.cancel {
    background: #e66 !important;
    color: #fff !important;
}
.logout-btn:hover, .admin-action-btn.cancel:hover, .action-btn-small.cancel:hover {
    background: #d11e1e !important;
    color: #fff !important;
}
/* Admin action buttons in tables */
.admin-action-btn {
    padding: 0.4em 0.8em;
    font-size: 0.9em;
    min-width: 55px;
    width: auto;
    display: inline-block;
    margin: 0.1em;
}
.admin-actions {
    display: flex;
    gap: 0.3em;
    justify-content: center;
    flex-wrap: wrap;
}

/* TABLES */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.5em;
}
.calendar-table, .admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2em;
    background: #fff;
}
.admin-table {
    min-width: 800px;
}
.calendar-table th, .calendar-table td,
.admin-table th, .admin-table td {
    border: 1px solid #ddd;
    padding: 0.4em 0.25em;
    text-align: center;
    font-size: 0.85em;
    background: #fff;
    color: #222;
}
.calendar-table th, .admin-table th {
    background: #ececec;
    color: #222;
}
.calendar-table tr:nth-child(even),
.admin-table tr:nth-child(even) {
    background: #f8f8f8;
}
.status-booked {
    background: #d0e0f8 !important;
    font-size: 0.8em;
}
.status-booked div {
    font-size: 0.9em;
    line-height: 1.3;
    margin: 0.1em 0;
}
.status-booked strong {
    font-size: 0.95em;
}
.admin-table .status-booked div {
    font-size: 0.85em;
    line-height: 1.2;
}
.status-deleted {
    background: #f8f8f8 !important;
}
.slot-closed {
    background: #888 !important;
    color: #fff !important;
    text-align: center;
    font-weight: bold;
}
.slot-closed small { color: #ffd; font-weight: normal; }
.slot-open {
    background: #f6fff6;
}
.slot-past {
    background: #eee;
}
.slot-booked {
    background: #d0e0f8;
}
.slot-edited {
    border: 2px solid #ffa500;
}
.booking-future {
    background: #d8f5d8;
}

/* SECTIONS, HEADINGS, ETC */
section {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}
section:last-child {
    border-bottom: none;
}
h1, h2, h3 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 0.5em;
}
h1 {
    font-size: 2.25rem;
    text-shadow: 1px 2px 6px rgba(0,0,0,0.3);
    margin-top: 0;
    color: #fff;
}
h2 {
    font-size: 1.5rem;
    color: #1565c0;
    border-left: 6px solid #1565c0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    background: linear-gradient(90deg, #e3f2fd 60%, transparent);
    max-width: 100%;
    overflow-wrap: break-word;
    box-sizing: border-box;
}
h3 {
    font-size: 1.2rem;
    color: #333;
}
ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-left: 1.2em;
}
li {
    margin-bottom: 0.7em;
    font-size: 1rem;
}
a {
    color: #1976d2;
    text-decoration: underline;
    transition: color 0.2s;
}
a:hover, a:focus {
    color: #0e4e7a;
    text-decoration: none;
}

/* FORMS */
.form-group {
    margin-bottom: 1.5em;
}
label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5em;
    color: #1a2543;
}
input[type="text"], input[type="password"], input[type="date"], input[type="email"], input[type="tel"], select {
    width: 100%;
    padding: 0.8em 1em;
    border-radius: 6px;
    border: 1px solid #bbb;
    margin-bottom: 1em;
    font-size: 1rem;
    box-sizing: border-box;
    background: #f8fcff;
    transition: border 0.2s;
}
input[type="password"]:focus, input[type="text"]:focus,
input[type="date"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus {
    border: 1.5px solid #1565c0;
    outline: none;
}

/* MESSAGES */
.msg, .msg-box, .success-msg {
    background: #e7fbe9;
    color: #158d22;
    border-left: 6px solid #158d22;
    border-radius: 7px;
    margin-bottom: 1em;
    padding: 1em;
    font-size: 1rem;
    font-weight: 500;
}
.error, .error-msg, .msg-box[style*="color:red"] {
    background: #ffeaea;
    color: #b71c1c;
    border-left: 6px solid #b71c1c;
    border-radius: 7px;
    margin-bottom: 1em;
    padding: 1em;
    font-size: 1rem;
    font-weight: 500;
}

/* DATE HEADER */
.date-header {
    margin: 2em 0 0.6em 0;
    font-weight: bold;
    font-size: 1.05em;
    color: #1a2543;
}

/* PARTNERSHIP */
.partnership-content {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    justify-content: center;
    background: #e3f2fd;
    border-radius: 8px;
    padding: 1rem;
    margin: 2rem 0;
    box-shadow: 0 2px 8px rgba(21,101,192,0.08);
    max-width: 100%;
    box-sizing: border-box;
}
.partnership-content img {
    border-radius: 6px;
    border: 1.5px solid #1565c0;
    background: #fff;
}
.partnership-content span {
    color: #1565c0;
    font-weight: 500;
    font-size: 1rem;
}

/* FOOTER */
footer {
    text-align: center;
    padding: 1.5rem 1rem;
    background: #222;
    color: #ccc;
    margin-top: 3rem;
    border-radius: 0 0 10px 10px;
    font-size: 1rem;
}
footer a {
    color: #90caf9;
    text-decoration: underline;
}
footer a:hover, footer a:focus {
    color: #ffe082;
}

/* TOOLTIP */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 160px;
    background-color: #222;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 0.5em 0.8em;
    position: absolute;
    z-index: 9999;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8em;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.tooltip.show .tooltiptext {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Notes, address, what-next */
.note {
    color: #9e9e9e;
    font-size: 0.97em;
}
.what-next a {
    display: inline-block;
    background: #1565c0;
    color: #fff !important;
    padding: 0.5rem 1.2rem;
    border-radius: 5px;
    margin-top: 0.5em;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(21,101,192,0.12);
    transition: background 0.2s, color 0.2s;
}
.what-next a:hover, .what-next a:focus {
    background: #1976d2;
    color: #ffe082 !important;
}
address {
    font-style: normal;
    color: #444;
    background: #f9f9f9;
    padding: 1em;
    border-radius: 5px;
    margin-top: 1em;
    box-shadow: 0 1px 4px rgba(21,101,192,0.07);
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
}

/* RESPONSIVE */
@media (max-width: 1000px) {
    main, .opaque-main { 
        max-width: calc(100% - 2rem);
        width: calc(100% - 2rem);
    }
    .partnership-content { 
        max-width: 100%;
    }
}
@media (max-width: 700px) {
    main, .opaque-main { 
        padding: 1rem;
        max-width: calc(100% - 1rem);
        width: calc(100% - 1rem);
    }
    .login-container, .booking-container, .reset-form, #access { 
        max-width: calc(100% - 1rem);
        width: calc(100% - 1rem);
        padding: 1.2em;
    }
    .nav-list, nav ul { flex-direction: column; }
    .nav-list a, nav ul li a { padding: 0.8rem 1rem; }
    .partnership-content { 
        flex-direction: column;
        gap: 0.4rem;
        max-width: 100%;
    }
    .header-title { font-size: 1.2rem; }
}