/**
 * Timetable front end: weekly grid on desktop, stacked days on mobile.
 * Class colour is an identity accent (left border); the name always
 * carries the identity too.
 */

.gct { --gct-grid: #e1e0d9; --gct-plane: #f9f9f7; --gct-ink2: #52514e; --gct-accent: #2a78d6; }

.gct-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 12px;
}

@media (max-width: 900px) { .gct-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gct-grid { grid-template-columns: 1fr; } }

.gct-day-name {
	font-size: .8em; text-transform: uppercase; letter-spacing: .06em;
	border-bottom: 2px solid currentColor; padding-bottom: 4px; margin: 0 0 8px;
}

.gct-none { font-size: .8em; color: var(--gct-ink2); opacity: .7; }

.gct { color: var(--gct-ink, inherit); }
.gct-style-inherit { color: inherit; }

.gct-chip {
	display: block; width: 100%; text-align: left; cursor: pointer;
	background: var(--gct-chipbg, #fff); color: var(--gct-ink, inherit);
	border: 1px solid var(--gct-grid); border-left: 4px solid var(--gct-accent);
	border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: .85em;
}
.gct-chip:hover { border-color: var(--gct-hover, #b9b7ae); border-left-width: 4px; box-shadow: 0 1px 6px rgba(0,0,0,.08); }

.gct-chip-time { font-weight: 700; display: block; }
.gct-chip-name { font-weight: 700; display: block; }
.gct-chip-inst { display: block; color: var(--gct-ink2); font-size: .9em; }
.gct-chip-left { display: block; font-size: .85em; color: #006300; margin-top: 2px; }
.gct-style-dark .gct-chip-left { color: #7bd3a5; }
.gct-style-dark .gct-chip-left.is-low { color: #f2a48c; }
.gct-style-dark .gct-chip:hover { border-color: var(--gct-hover, #4a5563); }
.gct-chip-left.is-low { color: #a44317; font-weight: 700; }

/* --------------------------------------------------------------- modal */

.gct-modal {
	position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.45);
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gct-modal[hidden] { display: none; }

.gct-modal-box {
	background: #fff; border-radius: 14px; padding: 24px 26px;
	width: min(440px, 100%); max-height: 90vh; overflow-y: auto; position: relative;
}

.gct-modal-close {
	position: absolute; top: 10px; right: 14px; background: none; border: 0;
	font-size: 22px; cursor: pointer; color: var(--gct-ink2);
}

.gct-modal-box h3 { margin: 0 0 4px; }
.gct-m-meta { color: var(--gct-ink2); font-size: .88em; margin: 0 0 6px; }
.gct-m-desc { font-size: .92em; }

.gct-modal label { display: block; margin: 8px 0; font-size: .88em; }
.gct-modal label span { display: block; font-weight: 600; margin-bottom: 2px; }
.gct-modal input { width: 100%; padding: 9px 11px; border: 1px solid var(--gct-grid); border-radius: 8px; }
.gct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

.gct-book-btn {
	width: 100%; background: var(--gct-accent); color: #fff; border: 0;
	border-radius: 8px; padding: 12px; font-weight: 700; cursor: pointer; margin-top: 8px;
}
.gct-book-btn:disabled { opacity: .55; cursor: not-allowed; }

.gct-msg { padding: 10px 12px; border-radius: 8px; font-size: .9em; margin-top: 10px; }
.gct-msg.is-ok { background: #e8f6e8; color: #006300; }
.gct-msg.is-error { background: #fbeaea; color: #b32d2e; }

/* Dark preset: the modal follows the card colours. */
.gct-style-dark .gct-modal-box { background: var(--gct-chipbg, #1e242c); color: var(--gct-ink, #f0f3f7); }
.gct-style-dark .gct-modal-box input { background: var(--gct-plane, #14181e); color: var(--gct-ink, #f0f3f7); border-color: var(--gct-grid, #2c333d); }