/* ===========================================================================
   Koe - An Ikigai One Company :: account portal theme (Flexisip Account Manager)
   Linked after FAM's own css/style.css by server/scripts/patch-fam-branding.sh and served
   from /branding/theme.css. Ikigai One colours (design system tokens.json): one Ink canvas
   (#0b001a) behind everything, one near-black container colour (#0f0d14) for the rail, cards
   and panels, a hairline border, Ikigai Purple (#7600f4) for buttons and the selected item, a
   darker purple for "on", Signal Yellow only for focus and the one action that matters.
   FAM sizes are in rem with html { font-size: 62% } (1rem is about 10px).
   =========================================================================== */

html body {
  /* Koe app tokens (DefaultStyle.qml) */
  --koe-canvas: #0b001a;        /* brand ink: the one page canvas (header, page, login) */
  --koe-panel: #0f0d14;         /* near-black: the one container colour (rail, cards, panels) */
  --koe-field: #18151f;         /* main2_300: inputs, chips, hover fills */
  --koe-hairline: #26232e;      /* grey_300: panel borders, rules */
  --koe-line-2: #221f2b;        /* grey_850: selected rows */
  --koe-rail: var(--koe-panel); /* side navigation: same container colour as the cards */
  --koe-text: #f2f3f4;          /* grey_1000 / brand paper */
  --koe-text-2: #c9c7cf;        /* main2_700 */
  --koe-muted: #9a97a1;         /* main2_500 */
  --koe-faint: #47434f;         /* main2_400 */
  --koe-purple: #7600f4;        /* main1_500 / brand purple: buttons, selection */
  --koe-purple-hover: #5e00c4;  /* main1_600 */
  --koe-purple-press: #430090;  /* main1_700 */
  --koe-purple-deep: #32174d;   /* brand deep purple */
  --koe-purple-text: #a788ff;   /* main1_300: links and outlines (purple itself is too dark for text) */
  --koe-yellow: #ffd800;        /* brand signal yellow: focus ring, call to action */
  --koe-radius-panel: 1.6rem;   /* app panels: 16 px */
  --koe-radius-field: 1rem;     /* app inputs: 10 px */

  /* FAM palette -> Koe */
  --main-1: var(--koe-purple-deep);
  --main-2: #3d1d63;
  --main-3: var(--koe-purple-press);
  --main-4: var(--koe-purple-hover);
  --main-5: var(--koe-purple);
  --main-6: var(--koe-purple-hover);
  --main-7: var(--koe-purple-press);

  --second-4: var(--koe-muted);
  --second-5: var(--koe-muted);
  --second-6: var(--koe-text-2);
  --second-7: var(--koe-text);
  --second-8: var(--koe-field);
  --second-9: var(--koe-text);

  --grey-1: var(--koe-panel);
  --grey-2: var(--koe-hairline);
  --grey-3: var(--koe-hairline);
  --grey-4: var(--koe-faint);
  --grey-5: var(--koe-muted);
  --grey-6: var(--koe-muted);
  --grey-7: var(--koe-text-2);
  --grey-8: var(--koe-text-2);
  --grey-9: var(--koe-text);

  --color-green: #22c55e;
  --color-yellow: #ffdc2e;
  --color-blue: #4aa8ff;
  --color-pink: #ef4444;
  --color-orange: #f59e0b;
  --color-purple: var(--koe-purple);
  --danger-1: rgba(239, 68, 68, 0.12);
  --danger-2: rgba(239, 68, 68, 0.2);
  --danger-5: #ef4444;
  --danger-6: #f87171;
  --success-1: rgba(34, 197, 94, 0.12);
  --success-6: #4ade80;
  --warning-1: rgba(255, 220, 46, 0.1);
  --warning-6: #ffe066;
  --info-1: rgba(74, 168, 255, 0.12);
  --info-6: #7cc0ff;

  background-color: var(--koe-canvas);
  color: var(--koe-text-2);
  color-scheme: dark;
  font-family: 'Noto Sans', 'Segoe UI', system-ui, sans-serif;
}

html { background-color: #0b001a; scrollbar-color: #26232e #0b001a; }
::selection { background: var(--koe-purple); color: var(--koe-text); }

/* ---------- Keyboard focus: one visible ring everywhere (brand focus-ring) ---------- */
a:focus-visible, .btn:focus-visible, button:focus-visible, summary:focus-visible,
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: 2px solid var(--koe-yellow);
  outline-offset: 2px;
  border-radius: 0.6rem;
}

/* ---------- Header: the Koe wordmark, quiet links on the right ---------------------- */
header { background-color: var(--koe-canvas); border-bottom: 1px solid var(--koe-hairline); }
header nav { padding: 1.6rem 1.6rem; min-height: 4.8rem; align-items: center; }
header nav a {
  color: var(--koe-muted);
  border-radius: var(--koe-radius-field);
  line-height: 4rem;
  padding: 0 1.4rem;
  transition: background-color 120ms, color 120ms;
}
header nav a:hover { color: var(--koe-text); background-color: rgba(255, 255, 255, 0.06); }
header nav a#menu { color: var(--koe-text); }
header nav a#logo { color: var(--koe-text); padding-left: 0.8rem; gap: 1.2rem; }
header nav a#logo:hover { background-color: transparent; }
header nav a#logo::before {
  /* The space's own logo (Admin > Space) still wins through --space-logo. */
  background-image: var(--space-logo, url('/branding/koe/koe-wordmark-96.png'));
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  width: 11.6rem;
  height: 3.8rem;
  padding: 0;
  margin-right: 0;
  border-radius: 0;
  box-shadow: none;
}
/* The wordmark already says KOE: keep the name for screen readers, show the endorsement line. */
header nav a#logo span {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--koe-muted);
  line-height: 1.6rem;
  letter-spacing: 0.02em;
  border-left: 1px solid var(--koe-hairline);
  padding-left: 1.2rem;
  font-size: 0;            /* hide the plain-text "Koe"... */
}
header nav a#logo span::after {
  content: "An Ikigai One Company";
  font-size: 1.2rem;       /* ...and show the endorsement instead */
  display: inline-block;
}
header nav span.badge { margin-left: 0.8rem; white-space: nowrap; }
@media screen and (max-width: 800px) {
  header nav a#logo::before { width: 9rem; height: 3rem; }
  header nav span.badge { display: none; } /* phones: no room for the role next to the sign-out button */
}

/* ---------- Side navigation: the desktop app's rail ---------------------------------- */
content > nav {
  background-color: var(--koe-rail);
  background-image: none;
  width: 22rem;
  padding: 2rem 1.2rem 4rem;
  border-radius: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}
content > nav:not(:has(a)) { display: none; } /* logged-out pages render an empty rail */
content > nav a {
  color: var(--koe-text);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 4.4rem;
  margin: 0.2rem 0;
  padding: 0 1.2rem;
  border-radius: var(--koe-radius-field);
  transition: background-color 120ms;
}
content > nav a i { font-size: 2rem; margin-right: 1.2rem; }
content > nav a:hover { background-color: rgba(255, 255, 255, 0.08); }
content > nav a.current {
  background-color: var(--koe-purple);
  color: var(--koe-text);
  border-radius: var(--koe-radius-field);
  box-shadow: none;
  font-weight: 600;
}
@media screen and (max-width: 800px) {
  content > nav { width: 100%; padding-top: 1.6rem; }
}

/* ---------- Page area and type ------------------------------------------------------------ */
content { gap: 2.4rem; }
content section { padding: 2.4rem 1.6rem; }
h1 {
  font-size: 2.6rem;
  line-height: 3.2rem;
  font-weight: 600;
  color: var(--koe-text);
}
h1 i { font-size: 2.6rem; color: var(--koe-purple-text); }
h2 { font-size: 2rem; font-weight: 600; color: var(--koe-text); }
h2 i { color: var(--koe-purple-text); }
h3 { font-size: 1.6rem; font-weight: 600; color: var(--koe-text); border-bottom-color: var(--koe-hairline); }
h4 { color: var(--koe-text); }
p, a, ul li, ol li, pre { color: var(--koe-text-2); }
small { color: var(--koe-muted); }
hr { border-bottom-color: var(--koe-hairline); }
a { color: var(--koe-purple-text); }
p > a:not(.btn), ul:not(.tabs) > li > a, table tr td a:not(.btn), form div span.supporting a, label > a,
.breadcrumb li a {
  color: var(--koe-purple-text);
  text-decoration: none;
  text-underline-offset: 0.3rem;
}
p > a:not(.btn):hover, ul:not(.tabs) > li > a:hover, table tr td a:not(.btn):hover, label > a:hover {
  text-decoration: underline;
}
header nav a, content > nav a, .btn, ul.pagination .page-link { text-decoration: none; }
code, pre code { color: var(--koe-text); }
pre { background-color: var(--koe-field); border: 1px solid var(--koe-hairline); border-radius: var(--koe-radius-field); }

/* ---------- Panels: the app's near-black cards ------------------------------------------- */
.card,
form section.block,
.table-of-contents,
dialog {
  background-color: var(--koe-panel);
  color: var(--koe-text-2);
  border: 1px solid var(--koe-hairline);
  border-radius: var(--koe-radius-panel);
}
.card { padding: 2rem; }
.card header { background-color: transparent; border-bottom-color: var(--koe-hairline); }
.card li { border-bottom-color: var(--koe-hairline); }
.card li .icon { background-color: var(--koe-field); color: var(--koe-purple-text); border-radius: var(--koe-radius-field); }
.card li .icon.green { background-color: var(--success-1); color: var(--color-green); }
.card li .icon.red { background-color: var(--danger-1); color: var(--danger-5); }
.card li p:first-child { color: var(--koe-text); }
.card li p:nth-child(2), .card li .meta { color: var(--koe-muted); }
.card .empty, .card .empty p { color: var(--koe-muted); }
.card.info, .card.warning, .card.danger { border-left-width: 4px; }
.card.info { background-color: var(--info-1); border-color: var(--color-blue); }
.card.warning { background-color: var(--warning-1); border-color: var(--color-yellow); }
.card.danger { background-color: var(--danger-1); border-color: var(--danger-5); }
.table-of-contents { border-radius: 0 var(--koe-radius-panel) var(--koe-radius-panel) 0; }
.tooltiptext {
  background-color: var(--koe-field);
  color: var(--koe-text);
  border: 1px solid var(--koe-hairline);
  border-left: 4px solid var(--koe-purple);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
dialog { color: var(--koe-text-2); }
dialog::backdrop { background-color: #0b001a; opacity: 0.75; }
dialog h2 { border-bottom-color: var(--koe-hairline); }

/* ---------- Tables ---------------------------------------------------------------------------- */
table thead { border-bottom: 1px solid var(--koe-hairline); }
table tr th, table tr th a { color: var(--koe-muted); font-size: 1.2rem; letter-spacing: 0.06em; }
table tr td { color: var(--koe-text-2); border-bottom: 1px solid var(--koe-hairline); }
table tr:nth-child(2n) { background-color: transparent; }
table tbody tr:hover { background-color: rgba(255, 255, 255, 0.03); }
table tr.empty { background-color: transparent; color: var(--koe-muted); }
table tr.empty td:before { color: var(--koe-faint); }

/* ---------- Forms: the app's dark rounded fields ------------------------------------------------ */
form div input:not(.btn):not([type=checkbox]):not([type=radio]):not([type=submit]),
form div select,
form div textarea,
form div input[type=file] {
  background-color: var(--koe-field);
  color: var(--koe-text);
  border: 1px solid transparent;
  border-radius: var(--koe-radius-field);
}
form div input:not(.btn):not([type=checkbox]):not([type=radio]):hover,
form div select:hover,
form div textarea:hover { border-color: var(--koe-faint); }
form div input:not(.btn):not([type=checkbox]):not([type=radio]):focus,
form div select:focus,
form div textarea:focus {
  border-color: var(--koe-purple);
  color: var(--koe-text);
  outline: none;
  box-shadow: 0 0 0 3px rgba(118, 0, 244, 0.3);
}
form div input:not(.btn):focus + label, form div select:focus ~ label, form div textarea:focus + label { color: var(--koe-purple-text); }
form div input:autofill, form div input:-webkit-autofill {
  -webkit-text-fill-color: var(--koe-text);
  -webkit-box-shadow: 0 0 0 100px var(--koe-field) inset;
  caret-color: var(--koe-text);
}
form div input[disabled], form div textarea[disabled], form div textarea[readonly] {
  background-color: var(--koe-panel);
  border-color: var(--koe-hairline);
  color: var(--koe-muted);
}
input::placeholder, textarea::placeholder { color: var(--koe-muted); opacity: 1; }
form label { color: var(--koe-muted); font-weight: 500; }
form div span.supporting { color: var(--koe-muted); }
form div.select:after { color: var(--koe-muted); }
input[type=checkbox], input[type=radio] { accent-color: var(--koe-purple); }
input[type=number].digit { background-color: var(--koe-field); color: var(--koe-text); border-radius: var(--koe-radius-field); }
/* Switches: off = hairline track, on = the darker "on" purple (as in the app) */
div.checkbox::before { background-color: var(--koe-hairline); }
div.checkbox:has(> input[type="checkbox"]:checked)::before { background-color: var(--koe-purple-hover); }
div.checkbox p { color: var(--koe-text-2); }
form .picker canvas { background-color: var(--koe-field); }

/* ---------- Buttons: purple pills, outlined secondaries (buttonStyle.js main / secondary) ---------- */
.btn,
form div input[type="file"]::file-selector-button {
  background-color: var(--koe-purple);
  border: 1px solid var(--koe-purple);
  color: var(--koe-text);
  font-weight: 600;
  transition: background-color 120ms, border-color 120ms;
}
.btn i { color: inherit; }
.btn:hover { background-color: var(--koe-purple-hover); border-color: var(--koe-purple-hover); color: var(--koe-text); }
.btn:active { background-color: var(--koe-purple-press); border-color: var(--koe-purple-press); }
.btn.secondary { background-color: transparent; border-color: var(--koe-purple-text); color: var(--koe-text); }
.btn.secondary:hover { background-color: var(--koe-purple-press); border-color: var(--koe-purple-press); }
.btn.secondary:active { background-color: var(--koe-purple); border-color: var(--koe-purple); }
.btn.tertiary { background-color: var(--koe-field); border-color: var(--koe-field); color: var(--koe-text); }
.btn.tertiary:hover { background-color: var(--koe-line-2); border-color: var(--koe-line-2); }
.btn.icon { background-color: var(--koe-field); border-color: var(--koe-field); }
.btn.icon > i { color: var(--koe-text); }
.btn.icon:hover { background-color: var(--koe-line-2); border-color: var(--koe-line-2); }
.btn[disabled], .btn.disabled {
  background-color: var(--koe-field);
  border-color: var(--koe-hairline);
  color: var(--koe-muted);   /* readable but clearly off (upstream also fades it to 50%) */
}
.btn.danger { background-color: var(--danger-5); border-color: var(--danger-5); color: var(--koe-text); }
.btn.danger:hover { background-color: #c53030; border-color: #c53030; }
.btn.secondary.danger { background-color: transparent; color: var(--danger-6); border-color: var(--danger-5); }

/* ---------- Tabs, breadcrumb, pagination, steps ---------------------------------------------------- */
ul.tabs { border-bottom: 1px solid var(--koe-hairline); }
ul.tabs li { font-size: 1.5rem; font-weight: 600; line-height: 3.6rem; opacity: 1; margin: 0 1rem; }
ul.tabs li a { color: var(--koe-muted); }
ul.tabs li:hover a { color: var(--koe-text); }
ul.tabs li.current { border-color: var(--koe-purple); }
ul.tabs li.current a { color: var(--koe-text); }
.breadcrumb li, .breadcrumb li.active { color: var(--koe-muted); }
.breadcrumb li + li:before { color: var(--koe-faint); }
ul.pagination li:not(.disabled) .page-link { color: var(--koe-purple-text); }
ul.pagination li:not(.disabled):not(.active) .page-link:hover { background-color: var(--koe-field); border-color: var(--koe-hairline); }
ul.pagination li:not(.disabled).active .page-link { background-color: var(--koe-purple); color: var(--koe-text); border-color: var(--koe-purple); }
ol.steps li { color: var(--koe-muted); }
ol.steps li:before, ol.steps li + li:after { border-color: var(--koe-hairline); }
ol.steps li.active { color: var(--koe-text); }
ol.steps li.active:before { background-color: var(--koe-purple); border-color: var(--koe-purple); color: var(--koe-text); }
details > summary::before { color: var(--koe-muted); }
span.line { color: var(--koe-muted); }
span.line::before { background-image: linear-gradient(to right, var(--koe-hairline), transparent, var(--koe-hairline)); }
progress { accent-color: var(--koe-purple); }

/* ---------- Badges: outlined pills, like the app's "In work" badge -------------------------------- */
.badge {
  background-color: var(--koe-field);
  color: var(--koe-text);
  border: 1px solid var(--koe-hairline);
  border-radius: 999px;
  font-weight: 600;
}
.badge.badge-main, .badge.badge-primary { background-color: transparent; border-color: var(--koe-purple); color: var(--koe-purple-text); }
.badge.badge-info { background-color: var(--info-1); border-color: var(--color-blue); color: var(--info-6); }
.badge.badge-success { background-color: var(--success-1); border-color: var(--color-green); color: var(--success-6); }
.badge.badge-warning { background-color: var(--warning-1); border-color: var(--color-yellow); color: var(--warning-6); }
.badge.badge-error { background-color: var(--danger-1); border-color: var(--danger-5); color: var(--danger-6); }
.badge.badge-message { background-color: transparent; border-color: var(--koe-purple); color: var(--koe-purple-text); }
.color.orange { color: var(--color-orange); }
.color.green { color: var(--color-green); }
.color.red { color: var(--danger-6); }

/* ---------- Messages ---------------------------------------------------------------------------------- */
ul.errors {
  background-color: var(--danger-1);
  border: 1px solid var(--danger-5);
  border-left-width: 4px;
  border-radius: var(--koe-radius-field);
}
ul.errors li { color: var(--danger-6); }
small.error { color: var(--danger-6); }

/* ---------- Welcome pages (login, register, recovery): form left, illustration right ---------------- */
/* One layout on every site: the card starts at the same height whatever is in it (the platform login has
   more lines than a company login), instead of being centred in the window. */
body.welcome::after { display: none; } /* upstream decorative footer strip */
body.welcome content {
  width: 100%;
  max-width: 1100px;
  gap: 4rem;
  padding: 6.4rem 1.6rem 4rem;
  box-sizing: border-box;
  align-items: flex-start;
  min-height: 0;
}
body.welcome content > section:first-child {
  background-color: var(--koe-panel);
  border: 1px solid var(--koe-hairline);
  border-radius: var(--koe-radius-panel);
  padding: 3.2rem;
  flex: 0 1 46rem;
  min-width: 0;
  margin: 0;
}
body.welcome content > section:first-child h1 { margin-bottom: 2.4rem !important; }
body.welcome content > section:first-child form { margin-top: 1.6rem !important; margin-bottom: 2rem !important; }
/* Sign-in / register / recovery forms: one column, full-width fields and button, inside the card. */
body.welcome content > section:first-child form { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
body.welcome content > section:first-child form > div.on_desktop:empty { display: none; }
body.welcome content > section:first-child form div input:not([type=checkbox]):not([type=radio]) { width: 100%; box-sizing: border-box; }
body.welcome content > section:first-child form div input.btn[type=submit],
body.welcome content > section:first-child form div .btn {
  width: 100%;
  box-sizing: border-box; /* links styled as buttons (Cancel) otherwise run past the card */
  margin-left: 0;
  margin-top: 0.8rem !important;
  text-align: center;
}
body.welcome content > section:first-child p { overflow-wrap: anywhere; }
body.welcome content > section.on_desktop {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
body.welcome content > section.on_desktop img { width: 100%; max-width: 32rem; height: auto; }
body.welcome content > section:only-child { margin: 0 auto; } /* a welcome page without art: centre the card */
body.welcome content img[src*="/branding/koe/illustrations/"] { filter: none; }
/* Upstream page art (anything we have not replaced yet) is orange: pull it into the purple range. */
content img[src*="/img/"][src$=".svg"] { filter: hue-rotate(250deg) saturate(1.1) brightness(0.8); }
/* Phones and narrow windows: card and illustration stack, both fit the screen. */
@media screen and (max-width: 800px) {
  body.welcome content {
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2.4rem;
    padding: 2.4rem 1.6rem 3.2rem;
  }
  body.welcome content > section:first-child { flex: 0 0 auto; width: 100%; max-width: 100%; padding: 2.4rem 2rem; }
  body.welcome content > section.on_desktop { display: flex !important; flex: 0 0 auto; align-self: center; width: 100%; }
  body.welcome content > section.on_desktop img { max-width: 24rem; }
}

/* ---------- About page ------------------------------------------------------------------------------------ */
img[src*="logo_linphone"] { display: none; }
img[src*="/branding/koe/koe-mark"] { width: 6.4rem; height: 6.4rem; }
/* Terms / privacy URLs are not configured yet (empty links): hide the line instead of dead links. */
p:has(> a[href=""]) { display: none; }

/* ---------- Error pages ------------------------------------------------------------------------------------- */
.koe-error { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; padding: 4rem 1.6rem; }
.koe-error img { width: 32rem; max-width: 100%; height: auto; }
.koe-error h2 { justify-content: center; padding-bottom: 0; }
.koe-error p { color: var(--koe-muted); max-width: 48rem; }

/* ---------- One page column: every signed-in page has the same width and position ------------------- */
/* Upstream sizes the page to its content (a short page is narrower and centred elsewhere). */
content > nav + section {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1024px;
  min-width: 0;
  margin: 0 auto 4rem;
  box-sizing: border-box;
}
@media screen and (max-width: 800px) {
  content > nav + section { min-width: 100%; }
  .grid > .card { margin-bottom: 1.6rem; } /* upstream stacks the cards with no gap on phones */
}

/* ---------- Role badges: purple, never the error red. Platform Admin filled, Org Admin outlined ------- */
.badge.koe-role-platform { background-color: var(--koe-purple); border-color: var(--koe-purple); color: var(--koe-text); }
.badge.koe-role-org { background-color: transparent; border-color: var(--koe-purple); color: var(--koe-purple-text); }

/* ---------- Empty states: icon and text centred, inside or outside a card ------------------------------- */
div.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 0;
  text-align: center;
  color: var(--koe-muted);
}
div.empty i { font-size: 3rem; }
div.empty p { margin: 0; color: inherit; text-align: center; }

/* Koe add-on: Extensions table (full width, the app's field style without the label gap) */
#koe-extensions table td.koe-extension { width: 14rem; }
#koe-extensions table td.koe-extension input { margin-top: 0; max-width: 12rem; }
#koe-extensions table td { white-space: nowrap; }

/* Koe add-on (server/fam-addons/koe): Microsoft sign-in above the password form */
a.btn.koe-microsoft { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1rem; }
a.btn.koe-microsoft i { font-size: 1.3em; }
.koe-or { color: var(--koe-muted); margin-top: 1.5rem; margin-bottom: -1.5rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}