/* begin license *
 *
 * "SWL"(Seecr Web Lib) makes developing webbased apps easier
 *
 * Copyright (C) 2024, 2026 Seecr (Seek You Too B.V.) https://seecr.nl
 *
 * This file is part of "Seecr Web Lib"
 *
 * "Seecr Web Lib" is licensed under the MIT License; see the LICENSE file.
 * SPDX-License-Identifier: MIT
 *
 * end license */

/*
 * SWL's own components (modal, dialog, toast, context menu, account views) are plain HTML
 * (<dialog>, popover) styled here, so they work with any CSS framework or none.
 *
 * Theme: the --swl-* variables below. They follow Bootstrap, Tabler or Bulma when one is loaded, and
 * otherwise use neutral values (also used by swl-base.css). Override them in your own CSS:
 *     :root { --swl-accent: #FAA21B; }
 */
:root {
    --seecr-orange: #FAA21B;
    --seecr-grey: #5F6062;

    --swl-bg: var(--tblr-body-bg, var(--bs-body-bg, var(--bulma-scheme-main, #fff)));
    --swl-fg: var(--tblr-body-color, var(--bs-body-color, var(--bulma-text, #1f2328)));
    --swl-muted: var(--tblr-secondary-color, var(--bs-secondary-color, var(--bulma-text-weak, #656d76)));
    --swl-border: var(--tblr-border-color, var(--bs-border-color, var(--bulma-border, #d8dee4)));
    --swl-subtle-bg: var(--tblr-tertiary-bg, var(--bs-tertiary-bg, var(--bulma-background, #f6f8fa)));
    --swl-radius: var(--tblr-border-radius, var(--bs-border-radius, var(--bulma-radius, .375rem)));
    --swl-accent: var(--tblr-primary, var(--bs-primary, var(--bulma-primary, #2563eb)));
    --swl-accent-fg: var(--bulma-primary-invert, #fff);
    --swl-danger: #d63939;
    --swl-warning: #e8a000;
    --swl-success: #2f9e44;
    --swl-info: #1c7ed6;
    --swl-overlay: rgba(20, 22, 26, .45);
    --swl-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18), 0 .125rem .375rem rgba(0, 0, 0, .08);
    --swl-gap: 1rem;
}

html.swl-wait, html.swl-wait * { cursor: wait !important; }

/* ---------------------------------------------------------------- small layout helpers */

.swl-stack { display: flex; flex-direction: column; gap: var(--swl-gap); }
.swl-row { display: flex; flex-wrap: wrap; gap: var(--swl-gap); align-items: flex-end; }
.swl-row > * { flex: 1 1 12rem; }
.swl-row > .swl-fit { flex: 0 0 auto; }
.swl-end { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.swl-muted { color: var(--swl-muted); }
.swl-small { font-size: .875em; }
.swl-hidden { display: none !important; }
.swl-stack > *, .swl-row > *, .swl-end > * { margin-top: 0; margin-bottom: 0; }

/* ---------------------------------------------------------------- buttons used by SWL itself */

.swl-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: auto;
    margin: 0;
    padding: .45rem .9rem;
    border: 1px solid var(--swl-border);
    border-radius: var(--swl-radius);
    background: var(--swl-bg);
    color: var(--swl-fg);
    box-shadow: none;
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
}
.swl-btn:hover, .swl-btn:focus-visible { background: var(--swl-subtle-bg); color: var(--swl-fg); border-color: var(--swl-border); }
.swl-btn-primary, .swl-btn-primary:hover, .swl-btn-primary:focus-visible { background: var(--swl-accent); border-color: var(--swl-accent); color: var(--swl-accent-fg); }
.swl-btn-primary:hover { filter: brightness(1.08); }

.swl-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--swl-muted);
    box-shadow: none;
    font-size: 1rem;
    cursor: pointer;
}
.swl-icon-button:hover, .swl-icon-button:focus-visible { background: var(--swl-subtle-bg); color: var(--swl-fg); }

/* ---------------------------------------------------------------- modal (swl/modal.j2) */

dialog.swl-modal, dialog.swl-dialog {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--swl-overlay);
    color: var(--swl-fg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
dialog.swl-modal:not([open]), dialog.swl-dialog:not([open]) { display: none; }
dialog.swl-modal::backdrop, dialog.swl-dialog::backdrop { background: transparent; }

.swl-modal-box, .swl-dialog-box {
    display: flex;
    flex-direction: column;
    width: calc(100% - 2rem);
    max-width: var(--swl-modal-width, 50rem);
    max-height: calc(100vh - 2rem);
    margin: 0;
    padding: 0;
    overflow: auto;
    border: 1px solid var(--swl-border);
    border-radius: calc(var(--swl-radius) * 1.5);
    background: var(--swl-bg);
    color: var(--swl-fg);
    box-shadow: var(--swl-shadow);
    animation: swl-pop .15s ease-out;
}
.swl-modal-sm { --swl-modal-width: 25rem; }
.swl-modal-lg { --swl-modal-width: 50rem; }
.swl-modal-xl { --swl-modal-width: 71rem; }
.swl-modal-scrollable .swl-modal-box { overflow: hidden; }
.swl-modal-scrollable .swl-modal-body { overflow: auto; }

@keyframes swl-pop {
    from { opacity: 0; transform: translateY(.5rem) scale(.98); }
    to { opacity: 1; transform: none; }
}

.swl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--swl-border);
}
.swl-modal-heading { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.swl-modal-title { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.swl-modal-subtitle { margin: .1rem 0 0; color: var(--swl-muted); font-size: .875rem; }
.swl-modal-body, .swl-modal .modal-body { padding: 1.25rem; }
.swl-modal-footer, .swl-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    padding: .9rem 1.25rem;
    border-top: 1px solid var(--swl-border);
}

/* ---------------------------------------------------------------- confirm / error dialog (swl/dialog.j2) */

.swl-dialog-box { --swl-modal-width: 28rem; padding: 1.25rem; gap: 1rem; }
.swl-dialog-header h5 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.1rem; font-weight: 600; }
.swl-dialog-header .bi { font-size: 1.35rem; }
#swl-dialog-msg { white-space: pre-wrap; overflow-wrap: anywhere; }
.swl-dialog-buttons { display: flex; justify-content: flex-end; gap: .5rem; }

.swl-icon-warning { color: var(--swl-warning); }
.swl-icon-danger { color: var(--swl-danger); }
.swl-icon-success { color: var(--swl-success); }
.swl-icon-info { color: var(--swl-info); }

/* ---------------------------------------------------------------- toast (swl/toast.j2) */

.swl-toast[popover] {
    inset: 1rem 1rem auto auto;
    margin: 0;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: .65rem 1rem;
    border: 1px solid var(--swl-border);
    border-radius: var(--swl-radius);
    background: color-mix(in srgb, var(--swl-bg) 88%, transparent);
    color: var(--swl-fg);
    box-shadow: var(--swl-shadow);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(-.5rem);
    transition: opacity .2s, transform .2s, overlay .2s allow-discrete, display .2s allow-discrete;
}
.swl-toast[popover]:popover-open { opacity: 1; transform: none; }
@starting-style {
    .swl-toast[popover]:popover-open { opacity: 0; transform: translateY(-.5rem); }
}

/* ---------------------------------------------------------------- context menu (swl/contextmenu.j2) */

.swl-contextmenu[popover] {
    inset: auto;
    margin: 0;
    min-width: 12rem;
    padding: .3rem 0;
    border: 1px solid var(--swl-border);
    border-radius: var(--swl-radius);
    background: var(--swl-bg);
    color: var(--swl-fg);
    box-shadow: var(--swl-shadow);
}

/* A menu: a list of buttons or links, e.g. inside the context menu */
.swl-menu { display: flex; flex-direction: column; }
.swl-menu > button, .swl-menu > a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .6rem;
    width: 100%;
    margin: 0;
    padding: .45rem .9rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--swl-fg);
    box-shadow: none;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.swl-menu > button:hover, .swl-menu > a:hover, .swl-menu > :focus-visible {
    background: color-mix(in srgb, var(--swl-accent) 12%, transparent);
    color: var(--swl-fg);
}
.swl-menu > .swl-danger, .swl-menu > .swl-danger:hover { color: var(--swl-danger); }
.swl-menu > hr { margin: .3rem 0; border: 0; border-top: 1px solid var(--swl-border); }

/* ---------------------------------------------------------------- account views (account.j2, users.j2) */

.swl-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--swl-subtle-bg);
    color: var(--swl-fg);
    font-weight: 600;
}
.swl-avatar-lg { width: 3rem; height: 3rem; font-size: 1.25rem; }
.swl-avatar-admin { background-color: var(--seecr-orange); color: #fff; }

.swl-section-title { margin: 0 0 .75rem; font-size: 1rem; font-weight: 600; }
.swl-section-title > .bi { color: var(--swl-muted); margin-right: .25rem; }
.swl-note {
    padding: .6rem .9rem;
    border: 1px solid var(--swl-border);
    border-radius: var(--swl-radius);
    background: var(--swl-subtle-bg);
    font-size: .875em;
}
.swl-field > label { display: block; margin-bottom: .3rem; font-weight: 500; }
.swl-field > input { margin-bottom: 0; }
.swl-check { display: flex; align-items: center; gap: .5rem; margin: 0; padding-bottom: .55rem; }
.swl-check > input { margin: 0; }

.swl-list { margin: 0; padding: 0; list-style: none; }
.swl-list > li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--swl-border);
}
.swl-list > li:last-child { border-bottom: 0; }
.swl-list .swl-grow { flex: 1; min-width: 0; }
.swl-badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 1rem;
    background: var(--swl-subtle-bg);
    color: var(--swl-muted);
    font-size: .75rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------- switch: <input type="checkbox" role="switch" class="swl-switch"> */
input[type=checkbox].swl-switch {
    appearance: none;
    position: relative;
    width: 2.1rem;
    height: 1.2rem;
    border: 1px solid var(--swl-border);
    border-radius: 1rem;
    background: var(--swl-subtle-bg);
    margin: 0;
    background-image: none;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .15s, border-color .15s;
}
input[type=checkbox].swl-switch::before {
    content: "";
    position: absolute;
    top: .1rem;
    left: .12rem;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    background: var(--swl-muted);
    transition: transform .15s, background-color .15s;
}
input[type=checkbox].swl-switch:checked { background: var(--swl-accent); background-image: none; border-color: var(--swl-accent); }
input[type=checkbox].swl-switch:checked::before { transform: translateX(.88rem); background: #fff; }
input[type=checkbox].swl-switch:disabled { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- page layout (with any framework, or none) */

.swl-container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }

/* A top bar: <nav class="swl-nav"><div class="swl-container">brand ... buttons</div></nav> */
.swl-nav { margin-bottom: 1.5rem; border-bottom: 1px solid var(--swl-border); background: var(--swl-subtle-bg); }
.swl-nav > .swl-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; min-height: 3.5rem; padding-top: .5rem; padding-bottom: .5rem; }
.swl-brand { font-size: 1.15rem; font-weight: 600; color: var(--swl-fg); }

/* Two or more columns that stack on small screens; .swl-wide takes more room */
.swl-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.5rem; align-items: start; }
@media (min-width: 62rem) {
    .swl-columns:has(> .swl-wide) { grid-template-columns: 7fr 5fr; }
}

.swl-card { border: 1px solid var(--swl-border); border-radius: calc(var(--swl-radius) * 1.5); background: var(--swl-bg); }
.swl-card > header { padding: 0 1rem; border-bottom: 1px solid var(--swl-border); background: var(--swl-subtle-bg); border-radius: calc(var(--swl-radius) * 1.5) calc(var(--swl-radius) * 1.5) 0 0; }
.swl-card > .swl-card-body { padding: 1rem; }

/* Tabs: <nav class="swl-tabs"><button aria-selected="true">One</button><button>Two</button></nav> */
.swl-tabs { display: flex; gap: .25rem; margin-bottom: -1px; }
.swl-tabs > button, .swl-tabs > a {
    margin: 0;
    padding: .65rem .9rem;
    box-shadow: none;
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--swl-muted);
}
.swl-tabs > :hover:not(:disabled), .swl-tabs > :focus { background: none; color: var(--swl-fg); }
.swl-tabs > [aria-selected=true], .swl-tabs > [aria-current=page] { border-bottom-color: var(--swl-accent); color: var(--swl-fg); }

/* A button that looks like a link */
.swl-link, .swl-link:hover, .swl-link:focus {
    display: inline;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--swl-accent);
    font: inherit;
    text-align: left;
    white-space: normal;
    cursor: pointer;
}
.swl-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- framework touches (data-swl-framework on <html>) */

/* Bulma: an icon next to a button's text, and a <select> without Bulma's wrapper <div class="select"> */
[data-swl-framework=bulma] .button > .bi:first-child { margin-inline-end: .4em; }
/* Tabler: buttons are flex boxes, so the space between an icon and the text disappears */
[data-swl-framework=tabler] .btn > .bi:first-child { margin-inline-end: .4em; }
[data-swl-framework=bulma] select:not([multiple], [size]) {
    height: 2.5em;
    padding: 0 2rem 0 .75rem;
    border: 1px solid var(--swl-border);
    border-radius: var(--swl-radius);
    background: var(--swl-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23888' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center / .7rem;
    color: var(--swl-fg);
    font: inherit;
    appearance: none;
}

/* ---------------------------------------------------------------- older helpers, kept for existing apps */

.bg-seecr { background-color: var(--seecr-grey); color: white; }
.bg-seecr a { font-weight: bold; color: white; text-decoration: none; }
.swl-close, .seecr-orange { color: var(--seecr-orange); }
.swl-button, .swl-button-plain { border: 0; background: transparent; color: black; }
.swl-button:hover { transform: scale(1.25); }
.fit { white-space: nowrap; width: 1%; }
.fit form, .fit form button { padding: 0; margin: 0; background: transparent; }
.draggable { cursor: grab; }
.swl-list-row { display: flex; align-items: center; gap: .75rem; width: 100%; margin: 0; }
.swl-icon-button.swl-icon-danger { color: var(--swl-danger); }
.swl-icon-button:disabled { opacity: .4; cursor: not-allowed; background: transparent; }