/*
 * The pages this application draws inside the school's design.
 *
 * The admission form and its status, Academic Record, certificate
 * verification and alumni events belong to the application rather than to any
 * school's design: they are the same on every school's site and they change
 * when the application changes. They are written once, in the back office's
 * markup — which this site does not load — so without this they would arrive
 * as a bare form in the middle of a styled page.
 *
 * A bridge, not a second stylesheet: only the classes those pages actually
 * use, in the design's own colours.
 */

.app-page {
  --app-page-accent: var(--theme-color, #c42b8d);
  /* What the design puts on a button, which is its second colour. */
  --app-page-button: var(--theme-color2, #00a3e0);
  --app-page-ink: #2e1140;
  --app-page-line: #e7e3e6;
  --app-page-muted: #6d6a70;
  color: var(--app-page-ink);
}

/* The back office's own headings. A section heading the school's design
   draws above one of these pages is left alone — it is the design's
   heading, at the design's size, and shrinking it to 26px was what made it
   read unlike every other section heading on the site. */
.app-page h1:not(.site-title),
.app-page h2:not(.site-title),
.app-page h3:not(.site-title),
.app-page h4:not(.site-title) {
  color: var(--app-page-ink);
  margin-bottom: 15px;
}

.app-page h1:not(.site-title) { font-size: 34px; }
.app-page h2:not(.site-title) { font-size: 26px; }
.app-page h3:not(.site-title) { font-size: 21px; }

.app-page .text-muted-foreground,
.app-page .text-secondary-foreground { color: var(--app-page-muted); }

/* Cards --------------------------------------------------------------- */

.app-page .kt-card {
  background-color: #ffffff;
  border: 1px solid var(--app-page-line);
  border-radius: 10px;
  box-shadow: 0 6px 30px rgba(46, 17, 64, .06);
  margin-bottom: 30px;
}

.app-page .kt-card-header {
  /* A title on the left and its toolbar on the right, which is how the back
     office and the portal read. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--app-page-line);
  padding: 20px 25px;
}

.app-page .kt-card-title { font-size: 20px; margin-bottom: 0; }
.app-page .kt-card-content { padding: 25px; }
.app-page .kt-card-footer { border-top: 1px solid var(--app-page-line); padding: 20px 25px; }

/* Fields -------------------------------------------------------------- */

.app-page .kt-form-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--app-page-ink);
  margin: 0 0 8px;
}

.app-page .kt-input,
.app-page .kt-textarea,
.app-page .kt-select {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background-color: #f7f5f7;
  border: 1px solid var(--app-page-line);
  border-radius: 6px;
  color: var(--app-page-ink);
  font-size: 15px;
  transition: .3s;
}

.app-page .kt-textarea {
  height: auto;
  min-height: 130px;
  padding: 15px 16px;
  line-height: 1.6;
}

.app-page .kt-input:focus,
.app-page .kt-textarea:focus,
.app-page .kt-select:focus {
  border-color: var(--app-page-accent);
  outline: 0;
}

.app-page .kt-checkbox,
.app-page .kt-radio {
  width: 18px;
  height: 18px;
  accent-color: var(--app-page-accent);
}

/* Files ---------------------------------------------------------------- */

/*
 * A file field draws a button of its own, and nothing above reaches it: the
 * Guardian Photo and the Supporting Document arrived as the operating
 * system's grey "Choose File" — hard black border, system font, square
 * corners — sitting inside one of the school's rounded boxes. The fixed 52px
 * height made it worse, because the button had no room to breathe in it.
 *
 * So the box grows to hold its button, and the button is the design's own:
 * its colour, its uppercase lettering and the lopsided pill it uses
 * everywhere else. The two selectors say the same thing and must stay in
 * rules of their own — a browser that knows only one name throws away a rule
 * naming both.
 */

.app-page input[type="file"] {
  height: auto;
  min-height: 52px;
  padding: 9px 12px;
  line-height: 32px;
  color: var(--app-page-muted);
  font-size: 14px;
  cursor: pointer;
}

.app-page input[type="file"]::file-selector-button {
  margin-inline-end: 14px;
  padding: 7px 18px;
  border: 0;
  border-radius: 50px 50px 50px 0;
  background-color: var(--app-page-button, #00a3e0);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: .3s;
}

.app-page input[type="file"]::-webkit-file-upload-button {
  margin-inline-end: 14px;
  padding: 7px 18px;
  border: 0;
  border-radius: 50px 50px 50px 0;
  background-color: var(--app-page-button, #00a3e0);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: .3s;
}

.app-page input[type="file"]:hover::file-selector-button {
  background-color: var(--app-page-accent);
}

.app-page input[type="file"]:hover::-webkit-file-upload-button {
  background-color: var(--app-page-accent);
}

/* Buttons ------------------------------------------------------------- */

.app-page .kt-btn {
  display: inline-block;
  padding: 13px 32px;
  background-color: var(--app-page-accent);
  border: 0;
  border-radius: 6px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: .3s;
}

.app-page .kt-btn:hover { background-color: #9e1f71; color: #ffffff; }

.app-page .kt-btn-outline,
.app-page .kt-btn-light {
  background-color: transparent;
  border: 1px solid var(--app-page-accent);
  color: var(--app-page-accent);
}

.app-page .kt-btn-outline:hover,
.app-page .kt-btn-light:hover { background-color: var(--app-page-accent); color: #ffffff; }

/* Notices ------------------------------------------------------------- */

.app-page .kt-alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid var(--app-page-line);
  border-left: 4px solid var(--app-page-accent);
  border-radius: 6px;
  background-color: #faf8fa;
  margin-bottom: 25px;
}

.app-page .kt-alert-title { font-weight: 600; }
.app-page .kt-alert-success { border-left-color: #1e8e5a; }
.app-page .kt-alert-warning { border-left-color: #c4562b; }
.app-page .kt-alert-destructive { border-left-color: #d63333; }

/* Tables -------------------------------------------------------------- */

.app-page table { width: 100%; margin-bottom: 25px; }

.app-page table th,
.app-page table td {
  padding: 12px 15px;
  border-bottom: 1px solid var(--app-page-line);
  text-align: start;
}

.app-page table th { font-weight: 600; }

.app-page .kt-link { color: var(--app-page-accent); }
.app-page [class*="kt-scrollable"] { overflow-x: auto; }

/* The layout ---------------------------------------------------------- */

/*
 * These pages are laid out with the back office's grid and spacing, which
 * this site does not load, so without this they stack in one column however
 * the form was arranged. Only the classes those pages actually use, so this
 * stays a bridge and does not become a second framework.
 */

.app-page .grid { display: grid; }
.app-page .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.app-page .col-span-12 { grid-column: span 12 / span 12; }
.app-page .col-span-6 { grid-column: span 6 / span 6; }

.app-page .flex { display: flex; }
.app-page .flex-col { flex-direction: column; }
.app-page .flex-wrap { flex-wrap: wrap; }
.app-page .items-center { align-items: center; }
.app-page .items-end { align-items: flex-end; }
.app-page .justify-between { justify-content: space-between; }
.app-page .justify-center { justify-content: center; }
.app-page .justify-end { justify-content: flex-end; }

.app-page .gap-2 { gap: .5rem; }
.app-page .gap-3 { gap: .75rem; }
.app-page .gap-4 { gap: 1rem; }
.app-page .gap-5 { gap: 1.25rem; }
.app-page .gap-6 { gap: 1.5rem; }

@media (min-width: 768px) {
  .app-page .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-page .md\:col-span-2 { grid-column: span 2 / span 2; }
  .app-page .md\:col-span-3 { grid-column: span 3 / span 3; }
  .app-page .md\:col-span-4 { grid-column: span 4 / span 4; }
  .app-page .md\:col-span-5 { grid-column: span 5 / span 5; }
  .app-page .md\:col-span-6 { grid-column: span 6 / span 6; }
}

@media (min-width: 992px) {
  .app-page .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-page .lg\:text-3xl { font-size: 30px; }
}

@media (min-width: 576px) {
  .app-page .sm\:flex-row { flex-direction: row; }
}

/* Spacing ------------------------------------------------------------- */

.app-page .mb-0 { margin-bottom: 0; }
.app-page .mb-1 { margin-bottom: .25rem; }
.app-page .mb-2 { margin-bottom: .5rem; }
.app-page .mb-3 { margin-bottom: .75rem; }
.app-page .mb-4 { margin-bottom: 1rem; }
.app-page .mb-5 { margin-bottom: 1.25rem; }
.app-page .mb-6 { margin-bottom: 1.5rem; }
.app-page .mb-8 { margin-bottom: 2rem; }
.app-page .mt-1 { margin-top: .25rem; }
.app-page .mt-2 { margin-top: .5rem; }
.app-page .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.app-page .mx-auto { margin-inline: auto; }
.app-page .p-4 { padding: 1rem; }
.app-page .p-5 { padding: 1.25rem; }
.app-page .pt-1 { padding-top: .25rem; }
.app-page .pt-2 { padding-top: .5rem; }
.app-page .pt-6 { padding-top: 1.5rem; }
.app-page .py-10 { padding-block: 2.5rem; }
.app-page .py-16 { padding-block: 4rem; }

/* Type and colour ----------------------------------------------------- */

.app-page .text-xs { font-size: 12px; }
.app-page .text-sm { font-size: 14px; }
.app-page .text-base { font-size: 16px; }
.app-page .text-lg { font-size: 18px; }
.app-page .text-2xl { font-size: 24px; }
.app-page .text-5xl { font-size: 46px; }
.app-page .text-center { text-align: center; }
.app-page .text-end { text-align: end; }
.app-page .uppercase { text-transform: uppercase; }
.app-page .font-medium { font-weight: 500; }
.app-page .font-semibold { font-weight: 600; }
.app-page .align-middle { vertical-align: middle; }

.app-page .text-mono,
.app-page .text-foreground { color: var(--app-page-ink); }
.app-page .text-muted-foreground,
.app-page .text-secondary-foreground { color: var(--app-page-muted); }
.app-page .text-primary { color: var(--app-page-accent); }
.app-page .text-destructive { color: #d63333; }

/* Boxes --------------------------------------------------------------- */

.app-page .bg-muted { background-color: #f7f5f7; }
.app-page .bg-primary\/10 { background-color: rgba(196, 43, 141, .1); }
.app-page .border { border: 1px solid var(--app-page-line); }
.app-page .border-t { border-top: 1px solid var(--app-page-line); }
.app-page .border-border { border-color: var(--app-page-line); }
.app-page .border-dashed { border-style: dashed; }
.app-page .border-primary { border-color: var(--app-page-accent); }
.app-page .border-destructive { border-color: #d63333; }
.app-page .rounded-md { border-radius: 6px; }
.app-page .w-full { width: 100%; }
.app-page .max-w-xl { max-width: 36rem; }
.app-page .hidden { display: none; }
.app-page .overflow-hidden { overflow: hidden; }
.app-page .object-cover { object-fit: cover; }
.app-page .aspect-video { aspect-ratio: 16 / 9; }

/* The star on a required field, which the back office draws with ::after. */
.app-page .after\:content-\[\'\*\'\]::after { content: '*'; }
.app-page .after\:ms-0\.5::after { margin-inline-start: .125rem; }
.app-page .after\:text-destructive::after { color: #d63333; }

/* Badges, which the result reads with as the portal does. */
.app-page .kt-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  background-color: rgba(196, 43, 141, .1);
  color: var(--app-page-accent);
}

.app-page .kt-badge-outline { background-color: transparent; border: 1px solid currentColor; }
.app-page .kt-badge-success { background-color: rgba(30, 142, 90, .12); color: #1e8e5a; }
.app-page .kt-badge-destructive { background-color: rgba(214, 51, 51, .12); color: #d63333; }
.app-page .kt-badge-info { background-color: rgba(13, 160, 214, .12); color: #0da0d6; }
.app-page .kt-badge-secondary { background-color: #f1eef1; color: var(--app-page-muted); }
.app-page .ms-2 { margin-inline-start: .5rem; }