/* Shared Techni-Serre presentation for the pinned Mantine/InvenTree UI.
   Keep red/orange/yellow status palettes: brand colors must not hide meaning. */
:root {
  --ts-green: #125537;
  --ts-orange: #f26623;
  --ts-leaf: #9ac454;
  --mantine-primary-color-0: #edf6ef !important;
  --mantine-primary-color-1: #d8ebdd !important;
  --mantine-primary-color-2: #b4d7bf !important;
  --mantine-primary-color-3: #86bf99 !important;
  --mantine-primary-color-4: #55a574 !important;
  --mantine-primary-color-5: #2c8554 !important;
  --mantine-primary-color-6: #17683f !important;
  --mantine-primary-color-7: #125537 !important;
  --mantine-primary-color-8: #0d442d !important;
  --mantine-primary-color-9: #093723 !important;
  --mantine-color-indigo-0: #edf6ef !important;
  --mantine-color-indigo-1: #d8ebdd !important;
  --mantine-color-indigo-2: #b4d7bf !important;
  --mantine-color-indigo-3: #86bf99 !important;
  --mantine-color-indigo-4: #55a574 !important;
  --mantine-color-indigo-5: #2c8554 !important;
  --mantine-color-indigo-6: #17683f !important;
  --mantine-color-indigo-7: #125537 !important;
  --mantine-color-indigo-8: #0d442d !important;
  --mantine-color-indigo-9: #093723 !important;
  --mantine-primary-color-filled: #17683f !important;
  --mantine-primary-color-filled-hover: #125537 !important;
  --mantine-primary-color-contrast: #fff !important;
  --mantine-color-indigo-filled: #17683f !important;
  --mantine-color-indigo-filled-hover: #125537 !important;
  --mantine-color-indigo-outline: var(--ts-link) !important;
  --mantine-color-indigo-outline-hover: var(--ts-hover) !important;
  --mantine-color-indigo-light: var(--ts-subtle) !important;
  --mantine-color-indigo-light-hover: var(--ts-hover) !important;
  --mantine-color-indigo-light-color: var(--ts-link) !important;
  --mantine-primary-color-light: var(--ts-subtle) !important;
  --mantine-primary-color-light-hover: var(--ts-hover) !important;
  --mantine-primary-color-light-color: var(--ts-link) !important;
  --mantine-radius-xs: 5px !important;
  --mantine-radius-sm: 7px !important;
  --mantine-radius-default: 7px !important;
}

html[data-mantine-color-scheme='light'] {
  --mantine-color-body: #f4f6f2 !important;
  --mantine-color-text: #243b30 !important;
  --mantine-color-dimmed: #637369 !important;
  --mantine-color-default: #ffffff !important;
  --mantine-color-default-hover: #edf3eb !important;
  --mantine-color-default-border: #d6dfd4 !important;
  --ts-surface: #ffffff;
  --ts-subtle: #edf3eb;
  --ts-border: #d6dfd4;
  --ts-link: #125537;
  --ts-hover: #e5efe4;
}

html[data-mantine-color-scheme='dark'] {
  --mantine-color-dark-0: #e0eae3 !important;
  --mantine-color-dark-1: #c5d4ca !important;
  --mantine-color-dark-2: #a1b8a8 !important;
  --mantine-color-dark-3: #729080 !important;
  --mantine-color-dark-4: #395548 !important;
  --mantine-color-dark-5: #2a4438 !important;
  --mantine-color-dark-6: #20372d !important;
  --mantine-color-dark-7: #182c23 !important;
  --mantine-color-dark-8: #122219 !important;
  --mantine-color-dark-9: #0d1b14 !important;
  --mantine-color-body: #122219 !important;
  --mantine-color-text: #e0eae3 !important;
  --mantine-color-dimmed: #a1b8a8 !important;
  --mantine-color-default: #20372d !important;
  --mantine-color-default-hover: #2a4438 !important;
  --mantine-color-default-border: #395548 !important;
  --ts-surface: #182c23;
  --ts-subtle: #20372d;
  --ts-border: #395548;
  --ts-link: #b4d7bf;
  --ts-hover: #2a4438;
}

body { background: var(--mantine-color-body); }
a:not(.mantine-Button-root) { color: var(--ts-link); }
:focus-visible { outline: 2px solid var(--ts-orange) !important; outline-offset: 3px; }
::selection { background: #b4d7bf; color: #093723; }

/* Stable public component classes and upstream tour IDs, never build hashes. */
.mantine-Container-root:has(#tip-ftu-nav1) {
  background: var(--ts-surface);
  border-top: 3px solid var(--ts-orange);
  border-bottom: 1px solid var(--ts-border);
  padding-top: 7px;
  padding-bottom: 7px;
}
#tip-ftu-nav2 { flex-shrink: 0; border-radius: 7px; }
#tip-ftu-nav2 img {
  display: block;
  width: 148px;
  height: 72px;
  object-fit: cover;
  object-position: center 49%;
  background: #fff;
  border-radius: 7px;
}
/* Keep the native search, notification and account controls at the right edge,
   including when the header wraps on a narrower screen. */
.mantine-Group-root:has(> #tip-ftu-search) {
  margin-inline-start: auto;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.mantine-Text-root[data-variant='gradient'] {
  background-image: none !important;
  color: var(--ts-link) !important;
  -webkit-text-fill-color: var(--ts-link);
}
#tip-ftu-nav1 .mantine-Tabs-tab { padding-inline: 12px; font-size: 13px; }
.mantine-Tabs-tab[data-active] { border-color: var(--ts-orange) !important; }
.mantine-Tabs-tab:hover { background-color: var(--ts-hover); }
.mantine-NavLink-root[data-active] { background: var(--ts-subtle); color: var(--ts-link); }
.mantine-Drawer-content, .mantine-Modal-content, .mantine-Menu-dropdown,
.mantine-Popover-dropdown { border: 1px solid var(--ts-border); }
.mantine-Modal-header, .mantine-Drawer-header { border-bottom: 2px solid var(--ts-orange); }
.mantine-Modal-title, .mantine-Drawer-title { font-weight: 650; }
.mantine-Input-input:focus-within { border-color: var(--ts-green); }
thead th { background: var(--ts-subtle) !important; color: var(--mantine-color-text); }
tbody tr:hover td { background-color: var(--ts-hover); }
.mantine-Checkbox-input:checked, .mantine-Switch-input:checked + .mantine-Switch-track {
  background-color: var(--ts-green);
  border-color: var(--ts-green);
}

/* Login, logout and the native mobile notice share the same branded shell. */
.mantine-BackgroundImage-root .mantine-Paper-root {
  min-width: min(425px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px);
  border-top: 4px solid var(--ts-orange);
  border-radius: 12px;
}
.mantine-BackgroundImage-root .mantine-Paper-root::before,
.mantine-Center-root > .mantine-Container-root > .mantine-Stack-root:has(> h1)::before {
  content: '';
  display: block;
  width: 240px;
  max-width: 100%;
  height: 132px;
  margin: 0 auto 18px;
  border-radius: 8px;
  background: #fff url('./logo-gtf.png') center 49% / cover no-repeat;
}
.ts-login-note { color: var(--mantine-color-dimmed); font-size: 13px; }

@media (max-width: 760px) {
  #tip-ftu-nav2 img { width: 112px; height: 56px; }
  .mantine-Modal-content { max-width: 100vw; }
}

/* Brand copy follows the native language selector. */
.ts-fr { display: none; }
:lang(fr) .ts-fr { display: inline; }
:lang(fr) .ts-en { display: none; }

/* Keep native detail and account tabs above the content on phones. */
@media (max-width: 760px) {
  .mantine-Tabs-root:is([aria-label='panel-group-part'], [aria-label='panel-group-user-settings'], [aria-label='panel-group-admin-center']) { flex-direction: column !important; }
  .mantine-Tabs-list:is([aria-label='panel-tabs-part'], [aria-label='panel-tabs-user-settings'], [aria-label='panel-tabs-admin-center']) { width: 100% !important; border-right: 0; }
  :is([aria-label='panel-tabs-part'], [aria-label='panel-tabs-user-settings'], [aria-label='panel-tabs-admin-center']) > div:first-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is([aria-label='panel-tabs-part'], [aria-label='panel-tabs-user-settings'], [aria-label='panel-tabs-admin-center']) [role='tab'] { min-width: 0; }
  :is([aria-label='panel-tabs-part'], [aria-label='panel-tabs-user-settings'], [aria-label='panel-tabs-admin-center']) [role='tab'] a { white-space: normal; overflow-wrap: anywhere; }
  :is([aria-label='panel-tabs-part'], [aria-label='panel-tabs-user-settings'], [aria-label='panel-tabs-admin-center']) .mantine-Tabs-tabLabel { min-width: 0; }
  :is([aria-label='panel-group-part'], [aria-label='panel-group-user-settings'], [aria-label='panel-group-admin-center']) > [role='tabpanel'] { min-width: 0; padding: 12px 0; }
}