/*
 * Shared primitives for Ariston's custom admin pages.
 *
 * Unfold's Tailwind utilities are available on built-in admin templates, but
 * custom pages must not rely on uncompiled `dark:` utility variants.  These
 * classes give every bespoke confirmation/form screen the same dependable
 * light and dark surfaces, text and controls.
 */
.ariston-admin-card {
  background: var(--ar-panel);
  border: 1px solid var(--ar-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(15 23 42 / 8%);
  color: var(--ar-text);
  padding: 24px;
}

.ariston-admin-card__title {
  color: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.ariston-admin-card__copy {
  color: var(--ar-muted);
  line-height: 1.55;
  margin: 10px 0 0;
}

/*
 * Shared hover-tooltip for every "?" help icon on the platform — used by
 * the project's own tabular_heading.html override (every TabularInline
 * column header with help_text) and any hand-built ⓘ, e.g. the Job page's
 * Classroom quick-action pills. Deliberately not the native title=""
 * attribute: that needs a slow, easy-to-miss hover delay and wasn't
 * showing up reliably in practice (see the Job page pills fix). This
 * :hover-revealed bubble shows instantly and consistently instead.
 */
.ariston-qa-tt {
  cursor: help;
  color: var(--ar-muted);
  font-size: .9rem;
  position: relative;
  display: inline-block;
}

.ariston-qa-tt .ariston-qa-bubble {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ar-panel);
  color: var(--ar-text);
  border: 1px solid var(--ar-border);
  padding: .5rem .65rem;
  border-radius: .4rem;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  width: 240px;
  z-index: 50;
  text-align: left;
  box-shadow: 0 4px 14px rgb(0 0 0 / 40%);
  transition: opacity .1s ease-out;
}

.ariston-qa-tt:hover .ariston-qa-bubble {
  visibility: visible;
  opacity: 1;
}

/* Small pill buttons/links for inline quick actions (e.g. the Job page's
 * Classroom actions) — light colours by default, since this admin is used
 * in both themes; .dark overrides swap in the darker palette these were
 * originally designed against. */
.ariston-qa-pill-row {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 .5rem .5rem 0;
}

.ariston-qa-pill {
  background: var(--ar-panel-2);
  border: 1px solid var(--ar-border);
  color: var(--ar-text);
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .75rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  display: inline-block;
}

.ariston-qa-pill:hover {
  background: var(--ar-panel);
}

.dark .ariston-qa-pill {
  background: var(--ar-panel);
  border-color: var(--ar-border);
  color: var(--ar-text);
}

.dark .ariston-qa-pill:hover {
  background: var(--ar-panel);
}

/*
 * A TabularInline row (e.g. Enrollments: Student, Paying client, Billed
 * to, Client rate override, Status) has no relative column weighting, so
 * an autocomplete field's related-object "..." shortcut menu (add/change/
 * view — rarely used from inside an already-cramped inline row; staff can
 * reach the same actions from that model's own list) claims real width
 * the browser's table layout then takes away from narrower columns like
 * Status, ellipsis-truncating "Active" down to "Ac...". Hiding that menu
 * only inside inline tables frees the room without touching autocomplete
 * search itself, or the same field anywhere outside a formset table.
 */
table.formset .related-widget-wrapper > div[x-data] {
  display: none;
}

/* Belt-and-braces floor so a Status (or similarly short) choice field on
 * a TabularInline row never shrinks past the point its longest option
 * ("Withdrawn", "Completed") stops fitting. */
.field-status select {
  min-width: 7rem;
}

.ariston-admin-card__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.ariston-admin-primary-button,
.ariston-admin-secondary-button {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  text-decoration: none;
}

.ariston-admin-primary-button {
  background: #9810fa;
  border: 1px solid #9810fa;
  color: #ffffff;
}

.ariston-admin-primary-button:hover { background: #7e22ce; border-color: #7e22ce; }

.ariston-admin-secondary-button {
  background: transparent;
  border: 1px solid var(--ar-border);
  color: var(--ar-text);
}

.ariston-admin-secondary-button:hover { background: var(--ar-panel-2); }

.dark .ariston-admin-card,
:root[data-theme="dark"] .ariston-admin-card {
  background: var(--ar-panel);
  border-color: var(--ar-border);
  box-shadow: none;
  color: var(--ar-text);
}

.dark .ariston-admin-card__copy,
:root[data-theme="dark"] .ariston-admin-card__copy { color: var(--ar-text); }

.dark .ariston-admin-secondary-button,
:root[data-theme="dark"] .ariston-admin-secondary-button {
  border-color: var(--ar-border);
  color: var(--ar-text);
}

.dark .ariston-admin-secondary-button:hover,
:root[data-theme="dark"] .ariston-admin-secondary-button:hover { background: var(--ar-panel); }

/* On phones the command-search control used to consume the whole header row,
   shrinking the menu trigger to zero width. Keep navigation and page actions
   on the first row, then give search its own full-width row underneath. */
@media (max-width: 1023px) {
  #main > .sticky > div {
    height: auto !important;
    padding-bottom: 12px;
    padding-top: 12px;
  }

  #header-inner {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  #header-inner > div:first-child {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    overflow: visible;
  }

  #header-inner > button {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  #header-inner > div:last-child {
    grid-column: 2;
    grid-row: 1;
  }
}

/*
 * Desktop workspace layout preview.
 *
 * Unfold normally turns its navigation into an overlay at 1280px. That is
 * awkward on a laptop-sized admin window: opening the menu hides the first
 * table columns while unused horizontal space remains on the right. From
 * 1024px upwards, keep a compact navigation rail in the page flow and let
 * the main workspace use all remaining width. Phones/tablets retain
 * Unfold's standard collapsible drawer.
 */
@media (min-width: 1024px) {
  :root {
    --ariston-admin-sidebar-width: 224px;
  }

  #page > .relative.z-60 {
    flex: 0 0 var(--ariston-admin-sidebar-width);
    width: var(--ariston-admin-sidebar-width);
  }

  #page > .relative.z-60 > div {
    display: block !important;
    position: relative !important;
    width: var(--ariston-admin-sidebar-width) !important;
  }

  #nav-sidebar {
    width: var(--ariston-admin-sidebar-width) !important;
  }

  /* The rail is always visible on desktop, so its open/close controls are
     redundant. Keep the normal controls below this breakpoint. */
  #nav-sidebar-inner > div:first-child > span.material-symbols-outlined,
  #header-inner > div > div:first-child > span {
    display: none !important;
  }

  /* The pinned desktop rail has a deliberate fixed width. */
  #nav-sidebar > .resize {
    display: none;
  }

  #nav-sidebar-apps h2 {
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }

  #nav-sidebar-apps ol {
    padding-left: 16px;
    padding-right: 16px;
  }

  #nav-sidebar-apps ol a {
    font-size: 13px;
    height: 35px;
  }

  #nav-sidebar-apps ol a .material-symbols-outlined {
    margin-right: 10px;
  }

  #main {
    max-width: calc(100% - var(--ariston-admin-sidebar-width));
    width: calc(100% - var(--ariston-admin-sidebar-width));
  }

  /* Remove Unfold's centred max-width cap throughout the admin workspace. */
  #main .container,
  #main #content {
    max-width: none !important;
    width: 100%;
  }

  /* Unfold positions the selected-row action tray with its Alpine
     `sidebarWidth` value. That value can still contain the old, resizable
     sidebar width from localStorage, making the tray extend underneath the
     pinned rail and clipping the action selector. Keep both edges aligned
     to the actual desktop workspace instead. */
  #changelist-form > .fixed {
    left: var(--ariston-admin-sidebar-width) !important;
  }

  #changelist-actions {
    max-width: calc(100vw - var(--ariston-admin-sidebar-width) - 24px);
  }
}

/*
 * Theme tokens for bespoke admin pages (Introduction requests, billing
 * adjustment/refund screens, …). Light values follow Unfold's light mode;
 * html.dark (Unfold's toggle) swaps in the dark palette. Use these instead of
 * hard-coded hex so a page never shows dark panels on a light admin.
 */
:root {
  --ar-canvas: #f8fafc;
  --ar-panel: #ffffff;
  --ar-panel-2: #f1f5f9;
  --ar-input-bg: #ffffff;
  --ar-border: #e2e8f0;
  --ar-border-strong: #cbd5e1;
  --ar-text: #0f172a;
  --ar-muted: #475569;
  --ar-label: #64748b;
  --ar-accent: #9810fa;
  --ar-accent-line: #c27aff;
  --ar-accent-soft: #f5ebff;
  --ar-accent-text: #7e0ccf;
  --ar-ok: #047857;
  --ar-ok-soft: #dcfce7;
  --ar-ok-line: #86efac;
  --ar-warn: #b45309;
  --ar-warn-soft: #fef3c7;
  --ar-bad: #b91c1c;
  --ar-bad-soft: #fee2e2;
  --ar-shadow: rgb(15 23 42 / 12%);
}
.dark,
:root[data-theme="dark"] {
  --ar-canvas: #141d2a;
  --ar-panel: #1b2534;
  --ar-panel-2: #202a39;
  --ar-input-bg: #202a39;
  --ar-border: #364355;
  --ar-border-strong: #64738a;
  --ar-text: #edf2fb;
  --ar-muted: #aab8cb;
  --ar-label: #92a0b7;
  --ar-accent: #9221c4;
  --ar-accent-line: #ad36dc;
  --ar-accent-soft: #2f2140;
  --ar-accent-text: #e2b4ff;
  --ar-ok: #7ee2b0;
  --ar-ok-soft: #173a30;
  --ar-ok-line: #368a76;
  --ar-warn: #ffc08b;
  --ar-warn-soft: #3d2a18;
  --ar-bad: #ffaaa5;
  --ar-bad-soft: #3d1c1f;
  --ar-shadow: rgb(5 10 20 / 60%);
}

/* Settings pages (Organization change form): make each group of switches
   read as its own card with a clear heading bar, so long settings pages such
   as Communications are easy to scan. Scoped to this page only. */
body.model-organization.change-form fieldset.module {
  margin-top: 28px;
}
body.model-organization.change-form fieldset.module:first-of-type {
  margin-top: 8px;
}
body.model-organization.change-form fieldset.module > h2 {
  height: auto;
  min-height: 44px;
  padding: 10px 16px;
  margin-bottom: 12px;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(135deg, #510277 0%, #8c00b4 60%, #b400c8 100%);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(81, 2, 119, 0.18);
}
.dark body.model-organization.change-form fieldset.module > h2,
body.model-organization.change-form.dark fieldset.module > h2 {
  background: linear-gradient(135deg, #3a0156 0%, #6a0089 60%, #8c00b4 100%);
  box-shadow: none;
}