/*
 * Recruit Connect additions on top of the Nubos design system copied from Recruit Social.
 * components.css and colors_and_type.css stay verbatim copies, so they can be re-synced;
 * everything Connect-specific lives here.
 *
 * Documented deviations from the verbatim copies, to redo after a re-sync:
 * - Social's templates/admin/_ui, _flash and _icons live in templates/ui/ here, so the icon
 *   import in ui/_ui.html.twig and ui/_flash.html.twig reads 'ui/_icons.html.twig' instead of
 *   'admin/_icons.html.twig'.
 * - ui/_icons.html.twig has two icons Social's copy does not: eye and eye-off, for the password
 *   toggle of the settings (Setting/_password_toggle.html.twig). Keep them on a re-sync.
 * - ui/_ui.html.twig has a macro Social's copy does not: icon_templates, the icons a page script
 *   builds markup with, read by js/nubos/icon.js. Keep it on a re-sync.
 * - nav-drawer.js and confirm-submit.js sit in public/js/nubos/ instead of public/js/.
 * - confirm-submit.js is kept verbatim but not loaded: every delete here asks with a native
 *   confirm() and a translated text, so Connect has one confirmation pattern.
 * - tailwind.config.js scans every .twig file under templates/, not only *.html.twig.
 * - package.json is named recruit-connect instead of recruit-social.
 */

/* Status text: the colours of the danger button text and the warning chip as tokens with a dark
   counterpart, for text outside a chip or button (an error line, a warning next to a row).
   --danger-wash is the light danger surface components.css already reads with a fallback. */
:root {
    --danger-text: #C53030;
    --danger-wash: var(--nubos-danger-wash, #FFF5F5);
    --warn-text: #8A6D00;
}
.dark {
    --danger-text: #FF8A8A;
    --danger-wash: rgba(229, 62, 62, .12);
    --warn-text: #FFE243;
}
.t-danger, .t-danger:visited { color: var(--danger-text); }
.t-warn, .t-warn:visited { color: var(--warn-text); }

.page-head {
    margin-bottom: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* The minimal layout (layout/nubos/minimal.html.twig) has no sidebar, so its top bar always shows
   the Nubos mark that the base layout only shows on a phone, where the sidebar is a drawer. */
.app-minimal { min-height: 100vh; }
.app-minimal .topbar-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--fg-1);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}
.app-minimal .topbar-mark img { height: 24px; width: auto; }

/* Connect's menu is longer than Social's: the nav scrolls so the user block stays in view. */
.sidebar > nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* A thin light-on-navy scrollbar instead of the wide native one. */
.sidebar > nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.sidebar > nav::-webkit-scrollbar { width: 6px; }
.sidebar > nav::-webkit-scrollbar-track { background: transparent; }
.sidebar > nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 999px; }

/* The company id on one line, cut off with an ellipsis; the full id stays in the text and the title. */
.sidebar-foot .sidebar-company-id {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--sb-muted);
    opacity: .8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The id and its copy button on one line: the id takes what is left and is cut off, the button
   keeps its size. */
.sidebar-foot .sidebar-company-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.sidebar-foot .sidebar-company-row .sidebar-company-id { flex: 1 1 auto; min-width: 0; }
.sidebar-foot .sidebar-copy-btn {
    flex: none;
    border: 0;
    padding: 2px;
    border-radius: 6px;
    color: var(--sb-muted);
}
.sidebar-foot .sidebar-copy-btn:hover { color: var(--sb-fg); }
.sidebar-foot .sidebar-copy-btn svg { width: 12px; height: 12px; }

/* A [data-copy] button (js/nubos/copy.js) shows its check for a moment after copying. */
[data-copy] .copy-done { display: none; }
[data-copy].is-copied .copy-idle { display: none; }
[data-copy].is-copied .copy-done { display: block; color: var(--accent); }
[data-copy].is-copy-failed .copy-idle { color: var(--danger-text); }

/* Reseller logos, as tall as the Nubos mark next to Social's inline height. */
.sidebar-brand .sidebar-brand-logo { height: 30px; }

/* The settings and logout buttons in the footer; Social sets these as inline styles. */
.sidebar-foot .sidebar-foot-btn { border: 0; padding: 6px; }

/* A collapsible menu group (a channel, the apply forms, the customers): a native details whose
   summary looks like a menu item, with a chevron on the right that turns when it opens. The
   template opens the group of the current page server-side, so an active item is never hidden. */
details.nav-group > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
details.nav-group > summary::-webkit-details-marker { display: none; }
details.nav-group > summary > span { flex: 1; min-width: 0; }
details.nav-group > summary > svg.nav-group-chevron {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    color: var(--sb-muted);
    transition: transform .18s cubic-bezier(.2, .6, .2, 1);
}
details.nav-group[open] > summary > svg.nav-group-chevron { transform: rotate(90deg); }
/* The group that holds the current page: its icon takes the accent, the label stays quiet. */
details.nav-group.has-active > summary > svg:first-child { color: var(--accent); }
.sidebar-light details.nav-group.has-active > summary > svg:first-child { color: var(--nubos-green, #00B889); }
/* The children without their own icon, their text in line with the group's label (link padding
   10px + icon 17px + gap 11px), and a thin rule down the side to show where they belong. */
details.nav-group .nav-group-items {
    margin: 0 0 4px 18px;
    padding-left: 9px;
    border-left: 1px solid var(--sb-border);
}
details.nav-group .nav-group-items .nav-link {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
    details.nav-group > summary > svg.nav-group-chevron { transition: none; }
}

/* Visible on every page while a super admin or reseller acts as another user. */
.impersonation-bar {
    background: var(--nubos-danger);
    color: #fff;
    text-align: center;
    padding: 6px 16px;
}
.impersonation-bar span { margin-right: 12px; }
.impersonation-bar a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

/* Reseller branding: only the sidebar changes, same gradients the old theme used. */
[data-brand="forceflow"] .sidebar {
    background: linear-gradient(45deg, rgba(26, 42, 108, 0.92), rgba(178, 31, 31, 0.92)), url("/img/backgrounds/background.jpg") center / cover;
}
[data-brand="recruitnow"] .sidebar {
    background: linear-gradient(45deg, rgba(204, 43, 94, 0.92), rgba(117, 58, 136, 0.92)), url("/img/backgrounds/background.jpg") center / cover;
}

/* Replaces the Bootstrap modal; opened and closed by js/nubos/dialog.js. */
dialog.dialog {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--fg-1);
    padding: 0;
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    box-shadow: 0 24px 48px rgba(9, 26, 46, 0.18);
}
/* A column, so a long body scrolls between a head and foot that stay in view. */
dialog.dialog[open] {
    display: flex;
    flex-direction: column;
}
dialog.dialog.dialog-lg {
    width: min(960px, calc(100vw - 32px));
}
dialog.dialog::backdrop {
    background: rgba(9, 26, 46, 0.45);
}
dialog.dialog .dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
dialog.dialog .dialog-head h3 {
    margin: 0;
    font-size: 17px;
}
dialog.dialog .dialog-body {
    flex: 1;
    min-height: 0;
    padding: 20px;
    overflow: auto;
}
dialog.dialog .dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
}

/* Panels of js/nubos/tabs.js. */
[data-tab-panel][hidden] {
    display: none;
}

/*
 * The brand stylesheet has a global `a:visited { color: var(--link-visited) }` (specificity 0,1,1),
 * which outranks every single-class component colour (0,1,0). Without these rules the menu items
 * of visited pages turn green and link-buttons get green-dark text. Each rule below is the
 * component's own selector plus :visited (hover variants: :visited:hover) with the same colour,
 * in the same order as components.css, so the relative specificity between variants is unchanged.
 */
.nav-link:visited { color: var(--sb-fg); }
.nav-link:visited:hover { color: var(--sb-fg); }
.sidebar-light .nav-link:visited:hover { color: var(--fg-1); }
.nav-link.active:visited { color: var(--accent); }
.sidebar-light .nav-link.active:visited { color: var(--nubos-green, #00B889); }

.btn-primary:visited { color: var(--accent-contrast); }
.btn-secondary:visited { color: var(--fg-1); }
.btn-danger-text:visited { color: #C53030; }
.dark .btn-danger-text:not(.btn-danger):visited { color: #FF8A8A; }
.btn-outline:visited { color: var(--fg-1); }
.btn-ghost:visited { color: var(--fg-2); }
.btn-ghost:visited:hover { color: var(--fg-1); }
.btn-danger:visited { color: #fff; }
.btn-icon:visited { color: var(--fg-2); }
.btn-icon:visited:hover { color: var(--heading); }

.chip-success:visited { color: var(--heading); }
.chip-neutral:visited { color: var(--fg-2); }
.chip-warn:visited { color: #8A6D00; }
.dark .chip-warn:visited { color: #FFE243; }
.chip-danger:visited { color: #E53E3E; }
.dark .chip-danger:visited { color: #FF8A8A; }
.chip-info:visited { color: #3B6DB7; }
.dark .chip-info:visited { color: #A5D7FB; }
.chip-demo:visited { color: var(--fg-2); }
.sidebar .chip-demo:visited { color: var(--sb-muted); }
.code-chip:visited { color: var(--heading); }

.tab:visited { color: var(--fg-3); }
.tab:visited:hover { color: var(--fg-1); }
.tab.active:visited { color: var(--fg-1); }
.segmented a:visited { color: var(--fg-2); }
.segmented a.active:visited { color: var(--fg-1); }
.popover a:visited { color: var(--fg-2); }
.popover a:visited:hover { color: var(--fg-1); }
.tbl .t-name:visited { color: var(--fg-1); }

.topbar-mark:visited { color: var(--fg-1); }
.stat:visited, .stepper-item:visited, .variant-tab:visited, .step-link:visited,
.whatsnew a:visited, .vr-note a:visited { color: inherit; }

.help-aside-text a:visited, .help-aside-list a:visited, .help-back a:visited,
.help-prose a:visited, .callout-text a:visited { color: var(--heading); }
.op-context a:visited { color: var(--fg-1); }
.op-created a:visited { color: var(--link); }

/* An icon button for a destructive action: the danger text colour on the outlined icon button,
   which otherwise wins on order in components.css. */
.btn-icon.btn-danger-text, .btn-icon.btn-danger-text:visited { color: var(--danger-text); }
.btn-icon.btn-danger-text:hover { border-color: var(--nubos-danger); color: var(--danger-text); background: var(--danger-wash); }