/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* LOQT theme: Angular Material system colours are generated from the brand
   colour (#1f3738) with the identity blue as the tertiary accent. This
   replaces the prebuilt azure-blue theme that used to be listed in
   angular.json. */
html {
  /* The app's component styles are light-only, so pin the scheme instead of
     letting mat.theme()'s light-dark() values follow the OS preference. */
  color-scheme: light;
  /* M3 derives `primary` from tone 40, which lightens the brand colour. The
     identity uses the brand colour itself on primary surfaces, so pin it. */
}
html {
  --mat-sys-background: light-dark(#faf9f8, #121414);
  --mat-sys-error: light-dark(#b5251c, #ffb4a9);
  --mat-sys-error-container: light-dark(#ffdad5, #920506);
  --mat-sys-inverse-on-surface: light-dark(#f2f0f0, #2f3130);
  --mat-sys-inverse-primary: light-dark(#b1cbcc, #4a6364);
  --mat-sys-inverse-surface: light-dark(#2f3130, #e3e2e2);
  --mat-sys-on-background: light-dark(#1b1c1c, #e3e2e2);
  --mat-sys-on-error: light-dark(#ffffff, #690002);
  --mat-sys-on-error-container: light-dark(#920506, #ffdad5);
  --mat-sys-on-primary: light-dark(#ffffff, #1c3435);
  --mat-sys-on-primary-container: light-dark(#334b4c, #cde8e8);
  --mat-sys-on-primary-fixed: light-dark(#051f20, #051f20);
  --mat-sys-on-primary-fixed-variant: light-dark(#334b4c, #334b4c);
  --mat-sys-on-secondary: light-dark(#ffffff, #293232);
  --mat-sys-on-secondary-container: light-dark(#3f4849, #dbe4e4);
  --mat-sys-on-secondary-fixed: light-dark(#141d1d, #141d1d);
  --mat-sys-on-secondary-fixed-variant: light-dark(#3f4849, #3f4849);
  --mat-sys-on-surface: light-dark(#1b1c1c, #e3e2e2);
  --mat-sys-on-surface-variant: light-dark(#424848, #dee4e3);
  --mat-sys-on-tertiary: light-dark(#ffffff, #003549);
  --mat-sys-on-tertiary-container: light-dark(#004c68, #c3e8ff);
  --mat-sys-on-tertiary-fixed: light-dark(#001e2c, #001e2c);
  --mat-sys-on-tertiary-fixed-variant: light-dark(#004c68, #004c68);
  --mat-sys-outline: light-dark(#727878, #8b9292);
  --mat-sys-outline-variant: light-dark(#c1c8c7, #424848);
  --mat-sys-primary: light-dark(#4a6364, #b1cbcc);
  --mat-sys-primary-container: light-dark(#cde8e8, #334b4c);
  --mat-sys-primary-fixed: light-dark(#cde8e8, #cde8e8);
  --mat-sys-primary-fixed-dim: light-dark(#b1cbcc, #b1cbcc);
  --mat-sys-scrim: light-dark(#000000, #000000);
  --mat-sys-secondary: light-dark(#576060, #bfc8c8);
  --mat-sys-secondary-container: light-dark(#dbe4e4, #3f4849);
  --mat-sys-secondary-fixed: light-dark(#dbe4e4, #dbe4e4);
  --mat-sys-secondary-fixed-dim: light-dark(#bfc8c8, #bfc8c8);
  --mat-sys-shadow: light-dark(#000000, #000000);
  --mat-sys-surface: light-dark(#faf9f8, #121414);
  --mat-sys-surface-bright: light-dark(#faf9f8, #383939);
  --mat-sys-surface-container: light-dark(#efeeed, #1f2020);
  --mat-sys-surface-container-high: light-dark(#e9e8e7, #292a2a);
  --mat-sys-surface-container-highest: light-dark(#e3e2e2, #343535);
  --mat-sys-surface-container-low: light-dark(#f5f3f3, #1b1c1c);
  --mat-sys-surface-container-lowest: light-dark(#ffffff, #0d0e0e);
  --mat-sys-surface-dim: light-dark(#dbdad9, #121414);
  --mat-sys-surface-tint: light-dark(#4a6364, #b1cbcc);
  --mat-sys-surface-variant: light-dark(#dee4e3, #424848);
  --mat-sys-tertiary: light-dark(#006689, #79d1ff);
  --mat-sys-tertiary-container: light-dark(#c3e8ff, #004c68);
  --mat-sys-tertiary-fixed: light-dark(#c3e8ff, #c3e8ff);
  --mat-sys-tertiary-fixed-dim: light-dark(#79d1ff, #79d1ff);
  --mat-sys-neutral-variant20: #2b3232;
  --mat-sys-neutral10: #1b1c1c;
}
html {
  --mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
html {
  --mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}
html {
  --mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}
html {
  --mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
html {
  --mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
html {
  --mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}
html {
  --mat-sys-body-large: 400 1rem / 1.5rem Roboto;
  --mat-sys-body-large-font: Roboto;
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 400;
  --mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;
  --mat-sys-body-medium-font: Roboto;
  --mat-sys-body-medium-line-height: 1.25rem;
  --mat-sys-body-medium-size: 0.875rem;
  --mat-sys-body-medium-tracking: 0.016rem;
  --mat-sys-body-medium-weight: 400;
  --mat-sys-body-small: 400 0.75rem / 1rem Roboto;
  --mat-sys-body-small-font: Roboto;
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 400;
  --mat-sys-display-large: 400 3.562rem / 4rem Roboto;
  --mat-sys-display-large-font: Roboto;
  --mat-sys-display-large-line-height: 4rem;
  --mat-sys-display-large-size: 3.562rem;
  --mat-sys-display-large-tracking: -0.016rem;
  --mat-sys-display-large-weight: 400;
  --mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;
  --mat-sys-display-medium-font: Roboto;
  --mat-sys-display-medium-line-height: 3.25rem;
  --mat-sys-display-medium-size: 2.812rem;
  --mat-sys-display-medium-tracking: 0;
  --mat-sys-display-medium-weight: 400;
  --mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;
  --mat-sys-display-small-font: Roboto;
  --mat-sys-display-small-line-height: 2.75rem;
  --mat-sys-display-small-size: 2.25rem;
  --mat-sys-display-small-tracking: 0;
  --mat-sys-display-small-weight: 400;
  --mat-sys-headline-large: 400 2rem / 2.5rem Roboto;
  --mat-sys-headline-large-font: Roboto;
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 400;
  --mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;
  --mat-sys-headline-medium-font: Roboto;
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 400;
  --mat-sys-headline-small: 400 1.5rem / 2rem Roboto;
  --mat-sys-headline-small-font: Roboto;
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 400;
  --mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;
  --mat-sys-label-large-font: Roboto;
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 700;
  --mat-sys-label-medium: 500 0.75rem / 1rem Roboto;
  --mat-sys-label-medium-font: Roboto;
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 700;
  --mat-sys-label-small: 500 0.688rem / 1rem Roboto;
  --mat-sys-label-small-font: Roboto;
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;
  --mat-sys-title-large-font: Roboto;
  --mat-sys-title-large-line-height: 1.75rem;
  --mat-sys-title-large-size: 1.375rem;
  --mat-sys-title-large-tracking: 0;
  --mat-sys-title-large-weight: 400;
  --mat-sys-title-medium: 500 1rem / 1.5rem Roboto;
  --mat-sys-title-medium-font: Roboto;
  --mat-sys-title-medium-line-height: 1.5rem;
  --mat-sys-title-medium-size: 1rem;
  --mat-sys-title-medium-tracking: 0.009rem;
  --mat-sys-title-medium-weight: 500;
  --mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;
  --mat-sys-title-small-font: Roboto;
  --mat-sys-title-small-line-height: 1.25rem;
  --mat-sys-title-small-size: 0.875rem;
  --mat-sys-title-small-tracking: 0.006rem;
  --mat-sys-title-small-weight: 500;
}
html {
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
}
html {
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
}
html {
  --mat-sys-primary: #1f3738;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-surface-container-low: #ffffff;
  --mat-sys-surface-container-lowest: #ffffff;
  --mat-sys-surface-variant: #eef2f1;
}

/* Brand tokens, available to every component. */
:root {
  --loqt-ink: #1f3738;
  --loqt-ink-rgb: 31, 55, 56;
  --loqt-ink-soft: #4a5f60;
  --loqt-ink-soft-rgb: 74, 95, 96;
  --loqt-muted: #637173;
  --loqt-muted-rgb: 99, 113, 115;
  --loqt-blue-deeper: #122844;
  --loqt-blue-deeper-rgb: 18, 40, 68;
  --loqt-blue-deep: #193961;
  --loqt-blue-deep-rgb: 25, 57, 97;
  --loqt-blue: #3faddf;
  --loqt-blue-rgb: 63, 173, 223;
  --loqt-blue-soft: #8bd0ef;
  --loqt-blue-soft-rgb: 139, 208, 239;
  --loqt-blue-light: #d7f3ff;
  --loqt-blue-light-rgb: 215, 243, 255;
  --loqt-green-deeper: #163f20;
  --loqt-green-deeper-rgb: 22, 63, 32;
  --loqt-green-deep: #1f5a2e;
  --loqt-green-deep-rgb: 31, 90, 46;
  --loqt-green: #54c33f;
  --loqt-green-rgb: 84, 195, 63;
  --loqt-green-soft: #97e188;
  --loqt-green-soft-rgb: 151, 225, 136;
  --loqt-green-light: #daffd2;
  --loqt-green-light-rgb: 218, 255, 210;
  --loqt-yellow-deeper: #7a4c13;
  --loqt-yellow-deeper-rgb: 122, 76, 19;
  --loqt-yellow-deep: #ae6d1b;
  --loqt-yellow-deep-rgb: 174, 109, 27;
  --loqt-yellow: #f4b633;
  --loqt-yellow-rgb: 244, 182, 51;
  --loqt-yellow-soft: #fad285;
  --loqt-yellow-soft-rgb: 250, 210, 133;
  --loqt-yellow-light: #ffefd7;
  --loqt-yellow-light-rgb: 255, 239, 215;
  --loqt-clay-deeper: #5e2e1b;
  --loqt-clay-deeper-rgb: 94, 46, 27;
  --loqt-clay-deep: #90452c;
  --loqt-clay-deep-rgb: 144, 69, 44;
  --loqt-clay: #cc6140;
  --loqt-clay-rgb: 204, 97, 64;
  --loqt-clay-soft: #e6a28c;
  --loqt-clay-soft-rgb: 230, 162, 140;
  --loqt-clay-light: #ffe2d9;
  --loqt-clay-light-rgb: 255, 226, 217;
  --loqt-red-deeper: #711f20;
  --loqt-red-deeper-rgb: 113, 31, 32;
  --loqt-red-deep: #a12c2e;
  --loqt-red-deep-rgb: 161, 44, 46;
  --loqt-red: #fe5b4a;
  --loqt-red-rgb: 254, 91, 74;
  --loqt-red-soft: #fe9f96;
  --loqt-red-soft-rgb: 254, 159, 150;
  --loqt-red-light: #ffe3e1;
  --loqt-red-light-rgb: 255, 227, 225;
  --loqt-surface: #ffffff;
  --loqt-surface-rgb: 255, 255, 255;
  --loqt-surface-alt: #f6f8f7;
  --loqt-surface-alt-rgb: 246, 248, 247;
  --loqt-border: #e3e9e8;
  --loqt-border-rgb: 227, 233, 232;
  --loqt-radius: 16px;
  --loqt-app-bar-height: 72px;
  --loqt-gradient: linear-gradient(135deg, #1f3738 0%, #193961 100%);
}

/* Global styles & theming overrides */
body {
  margin: 0;
  font-family: Roboto, sans-serif;
  background: #f2f2f2;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

.spacer-1 {
  margin-bottom: 1rem;
}

.spacer-2 {
  margin-bottom: 2rem;
}

.spacer-3 {
  margin-bottom: 3rem;
}

.spacer-4 {
  margin-bottom: 4rem;
}

.spacer-5 {
  margin-bottom: 5rem;
}

.auth-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  width: 200px;
}

.section-card {
  margin-bottom: 24px;
  padding: 16px;
  margin-bottom: 32px;
  border-radius: 12px;
  border: 2px solid var(--loqt-border);
}

.timestamp-box {
  background-color: #f5f5f5;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #555;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.timestamp-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.timestamp-icon {
  font-size: 18px;
  color: #888;
}

.timestamp-label {
  font-size: 16px;
  font-weight: 500;
}

.timestamp-value {
  font-size: 16px;
  font-style: italic;
}

.hoover-row {
  cursor: pointer;
}
.hoover-row:hover {
  background-color: var(--loqt-blue-light);
}

.spacer {
  flex: 1 1 auto;
}

.filter-field {
  width: 300px;
  margin-bottom: 16px;
  display: inline-block;
}

.container {
  margin: 16px;
}

.error-container {
  margin-top: 16px;
}

.error-card {
  background-color: #ffebee;
}

.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}

/* Page header.

   Six list pages render their title through a `mat-toolbar.modern-toolbar`.
   The newer pages (School Calendar, School Profile, MIS Integration) instead
   use a card with a sticky title header, which reads better and is where the
   app is heading — so this styles the toolbar to match that shell rather than
   keeping a second page-header language.

   mat-toolbar's fixed 64px row is shorter than a title + subtitle, which is
   what used to push the icon out of the bar, so the height is released here. */
/* `mat-toolbar.` rather than a bare class: Angular Material injects its own
   `.mat-toolbar` rules after this stylesheet, so a single class only ties. */
mat-toolbar.modern-toolbar {
  height: auto;
  min-height: 0;
  margin: 24px 16px 0; /* horizontal inset matches .container / .dashboard */
  padding: 0 28px;
  width: auto;
  background: var(--loqt-surface);
  border: 1px solid var(--loqt-border);
  border-radius: var(--loqt-radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.toolbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  padding: 20px 0;
}

.toolbar-title-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* A brand-coloured tile, not the translucent white one — the header sits on a
   light surface now, where `rgba(255,255,255,.1)` was invisible. */
.title-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background: var(--loqt-ink);
  border-radius: 12px;
}

.toolbar-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: var(--loqt-surface);
}

.title-text-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.title-text-wrapper .toolbar-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  color: var(--loqt-ink);
  letter-spacing: -0.01em;
}
.title-text-wrapper .toolbar-subtitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--loqt-muted);
}

.toolbar-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  /* Every page header carries the same control: the app's primary button,
     labelled, so each page says what its action does rather than showing a bare
     "+". Was duplicated in two component stylesheets. */
  /* The page's primary action. It was a pale accent FAB that all but vanished
     against the header; the brand colour is what the identity puts on a
     primary control. */
}
.toolbar-actions .auth-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.toolbar-actions .auth-actions .mat-icon {
  margin: 0;
  font-size: 20px;
  width: 20px;
  height: 20px;
}
.toolbar-actions .add-fab {
  width: 44px;
  height: 44px;
  background: var(--loqt-ink);
  color: var(--loqt-surface);
  box-shadow: none;
}
.toolbar-actions .add-fab:hover {
  background: var(--loqt-ink-soft);
}
.toolbar-actions .add-fab .mat-icon {
  font-size: 22px;
  width: 22px;
  height: 22px;
}

/* A page header stays visible while its page scrolls.

   Both header conventions are covered: the list pages' `mat-toolbar.modern-toolbar`
   and the card pages' `.sticky-header.page-header`. The scrolling element is the
   shell's `mat-sidenav-content`, which also holds the app toolbar (sticky at
   top: 0, z-index 100) — so page headers stick one toolbar down and stay below
   it in the stack.

   Scoped to `.content` (the shell's router-outlet wrapper) so the app toolbar,
   which carries `.modern-toolbar` too, keeps its own rule. */
.content {
  /* The header is the top of its card, so it keeps the card's rounded corners
     as the rest of the card scrolls under it. */
}
.content mat-toolbar.modern-toolbar,
.content .sticky-header.page-header {
  position: sticky;
  top: var(--loqt-app-bar-height);
  z-index: 20;
}
.content .sticky-header.page-header {
  border-top-left-radius: var(--loqt-radius);
  border-top-right-radius: var(--loqt-radius);
}

/* The card those pages sit in. Five of them carried the same shadow, Change
   Password carried none, and My Profile had a third value. */
.page-card {
  overflow: visible;
  border: 1px solid var(--loqt-border);
  border-radius: var(--loqt-radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Settings-style page header.

   School Profile, Settings, MIS Integration, Parent Requests, School Calendar,
   Part-time Pupils, My Profile and Change Password all open with a title, an
   optional line of explanation and the page's actions, sitting in a sticky bar
   at the top of the page card. Eight components each defined that bar, which is
   how Change Password ended up with no rule under it and a title two sizes
   smaller than every other page. One definition now.

   Scoped under `.sticky-header` so the generic names here cannot reach the
   `<mat-card-title class="sticky-header">` used by the add/edit form pages. */
.sticky-header.page-header {
  padding: 20px 32px;
  background: var(--loqt-surface);
  border-bottom: 1px solid var(--loqt-border);
  box-shadow: 0 2px 8px -6px rgba(0, 0, 0, 0.08);
}
.sticky-header.page-header .header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.sticky-header.page-header .title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--loqt-ink);
}
.sticky-header.page-header .title mat-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  font-size: 32px;
  color: var(--loqt-ink);
}
.sticky-header.page-header .subtitle {
  margin: 12px 0 0;
  max-width: 900px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--loqt-muted);
}
.sticky-header.page-header .actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sticky-header.page-header .actions button mat-icon {
  margin-right: 4px;
}
@media (max-width: 768px) {
  .sticky-header.page-header {
    padding: 16px 20px;
  }
  .sticky-header.page-header .title {
    font-size: 1.25rem;
  }
  .sticky-header.page-header .title mat-icon {
    width: 28px;
    height: 28px;
    font-size: 28px;
  }
}

/* Motion.

   Several pages animate decorative icons on an infinite loop. Honour the
   viewer's preference rather than leaving anything throbbing on a settings
   screen they are trying to read. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Primary actions.

   `mat-raised-button` is M3's *elevated* button: a surface-coloured face with a
   primary-coloured label. Every primary call to action in the app uses it, so
   none of them read as primary. Paint them filled in the brand colour, which is
   what `mat-flat-button` already gives the newer pages. */
button.mat-mdc-raised-button.mat-primary {
  background: var(--loqt-ink);
  color: var(--loqt-surface);
  box-shadow: none;
}
button.mat-mdc-raised-button.mat-primary:hover:not([disabled]) {
  background: var(--loqt-ink-soft);
}
button.mat-mdc-raised-button.mat-primary[disabled], button.mat-mdc-raised-button.mat-primary.mat-mdc-button-disabled {
  background: var(--loqt-border);
  color: var(--loqt-ink-soft);
}

/* FABs.

   M3 paints every FAB with the primary *container* colour, so a `color="warn"`
   delete button comes out the same pale teal as the `color="primary"` one
   beside it, and neither carries enough contrast to read as a control. Give
   each intent its colour back. */
button.mat-mdc-fab,
button.mat-mdc-mini-fab {
  box-shadow: none;
}
button.mat-mdc-fab.mat-primary, button.mat-mdc-fab.mat-accent, button.mat-mdc-fab.mat-unthemed,
button.mat-mdc-mini-fab.mat-primary,
button.mat-mdc-mini-fab.mat-accent,
button.mat-mdc-mini-fab.mat-unthemed {
  background: var(--loqt-ink);
  color: var(--loqt-surface);
}
button.mat-mdc-fab.mat-primary:hover:not([disabled]), button.mat-mdc-fab.mat-accent:hover:not([disabled]), button.mat-mdc-fab.mat-unthemed:hover:not([disabled]),
button.mat-mdc-mini-fab.mat-primary:hover:not([disabled]),
button.mat-mdc-mini-fab.mat-accent:hover:not([disabled]),
button.mat-mdc-mini-fab.mat-unthemed:hover:not([disabled]) {
  background: var(--loqt-ink-soft);
}
button.mat-mdc-fab.mat-warn,
button.mat-mdc-mini-fab.mat-warn {
  background: var(--loqt-red-deep);
  color: var(--loqt-surface);
}
button.mat-mdc-fab.mat-warn:hover:not([disabled]),
button.mat-mdc-mini-fab.mat-warn:hover:not([disabled]) {
  background: var(--loqt-red-deeper);
}

/* `.auth-actions` lays out a row of form actions. Where it has been put on a
   button instead it stretches it to 200px and shoves the label to one edge. */
button.auth-actions {
  width: auto;
  margin-top: 0;
  justify-content: center;
}

/* A mat-select panel that is searched rather than scrolled. Lives here because
   a select panel renders in an overlay, outside the component that opened it. */
.searchable-panel .panel-search {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.searchable-panel .panel-search input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
}
.searchable-panel .panel-search input:focus {
  outline: none;
  border-color: var(--loqt-ink);
}

.searchable-panel .panel-more,
.searchable-panel .panel-empty {
  margin: 0;
  padding: 10px 16px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}

/*# sourceMappingURL=styles.aeddd2d6405f7df1.css.map*/