/*
 * GreenSing's look on plain Bootstrap 5.3 (2026-10-23): Spectrum's look as it is in D:\xampp\htdocs\sing\migration
 * (app/assets/css/app.css: plain Bootstrap 5.3 with its colours toned, a dark slate header, a light icon rail, white cards
 * on a grey sheet, the old app's density - the choices the user made there on 2026-10-20..22). Loaded last
 * (wrap/head.php). Taken over: Spectrum's sections 1-6 and the look-wide rules of its section 7; left out: Spectrum's own
 * pages and frame parts GreenSing has not (region switch, work time, favourites and search in the menu, bug reports,
 * web phone, the header's "more" row).
 *
 *   1. tokens: --sp-* point at Bootstrap's variables (so dark needs nothing of its own), the header's slate, sizes
 *   2. base
 *   3. the frame: header, the icon rail and its fly-outs, the phone menu, the content as one sheet, the footer, the
 *      login page
 *   4. components: the old app's sizes for buttons, badges, field titles (.label), cards, windows, tabs, forms,
 *      tables; the calendar, select2
 *   5. old helper classes the pages still use (bg-red, btn-xs, table-condensed, ...)
 *   6. phones and 1024 px screens
 *   7. look-wide rules (Spectrum's section 7): density, alerts, dark lines, soft badges, tabs, menus, focus
 *
 * The header and the menu keep their old markup (wrap/top.php, wrap/side.php: app-header, top-bar, header-nav,
 * menu-item / menu-link): those names are styled here. The menu (2026-10-26, Spectrum's): sections (side-sec) with
 * groups (side-group), the favourites (side-fav-list) and the search panel; assets/js/side-menu.js.
 */

/* ---------------------------------------------------------------- 1. tokens */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    /* the header (and the phone menu's top bar): Green's dark green in both themes - the colour staff know from the
       old app (sing.css: the open menu item, a selected row), so GreenSing is not mistaken for Spectrum, whose header
       is dark slate (user, 2026-10-23) */
    --sp-frame: #14534c;
    --sp-frame-fg: #ffffff;
    --sp-frame-muted: rgba(255, 255, 255, .85);
    --sp-frame-hover: rgba(255, 255, 255, .10);
    --sp-frame-on-bg: rgba(255, 255, 255, .16);
    --sp-frame-on-fg: #ffffff;
    /* the rail and the phone menu: the page's colours */
    --sp-rail-bg: var(--bs-body-bg);
    --sp-rail-line: var(--bs-border-color);
    --sp-rail-fg: var(--bs-secondary-color);
    --sp-rail-text: var(--bs-emphasis-color);
    --sp-rail-hover-bg: var(--bs-secondary-bg);
    --sp-rail-on-bg: var(--bs-primary-bg-subtle);
    --sp-rail-on-fg: var(--bs-primary-text-emphasis);
    /* the page and its parts: Bootstrap's own */
    --sp-page: var(--bs-tertiary-bg);
    --sp-surface: var(--bs-body-bg);
    --sp-sheet: var(--bs-body-bg);   /* the content's sheet, under the cards (a shade off them: "more contrast", below) */
    --sp-card-shadow: none;
    --sp-head: var(--bs-tertiary-bg);
    --sp-line: var(--bs-border-color);
    --sp-row-line: var(--bs-border-color-translucent);
    --sp-text: var(--bs-body-color);
    --sp-muted: var(--bs-secondary-color);
    --sp-field: var(--bs-body-bg);
    --sp-field-line: var(--bs-border-color);
    --sp-primary: var(--bs-primary);
    --sp-primary-hover: var(--bs-link-hover-color);
    --sp-primary-fg: #ffffff;
    --sp-primary-rgb: var(--bs-primary-rgb);
    --sp-soft-bg: var(--bs-primary-bg-subtle);
    --sp-soft-fg: var(--bs-primary-text-emphasis);
    --sp-shadow: var(--bs-box-shadow-sm);
    --sp-shadow-pop: var(--bs-box-shadow);
    --sp-r-card: var(--bs-border-radius-lg);
    --sp-r-ctl: var(--bs-border-radius);
    --sp-ok-bg: var(--bs-success-bg-subtle);
    --sp-ok-fg: var(--bs-success-text-emphasis);
    --sp-bad-bg: var(--bs-danger-bg-subtle);
    --sp-bad-fg: var(--bs-danger-text-emphasis);
    --sp-warn-bg: var(--bs-warning-bg-subtle);
    --sp-warn-fg: var(--bs-warning-text-emphasis);
    --sp-info-bg: var(--bs-info-bg-subtle);
    --sp-info-fg: var(--bs-info-text-emphasis);
    --sp-violet-fg: var(--bs-purple);
    --sp-grey-bg: var(--bs-secondary-bg-subtle);
    --sp-grey-fg: var(--bs-secondary-text-emphasis);
    --sp-success: var(--bs-success);
    --sp-success-hover: var(--bs-success-text-emphasis);
    --sp-danger: var(--bs-danger);
    --sp-danger-hover: var(--bs-danger-text-emphasis);
    --sp-warning: var(--bs-warning);
    --sp-warning-fg: #000000;
    --sp-info: var(--bs-info);
    --sp-info-hover: var(--bs-info-text-emphasis);
    --sp-count: var(--bs-danger);

    /* sizes: the old app's density */
    --sp-header-h: 46px;
    --sp-stripe-h: 0px;
    --sp-rail-w: 52px;
    --sp-fly-w: 18rem;
    --sp-footer-h: 38px;
    --bs-body-font-size: .8125rem;

    /* sing.css's old palette (its colour rules follow Bootstrap's) */
    --primary-color: var(--bs-primary);
    --danger-color: var(--bs-danger);
    --success-color: var(--bs-success);
    --warning-color: var(--bs-warning);
    --purple-color: var(--bs-purple);
}

/* the theme colours toned down: Bootstrap's hues at about a third of their saturation and darker (user, 2026-10-21:
   "colors are way 2 bright they need toning 70% less" - the first, lighter tones made the whole app look foggy:
   light mid-tones under white text) - then richer again (2026-10-22: staff found the theme pale, three times): close to
   Bootstrap's own, a little darker so white text on them stays readable - text-*, bg-*, text-bg-* (badges), links
   and focus follow the variables, the buttons get theirs below */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    --bs-primary: #0b5ed7;
    --bs-primary-rgb: 11, 94, 215;
    --bs-success: #13784a;
    --bs-success-rgb: 19, 120, 74;
    --bs-danger: #cc2333;
    --bs-danger-rgb: 204, 35, 51;
    --bs-warning: #f7b30c;
    --bs-warning-rgb: 247, 179, 12;
    --bs-info: #0e7d94;
    --bs-info-rgb: 14, 125, 148;
    --bs-link-color: #0b5ed7;
    --bs-link-color-rgb: 11, 94, 215;
    --bs-link-hover-color: #0847a3;
    --bs-link-hover-color-rgb: 8, 71, 163;
    --bs-focus-ring-color: rgba(11, 94, 215, .25);
}

/* their light variants (alerts, list-group items, the rail's open section, *-subtle / *-emphasis helpers) from those
   hues: text = shade 65 %, background = tint 60 %, border = tint 30 % (Bootstrap's tint 80 / 60 looked washed out) */
:root,
[data-bs-theme=light] {
    --bs-primary-text-emphasis: #04214b;
    --bs-primary-bg-subtle: #9dbfef;
    --bs-primary-border-subtle: #548ee3;
    --bs-success-text-emphasis: #072a1a;
    --bs-success-bg-subtle: #a1c9b7;
    --bs-success-border-subtle: #5aa180;
    --bs-danger-text-emphasis: #470c12;
    --bs-danger-bg-subtle: #eba7ad;
    --bs-danger-border-subtle: #db6570;
    --bs-warning-text-emphasis: #563f04;
    --bs-warning-bg-subtle: #fce19e;
    --bs-warning-border-subtle: #f9ca55;
    --bs-info-text-emphasis: #052c34;
    --bs-info-bg-subtle: #9fcbd4;
    --bs-info-border-subtle: #56a4b4;
}

/* dark: text = tint 45 %, background = shade 60 %, border = shade 30 % */
[data-bs-theme=dark] {
    --bs-link-color: #8fb0dc;
    --bs-link-color-rgb: 143, 176, 220;
    --bs-link-hover-color: #b3cae9;
    --bs-link-hover-color-rgb: 179, 202, 233;
    --bs-primary-text-emphasis: #79a6e9;
    --bs-primary-bg-subtle: #042656;
    --bs-primary-border-subtle: #084297;
    --bs-success-text-emphasis: #7db59b;
    --bs-success-bg-subtle: #08301e;
    --bs-success-border-subtle: #0d5434;
    --bs-danger-text-emphasis: #e3868f;
    --bs-danger-bg-subtle: #520e14;
    --bs-danger-border-subtle: #8f1924;
    --bs-warning-text-emphasis: #fbd579;
    --bs-warning-bg-subtle: #634805;
    --bs-warning-border-subtle: #ad7d08;
    --bs-info-text-emphasis: #7ab8c4;
    --bs-info-bg-subtle: #06323b;
    --bs-info-border-subtle: #0a5868;
}

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #0b5ed7;
    --bs-btn-border-color: #0b5ed7;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0951b9;
    --bs-btn-hover-border-color: #0951b9;
    --bs-btn-focus-shadow-rgb: 11, 94, 215;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0847a3;
    --bs-btn-active-border-color: #0847a3;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #0b5ed7;
    --bs-btn-disabled-border-color: #0b5ed7;
}

.btn-outline-primary {
    --bs-btn-color: #0b5ed7;
    --bs-btn-border-color: #0b5ed7;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0b5ed7;
    --bs-btn-focus-shadow-rgb: 11, 94, 215;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0b5ed7;
    --bs-btn-active-border-color: #0b5ed7;
    --bs-btn-disabled-color: #0b5ed7;
    --bs-btn-disabled-border-color: #0b5ed7;
}

.btn-success {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #13784a;
    --bs-btn-border-color: #13784a;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #106740;
    --bs-btn-hover-border-color: #106740;
    --bs-btn-focus-shadow-rgb: 19, 120, 74;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0e5b38;
    --bs-btn-active-border-color: #0e5b38;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #13784a;
    --bs-btn-disabled-border-color: #13784a;
}

.btn-outline-success {
    --bs-btn-color: #13784a;
    --bs-btn-border-color: #13784a;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #13784a;
    --bs-btn-hover-border-color: #13784a;
    --bs-btn-focus-shadow-rgb: 19, 120, 74;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #13784a;
    --bs-btn-active-border-color: #13784a;
    --bs-btn-disabled-color: #13784a;
    --bs-btn-disabled-border-color: #13784a;
}

.btn-danger {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #cc2333;
    --bs-btn-border-color: #cc2333;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #af1e2c;
    --bs-btn-hover-border-color: #af1e2c;
    --bs-btn-focus-shadow-rgb: 204, 35, 51;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #9b1b27;
    --bs-btn-active-border-color: #9b1b27;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #cc2333;
    --bs-btn-disabled-border-color: #cc2333;
}

.btn-outline-danger {
    --bs-btn-color: #cc2333;
    --bs-btn-border-color: #cc2333;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #cc2333;
    --bs-btn-hover-border-color: #cc2333;
    --bs-btn-focus-shadow-rgb: 204, 35, 51;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #cc2333;
    --bs-btn-active-border-color: #cc2333;
    --bs-btn-disabled-color: #cc2333;
    --bs-btn-disabled-border-color: #cc2333;
}

.btn-warning {
    --bs-btn-color: #1f1a0e;
    --bs-btn-bg: #f7b30c;
    --bs-btn-border-color: #f7b30c;
    --bs-btn-hover-color: #1f1a0e;
    --bs-btn-hover-bg: #d49a0a;
    --bs-btn-hover-border-color: #d49a0a;
    --bs-btn-focus-shadow-rgb: 247, 179, 12;
    --bs-btn-active-color: #1f1a0e;
    --bs-btn-active-bg: #bc8809;
    --bs-btn-active-border-color: #bc8809;
    --bs-btn-disabled-color: #1f1a0e;
    --bs-btn-disabled-bg: #f7b30c;
    --bs-btn-disabled-border-color: #f7b30c;
}

.btn-outline-warning {
    --bs-btn-color: #f7b30c;
    --bs-btn-border-color: #f7b30c;
    --bs-btn-hover-color: #1f1a0e;
    --bs-btn-hover-bg: #f7b30c;
    --bs-btn-hover-border-color: #f7b30c;
    --bs-btn-focus-shadow-rgb: 247, 179, 12;
    --bs-btn-active-color: #1f1a0e;
    --bs-btn-active-bg: #f7b30c;
    --bs-btn-active-border-color: #f7b30c;
    --bs-btn-disabled-color: #f7b30c;
    --bs-btn-disabled-border-color: #f7b30c;
}

.btn-info {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #0e7d94;
    --bs-btn-border-color: #0e7d94;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0c6c7f;
    --bs-btn-hover-border-color: #0c6c7f;
    --bs-btn-focus-shadow-rgb: 14, 125, 148;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0b5f70;
    --bs-btn-active-border-color: #0b5f70;
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #0e7d94;
    --bs-btn-disabled-border-color: #0e7d94;
}

.btn-outline-info {
    --bs-btn-color: #0e7d94;
    --bs-btn-border-color: #0e7d94;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #0e7d94;
    --bs-btn-hover-border-color: #0e7d94;
    --bs-btn-focus-shadow-rgb: 14, 125, 148;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #0e7d94;
    --bs-btn-active-border-color: #0e7d94;
    --bs-btn-disabled-color: #0e7d94;
    --bs-btn-disabled-border-color: #0e7d94;
}

/* the form controls' checked and focus states in the toned primary */
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: rgba(var(--bs-primary-rgb), .6);
    box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.pagination {
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    /* "Почетна / Претходна" on the first page: plain, not solid grey blocks (the darker --bs-secondary-bg of "more
       contrast", section 7, filled them) */
    --bs-pagination-disabled-bg: var(--bs-body-bg);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-primary);
}


/* ---------------------------------------------------------------- 2. base */
html, body {
    font-family: var(--bs-body-font-family);
    background-color: var(--sp-page);
    color: var(--sp-text);
}

body {
    font-size: var(--bs-body-font-size);
}

/* a card title (often an h4 holding buttons and badges) at Looper's 1rem, not h4's 1.5rem */
.card-title {
    font-size: 1rem;
}

/* ---------------------------------------------------------------- 3. the frame */
/* header */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;   /* under sing's windows (sing.css: modal 105, backdrop 104, a second one 106) */
    min-height: var(--sp-header-h);
    background: var(--sp-frame) !important;
    color: var(--sp-frame-fg);
}

.app-header .top-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--sp-header-h);
    padding: 0 12px;
}

.app-header .top-bar-brand {
    display: flex;
    align-items: center;
    align-self: stretch;
    width: auto;   /* sing.css: 240 px, Looper's rail width - the logo is 107 px */
    padding: 0;
    height: auto;
}

/* Green's apple (assets/images/green-mark.png: white, cut from green-logo.png) beside its name, GREEN, spaced as the
   logo's own letters */
.app-header .top-bar-brand img,
.aside-brand img {
    width: 28px;
    height: 28px;
    max-width: none;
}

.top-bar-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sp-frame-fg) !important;
    text-decoration: none !important;
    margin-right: 6px;
}

.top-bar-brand-name {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .12em;
}

.top-bar-list {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
}

.top-bar-item {
    display: flex;
    align-items: center;
}

.top-bar-item-full {
    flex: 1 1 260px;
    min-width: 0;
    gap: 6px;
}

.top-bar-item-right {
    margin-left: auto;
    gap: 4px;
}

.app-header .header-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-header .header-nav > .nav-item > .nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    color: var(--sp-frame-muted);
    font-weight: 600;
    white-space: nowrap;
}

.app-header .header-nav > .nav-item > .nav-link:hover,
.app-header .header-nav > .nav-item > .nav-link:focus-visible,
.app-header .header-nav > .nav-item > .nav-link.show {
    background: var(--sp-frame-hover);
    color: var(--sp-frame-fg);
}

.app-header .header-nav > .nav-item > .nav-link.bg-danger {
    color: #fff;
}

/* counts on the header's icons: a small solid badge in the corner */
.app-header .header-nav .nav-link > .badge {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--sp-frame);
    border-radius: 999px;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 14px;
}

.app-header .header-nav .nav-link > .badge.text-bg-success {
    display: none;   /* nothing waiting: no badge */
}

.app-header .header-nav .nav-link > .badge.text-bg-danger {
    background: var(--sp-count) !important;
    color: #fff !important;
}

/* the search in the header */
.top-bar-search {
    flex: 1 1 auto;
    max-width: 540px;
}

.input-group-search {
    position: relative;
    flex-wrap: nowrap;
}

.input-group-search .input-group-prepend {
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    width: auto !important;
}

.input-group-search .input-group-text {
    border: 0;
    background: transparent;
    color: var(--sp-frame-muted);
    padding: 0 10px;
}

.input-group-search > .form-control {
    height: 32px;
    padding-left: 40px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--sp-r-ctl) !important;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.input-group-search > .form-control::placeholder {
    color: var(--sp-frame-muted);
}

.input-group-search > .form-control:focus {
    border-color: rgba(255, 255, 255, .45);
    background: rgba(255, 255, 255, .14);
    box-shadow: none;
}

/* the phone menu button: only on small screens (its d-*-none classes) */
.app-header .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--sp-r-ctl);
    background: transparent;
    color: var(--sp-frame-fg);
    font-size: 18px;
}

.app-header .hamburger .hamburger-box {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
}

.app-header .hamburger .hamburger-inner,
.app-header .hamburger .hamburger-inner::before,
.app-header .hamburger .hamburger-inner::after {
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}

.app-header .hamburger .hamburger-inner {
    top: 6px;
}

.app-header .hamburger .hamburger-inner::before {
    top: -6px;
}

.app-header .hamburger .hamburger-inner::after {
    top: 6px;
}

/* the account button */
.app-header .btn-account {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin-left: 4px;
    padding: 0 10px 0 3px;
    border: 0;
    border-radius: 999px;
    background: var(--sp-frame-hover);
    color: var(--sp-frame-fg);
    text-align: left;
}

.app-header .user-avatar img {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

.app-header .account-summary {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    padding-right: 4px !important;
}

.app-header .account-name {
    font-weight: 600;
}

.app-header .account-description {
    font-size: 12px;
    color: var(--sp-frame-muted);
}

/* the header's menus (Looper's names kept: dropdown-menu-rich, dropdown-scroll, dropdown-item-body) */
.dropdown-menu-rich {
    width: 360px;
    max-width: calc(100vw - 16px);
    padding: 6px;
}

.dropdown-arrow {
    display: none;
}

.dropdown-scroll {
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

.dropdown-item-body {
    white-space: normal;
}

.flex-body {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-icon {
    width: 18px;
    margin-right: 8px;
    text-align: center;
    color: var(--sp-muted);
}

/* the icon rail (768 px and up) */
.app-aside {
    --bs-offcanvas-width: min(320px, 86vw);
    --bs-offcanvas-bg: var(--sp-rail-bg);
    color: var(--sp-rail-text);
}

@media (min-width: 768px) {
    .app-aside.offcanvas-md {
        position: fixed;
        top: calc(var(--sp-header-h) + var(--sp-stripe-h));
        left: 0;
        bottom: 0;
        z-index: 99;
        width: var(--sp-rail-w);
        background-color: var(--sp-rail-bg) !important;
        border-right: 1px solid var(--sp-rail-line);
    }

    .app-aside .aside-content,
    .app-aside .aside-menu {
        height: 100%;
    }

    .app-aside .aside-menu {
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: none;
    }

    .app-aside .aside-menu::-webkit-scrollbar {
        display: none;
    }

    #stacked-menu > .menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        margin: 0;
        padding: 8px 0;
        list-style: none;
    }

    #stacked-menu > .menu > li > a.menu-link {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 10px;
        color: var(--sp-rail-fg);
        text-decoration: none;
    }

    #stacked-menu > .menu > li > a.menu-link > .menu-icon {
        width: auto;
        margin: 0;
        font-size: 17px;
    }

    #stacked-menu > .menu > li > a.menu-link > .menu-text,
    #stacked-menu > .menu > li > a.menu-link > .side-back {
        display: none;
    }

    #stacked-menu > .menu > li > a.menu-link:hover,
    #stacked-menu > .menu > li.has-open > a.menu-link {
        background: var(--sp-rail-hover-bg);
        color: var(--sp-rail-text);
    }

    /* the open page's section / page */
    #stacked-menu > .menu > li.activeLi > a.menu-link,
    #stacked-menu > .menu > li > a.menu-link.active {
        background: var(--sp-rail-on-bg);
        color: var(--sp-rail-on-fg);
    }


    /* a section's fly-out (side-menu.js places it: top, max-height) */
    #stacked-menu > .menu > li.has-child > .menu {
        display: none;
        position: fixed;
        left: calc(var(--sp-rail-w) + 6px);
        z-index: 1040;
        width: var(--sp-fly-w);
        margin: 0;
        padding: 5px;
        overflow-y: auto;
        list-style: none;
        background: var(--sp-surface);
        color: var(--sp-text);
        border-radius: 6px;
        box-shadow: 0 12px 32px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .08);
    }

    #stacked-menu > .menu > li.has-child.has-open > .menu {
        display: block;
    }

    /* columns as the old menu: no gap, a thin line between them */
    #stacked-menu > .menu > li.has-child > .menu.side-cols-2,
    #stacked-menu > .menu > li.has-child > .menu.side-cols-3 {
        column-gap: 0;
        column-rule: 1px solid rgba(127, 127, 127, .18);
    }

    #stacked-menu > .menu > li.has-child > .menu.side-cols-2 {
        width: calc(var(--sp-fly-w) * 2);
        column-count: 2;
    }

    #stacked-menu > .menu > li.has-child > .menu.side-cols-3 {
        width: calc(var(--sp-fly-w) * 3);
        max-width: calc(100vw - var(--sp-rail-w) - 24px);
        column-count: 3;
    }

    .side-sec-menu > .menu-item,
    .side-group,
    .side-group-links > .menu-item {
        break-inside: avoid;
    }

    /* a section with one group (side-menu.js): the group may split between its pages, else it filled one column and
       left the other empty */
    .side-one-group > .side-group {
        break-inside: auto;
    }

    .side-group-title {
        break-after: avoid;
    }

    /* after the search and the favourites, a thin line before the sections */
    #stacked-menu > .menu > li.side-fav {
        padding-bottom: 8px;
        margin-bottom: 2px;
        border-bottom: 1px solid var(--sp-rail-line);
    }
}

/* inside a fly-out (and the phone menu): the pages - the old menu's look (Spectrum, user 2026-10-21: "first picture
   way better"): black 13 px names and 18 px icons on 30 px rows */
.side-sec-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.side-sec-menu .menu-item {
    position: relative;
    list-style: none;
}

/* 30 px rows as the old menu (user 2026-10-21: 36 px too airy, 23 px too tight); phones keep 44 px (below) */
#stacked-menu .side-sec-menu a.menu-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
    padding: 6px 30px 6px 16px;
    font-size: 13px;
    line-height: 1.3;
    border-radius: 4px;
    color: var(--bs-body-color);
    text-decoration: none;
}

#stacked-menu .side-sec-menu a.menu-link .menu-icon {
    flex: none;
    width: 22px;
    font-size: 16px;
    text-align: center;
    color: var(--bs-body-color);
}

#stacked-menu .side-sec-menu a.menu-link:hover {
    background: rgba(var(--bs-primary-rgb), .06);
    color: var(--bs-body-color);
}

/* the page that is open: light background, the theme's blue, a bar on the left (sing.css: .menu-item .active white on
   solid blue, !important - with the hover's light blue the name vanished) */
#stacked-menu .side-sec-menu a.menu-link.active {
    background-color: rgba(var(--bs-primary-rgb), .09) !important;
    color: var(--bs-primary) !important;
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

#stacked-menu .side-sec-menu a.menu-link.active .menu-icon {
    color: var(--bs-primary);
}

[data-bs-theme=dark] #stacked-menu .side-sec-menu a.menu-link.active .menu-icon {
    color: var(--bs-primary-text-emphasis);
}

[data-bs-theme=dark] #stacked-menu .side-sec-menu a.menu-link.active {
    background-color: rgba(var(--bs-primary-rgb), .3) !important;
    color: var(--bs-primary-text-emphasis) !important;
    box-shadow: inset 3px 0 0 var(--bs-primary-text-emphasis);
}

.side-sec-menu a.menu-link .badge {
    margin-left: auto;
}

/* a section's groups (Spectrum's side.php): a light title over its pages, a thin line between groups */
.side-group {
    list-style: none;
    padding: 0 0 4px;
}

.side-group + .side-group {
    border-top: 1px solid rgba(127, 127, 127, .18);
}

.side-cols-2 .side-group + .side-group,
.side-cols-3 .side-group + .side-group {
    border-top: 0;
}

.side-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: .6rem 1rem .2rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sp-text);
    opacity: .6;
}

.side-group-title .menu-icon {
    display: none;
}

.side-group-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.side-fav-empty {
    padding: 10px;
    color: var(--sp-muted);
    font-size: 13px;
}

/* the star next to a page (favourites): no box, half seen on the row's hover, whole on its own hover or as a favourite */
.side-star {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sp-muted);
    opacity: 0;
}

#stacked-menu .side-star,
#stacked-menu .side-star:hover,
#stacked-menu .side-star:focus {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--bs-body-color);
    font-size: 12px;
}

.menu-item:hover > .side-star,
.side-star:focus-visible {
    opacity: .5;
}

#stacked-menu .side-star:hover,
.side-star.is-fav {
    opacity: 1;
}

#stacked-menu .side-star.is-fav {
    color: #e0a526;
}

/* a section's count on its rail icon (the counts of its pages) */
.side-sec-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 2px solid var(--sp-rail-bg);
    border-radius: 999px;
    background: var(--sp-count) !important;
    color: #fff !important;
    font-size: 10px;
    line-height: 14px;
}

/* the menu search (side-menu.js puts the panel next to the rail) */
.side-search-panel {
    position: fixed;
    z-index: 1045;
    width: 360px;
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - var(--sp-header-h) - 40px);
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: var(--sp-surface);
    color: var(--sp-text);
    border-radius: var(--sp-r-card);
    box-shadow: var(--sp-shadow-pop);
}

.side-search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.side-search-box > .fas {
    position: absolute;
    left: 12px;
    color: var(--sp-muted);
}

.side-search-box > input {
    height: 40px;
    padding-left: 36px;
}

.side-search-hits {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
}

.side-search-hits a.menu-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    padding: 7px 10px;
    border-radius: var(--sp-r-ctl);
    color: var(--sp-text);
    text-decoration: none;
}

.side-search-hits .menu-icon {
    width: 18px;
    text-align: center;
    color: var(--sp-muted);
}

.side-search-where {
    flex: 0 0 100%;
    padding-left: 28px;
    font-size: 12px;
    color: var(--sp-muted);
}

.side-search-hits li.is-picked a.menu-link,
.side-search-hits a.menu-link:hover {
    background: var(--sp-soft-bg);
    color: var(--sp-soft-fg);
}

.side-search-hits a.menu-link:hover .menu-text {
    color: inherit !important;
}

.side-search-none {
    padding: 10px;
    color: var(--sp-muted);
}

/* the phone menu: the same list in the slide-in panel, names shown, a section opens on its own; its top bar dark
   like the header (as Frameshift's) */
.app-aside .offcanvas-header {
    background: var(--sp-frame);
    padding: 12px 16px;
    border-bottom: 1px solid var(--sp-rail-line);
}

.aside-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .12em;
    color: var(--sp-frame-fg);
}

/* the footer's name: Green by Sing */
.foot-brand b {
    color: var(--sp-text);
}

@media (max-width: 767.98px) {
    .app-aside .aside-content,
    .app-aside .aside-menu {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    #stacked-menu > .menu {
        margin: 0;
        padding: 8px;
        list-style: none;
    }

    #stacked-menu > .menu > li > a.menu-link {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 48px;
        padding: 0 12px;
        border-radius: var(--sp-r-ctl);
        color: var(--sp-rail-text);
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
    }

    #stacked-menu > .menu > li > a.menu-link .menu-icon {
        width: 22px;
        text-align: center;
        color: var(--sp-rail-fg);
    }

    #stacked-menu > .menu > li > a.menu-link .menu-text {
        color: inherit !important;
    }

    #stacked-menu > .menu > li.has-child > .menu .menu-text {
        color: var(--sp-text) !important;
    }

    #stacked-menu > .menu > li.activeLi > a.menu-link,
    #stacked-menu > .menu > li > a.menu-link:hover {
        background: var(--sp-rail-hover-bg);
    }

    #stacked-menu > .menu > li > a.menu-link .side-back {
        display: none;
    }

    #stacked-menu > .menu > li.side-drill-open > a.menu-link .side-back {
        display: inline-block;
    }

    #stacked-menu > .menu > li.has-child > .menu {
        display: none;
        margin: 4px 0 8px;
        padding: 6px;
        border-radius: var(--sp-r-card);
        background: var(--sp-surface);
        color: var(--sp-text);
    }

    #stacked-menu > .menu > li.side-drill-open > .menu {
        display: block;
    }

    #stacked-menu.side-drilled > .menu > li:not(.side-drill-open) {
        display: none;
    }

    /* (#stacked-menu: the 30 px rows above have it too, so without it they won and the rows stayed 37 px high) */
    #stacked-menu .side-sec-menu a.menu-link {
        min-height: 44px;
        font-size: 15px;
    }

    .side-star {
        opacity: 1;
    }
}

/* the content */
.app-main {
    padding-top: calc(var(--sp-header-h) + var(--sp-stripe-h));
    min-height: 100vh;
}

@media (min-width: 768px) {
    .app-main {
        margin-left: var(--sp-rail-w);
    }
}

/* sing.css still pads the content for Looper's rail (.app-main 3.15rem) and the old footer (.wrapper 53px) */
.app-main {
    padding-left: 0 !important;
}

/* flow-root: the sheet's bottom margin (room for the fixed footer) stays inside, so it counts in the page's scroll height -
   collapsed out through .page / .wrapper it was lost, and a page taller than the window ended under the footer */
.app-main > .wrapper {
    margin-bottom: 0 !important;
    display: flow-root;
}

/* the page: one sheet from the rail to the right edge and down to the footer, whatever its content's height (the
   empty part of a short page is the sheet's, not grey page); the cards on it are white, framed by a line and barely
   lifted (2026-10-22: on a white sheet they did not stand out - "the theme is pale") */
/* (#app-content: sing.css's #app-content 60vh outweighs a class) */
.page-inner, #app-content.page-inner {
    min-height: calc(100vh - var(--sp-header-h) - var(--sp-stripe-h) - var(--sp-footer-h) - 12px);
    margin: 6px 6px calc(var(--sp-footer-h) + 6px) !important;
    padding: 6px !important;
    background: var(--sp-sheet);
    border-radius: 12px;
    box-shadow: var(--sp-shadow);
}

.page-inner .card {
    box-shadow: var(--sp-card-shadow);
    border: 1px solid var(--sp-line);
}

/* the footer: light / dark, the name, the bug reports' counts; the corner tools and the chat float on the right */
.footko {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 98;
    height: var(--sp-footer-h);
    margin-left: 0;
    width: auto;
    padding: 0 12px;   /* the toggle in line with the page's content: sheet margin + padding (4 px under 1200, below) */
    background: var(--sp-surface) !important;
    color: var(--sp-muted);
    border-top: 1px solid var(--sp-line);
    text-align: left;
    font-size: 13px;
}

@media (min-width: 768px) {
    .footko {
        left: var(--sp-rail-w);
    }
}

@media (max-width: 1199.98px) {
    .footko {
        padding: 0 4px;
    }
}

/* the line under the border (the footer is border-box), sing.css's .navbar-text margin-left 14px dropped */
.footko div,
.footko .navbar-text {
    height: 100%;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.footko a {
    color: var(--sp-soft-fg);
}

.foot-theme {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-right: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--sp-soft-bg);
    color: var(--sp-soft-fg);
    font-size: 13px;
    line-height: 1;
}

.foot-theme:hover {
    background: var(--sp-rail-hover-bg);
}


[data-bs-theme=light] .theme-light-icon,
[data-bs-theme=dark] .theme-dark-icon {
    display: none;
}

/* the login page (modules/login/pages/login.php), Spectrum's in Green's colours: one card - the green brand side (the
   white apple + GREEN, tagline, signal bars) beside the form (labels above the fields, icons inside, show-password eye);
   phones get the form only, the coloured logo on top. The page's primary colour is Green's own green */
main.auth {
    --auth-green: #14534c;
    --sp-primary: #1c7a5f;
    --sp-primary-rgb: 28, 122, 95;
    --bs-primary: #1c7a5f;
    --bs-primary-rgb: 28, 122, 95;
    --sp-soft-bg: rgba(28, 122, 95, .1);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px 16px;
    background:
        radial-gradient(60rem 30rem at 0% 0%, rgba(var(--sp-primary-rgb), .10), transparent 60%),
        radial-gradient(50rem 30rem at 100% 100%, rgba(52, 211, 153, .10), transparent 60%),
        var(--sp-page);
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(880px, 100%);
    background: var(--sp-surface);
    border: 1px solid var(--sp-line);
    border-radius: 18px;
    box-shadow: 0 24px 60px -20px rgba(20, 83, 76, .35), var(--sp-shadow);
    overflow: hidden;
}

.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 48px 40px 120px;
    color: #ffffff;
    background:
        radial-gradient(28rem 18rem at 100% 0%, rgba(110, 231, 183, .25), transparent 70%),
        linear-gradient(160deg, #1d6e63 0%, var(--auth-green) 55%, #0b302b 100%);
    overflow: hidden;
}

.auth-brand-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.auth-brand-logo img {
    width: 64px;
    height: 64px;
}

.auth-brand-logo span {
    font-size: 38px;
    font-weight: 800;
    letter-spacing: .12em;
}

.auth-brand-text {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

.auth-bars {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: 14px;
    height: 96px;
}

.auth-bars span {
    flex: 1;
    border-radius: 10px 10px 0 0;
    opacity: .9;
}

.auth-bars span:nth-child(1) { height: 20%; background: rgba(255, 255, 255, .35); }
.auth-bars span:nth-child(2) { height: 40%; background: rgba(255, 255, 255, .5); }
.auth-bars span:nth-child(3) { height: 60%; background: #6ee7b7; }
.auth-bars span:nth-child(4) { height: 80%; background: #34d399; }
.auth-bars span:nth-child(5) { height: 100%; background: #a3e635; }

.auth-form {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 64px 44px 36px;
    color: var(--sp-text);
    text-align: left;
}

/* the language picker: MK / EN / AL in the form's top corner */
.auth-lang {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    color: var(--sp-muted);
    font-size: 12px;
}

.auth-lang .fa {
    margin: 0 4px 0 6px;
}

.auth-lang button {
    min-width: 34px;
    padding: 3px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sp-muted);
    font-weight: 600;
    cursor: pointer;
}

.auth-lang button:hover {
    color: var(--sp-primary);
}

.auth-lang button[aria-pressed=true] {
    background: var(--sp-primary);
    color: var(--sp-primary-fg);
}

.auth-form-logo {
    display: none;
    width: 96px;
    max-width: 40%;
    height: auto;
    margin: 0 auto 24px;
}

.auth-title {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

.auth-sub {
    margin: 0 0 28px;
    color: var(--sp-muted);
    font-size: 14px;
}

.auth-label {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text);
}

.auth-field {
    position: relative;
    margin-bottom: 18px;
}

/* 16px text: iPhone does not zoom into the field */
.auth-field > .form-control {
    height: 46px;
    padding-left: 42px;
    font-size: 16px;
    background: var(--sp-field);
    border-color: var(--sp-field-line);
    border-radius: 10px;
}

.auth-field > .form-control:focus {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 4px rgba(var(--sp-primary-rgb), .15);
}

.auth-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sp-muted);
    pointer-events: none;
}

.auth-field:focus-within .auth-icon {
    color: var(--sp-primary);
}

.auth-field:has(.auth-eye) > .form-control {
    padding-right: 46px;
}

.auth-eye {
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    width: 40px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sp-muted);
    cursor: pointer;
}

.auth-eye:hover,
.auth-eye[aria-pressed=true] {
    color: var(--sp-primary);
    background: var(--sp-soft-bg);
}

/* the SMS code step (login.js): wide digits, the number and "send a new code" around it */
.auth-field > #codeSMS {
    letter-spacing: .4em;
    font-weight: 600;
}

.auth-code-to {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--sp-muted);
}

.auth-code-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: -10px 0 18px;
    font-size: 13px;
}

.auth-form .auth-submit {
    --bs-btn-line-height: 46px;
    --bs-btn-font-size: 15px;
    --bs-btn-border-radius: 10px;
    --bs-btn-bg: var(--sp-primary);
    --bs-btn-border-color: var(--sp-primary);
    --bs-btn-hover-bg: var(--auth-green);
    --bs-btn-hover-border-color: var(--auth-green);
    --bs-btn-active-bg: var(--auth-green);
    --bs-btn-active-border-color: var(--auth-green);
    --bs-btn-focus-shadow-rgb: var(--sp-primary-rgb);
    width: 100%;
    margin-top: 6px;
    box-shadow: 0 8px 20px -8px rgba(var(--sp-primary-rgb), .7);
}

.auth-submit .fa {
    margin-right: 6px;
}

.auth-msg:empty {
    display: none;
}

.auth-msg {
    margin-top: 16px;
}

.auth-msg .alert {
    margin: 0;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 10px;
}

.auth-footer {
    color: var(--sp-muted);
    font-size: 12px;
}

@media (max-width: 767.98px) {
    main.auth {
        justify-content: flex-start;
        padding-top: 8vh;
    }

    .auth-shell {
        grid-template-columns: minmax(0, 1fr);
        width: min(440px, 100%);
    }

    .auth-brand {
        display: none;
    }

    .auth-form {
        padding: 32px 22px 26px;
    }

    .auth-form-logo {
        display: block;
    }

    .auth-lang {
        position: static;
        align-self: flex-end;
        margin: -14px -8px 14px 0;
    }

    .auth-title {
        font-size: 22px;
        text-align: center;
    }

    .auth-sub {
        text-align: center;
        margin-bottom: 22px;
    }
}


/* ---------------------------------------------------------------- 4. components */
/* buttons: the palette through Bootstrap's own button variables */
/* the old app's density (Looper's fixed line heights): 30 px buttons, small 28 px, xs 22 px; 13 px text */
.btn {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: .65rem;
    --bs-btn-font-size: .8125rem;
    --bs-btn-line-height: 28px;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 8px;
    --bs-btn-focus-shadow-rgb: var(--sp-primary-rgb);
}

.btn-sm, .btn-group-sm > .btn {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: .55rem;
    --bs-btn-font-size: .78rem;
    --bs-btn-line-height: 26px;
    --bs-btn-border-radius: 7px;
}

/* sing.css fixes small buttons at 2rem (32 px) from 768 px up, and gives a small group's buttons the xs line height
   (1.6667: 22 px groups beside 28 px small buttons - the shift plan's week arrows, the map's layers) */
.btn.btn-sm, .btn-group-sm > .btn {
    height: auto;
    font-size: .78rem;
}

.btn-group-sm > .btn {
    line-height: var(--bs-btn-line-height);
}

.btn-lg, .btn-group-lg > .btn {
    --bs-btn-padding-y: 0;
    --bs-btn-line-height: 36px;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: .9375rem;
}

/* sing.css paints .btn-secondary dark grey (a plain background, not the button's variables) */
.btn.btn-secondary {
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.btn.btn-secondary:hover {
    background-color: var(--bs-btn-hover-bg);
    color: var(--bs-btn-hover-color);
}

/* sing.css's hover / focus colours of the coloured buttons (#062e70, #0f9135, #9d0202, #b95b0e, mostly !important) in
   the toned ones; a clicked button keeps its own colour while focused */
.btn.btn-primary:hover,
.btn.btn-success:hover,
.btn.btn-danger:hover,
.btn.btn-warning:hover,
.btn.btn-info:hover {
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
}

.btn.btn-danger:focus:not(:hover),
.btn.btn-warning:focus:not(:hover) {
    background-color: var(--bs-btn-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
}

.btn.btn-warning:active {
    background-color: var(--bs-btn-active-bg) !important;
    border-color: var(--bs-btn-active-border-color) !important;
}

/* the tables' Copy / Excel / CSV / PDF / Print (DataTables' default grey ones; a page's coloured ones stay): small,
   white with a line, as the old ones */
.dt-buttons .btn.btn-secondary:not(.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark) {
    --bs-btn-bg: var(--sp-surface);
    --bs-btn-color: var(--sp-text);
    --bs-btn-border-color: var(--sp-field-line);
    --bs-btn-hover-bg: var(--sp-soft-bg);
    --bs-btn-hover-color: var(--sp-soft-fg);
    --bs-btn-line-height: 24px;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .78rem;
}

/* Sing's .btn-default (Bootstrap 3): white with a line, as in Frameshift */
.btn-default {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-bg: var(--bs-tertiary-bg);
    display: inline-block;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    background-color: var(--bs-btn-bg);
    color: var(--bs-btn-color);
}

/* the small buttons in tables and forms */
.btn-xs, .btn-group-xs > .btn {
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: .45rem;
    --bs-btn-font-size: .75rem;
    --bs-btn-line-height: 20px;
    --bs-btn-border-radius: 6px;
    line-height: 20px;
}

/* a button in a table cell keeps its icon and label on one line (the column grows instead; Inter is wider than the old
   font, so "icon icon Задолжи" broke under its icons and doubled the row) */
table td .btn {
    white-space: nowrap;
}

/* sing.css pads small buttons in a window 4 px 12 px (34 px high): back to the button's own padding */
.modal-dialog :is(.btn-sm, .btn-xs) {
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}

/* sing.css pads coloured xs buttons 4 px (.btn.btn-danger.btn-xs ...): 24 px like the old ones, not 30 */
.btn.btn-xs[class] {
    padding-top: 1px;
    padding-bottom: 1px;
}

/* an icon-only button is a square of its own height, whatever the icon's width (the e-sign rows had a 22 px PDF and a
   20 px client button side by side); a button with a label is wider anyway */
.btn:not(.btn-link, .btn-close, .nav-link) {
    min-width: 30px;
}

.btn.btn-sm:not(.btn-link, .nav-link), .btn-group-sm > .btn {
    min-width: 28px;
}

.btn.btn-xs:not(.btn-link, .nav-link), .btn-group-xs > .btn {
    min-width: 24px;
}

/* an icon in a button keeps to the button's line */
.btn > :is(i, .fa, .fas, .far, .fab, .fa-solid, .fa-regular) {
    line-height: inherit;
    vertical-align: top;
}

/* badges: Bootstrap's own colours, the old app's size, the client card tags' small corners (sing.css set 6px) */
.badge {
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: .3rem;
    border-radius: var(--bs-badge-border-radius);
    --bs-badge-padding-x: .5em;
    --bs-badge-padding-y: .25em;
}

/* Sing's badge-default (Bootstrap 3, no Bootstrap 5 class): grey */
.badge:is(.text-bg-default, .badge-default) {
    background-color: var(--bs-secondary) !important;
    color: #ffffff !important;
}

/* the field titles over the inputs (<label class="label bg-primary">): small, quiet, coloured only for a warning */
.label {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    padding: 0 2px;
    border-radius: 0;
    background-color: transparent !important;
    color: var(--sp-muted) !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}

/* (app.css's own .bg-red / .bg-darkgreen ... come later with !important: a title keeps no background) */
.label[class*="bg-"] {
    background-color: transparent !important;
}

.label.bg-danger, .label.bg-red {
    color: var(--sp-bad-fg) !important;
}

.label.bg-warning {
    color: var(--sp-warn-fg) !important;
}

.label.bg-success, .label.bg-darkgreen, .label.bg-green {
    color: var(--sp-ok-fg) !important;
}

/* cards */
.card {
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: .45rem;
    --bs-card-cap-padding-x: .75rem;
    --bs-card-spacer-y: .5rem;
    --bs-card-spacer-x: .5rem;
}

.card-header {
    border-bottom: 1px solid var(--sp-line);
    font-weight: 600;
}

.card-header:not([class*=bg-]) {
    background: transparent;
    color: var(--sp-text);
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--sp-line);
}

/* modals: the navy head, like the frame */
.modal {
    --bs-modal-bg: var(--sp-surface);
    --bs-modal-color: var(--sp-text);
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: var(--sp-r-card);
    --bs-modal-inner-border-radius: var(--sp-r-card);
    --bs-modal-header-border-color: transparent;
    --bs-modal-footer-border-color: var(--sp-line);
    --bs-modal-box-shadow: var(--sp-shadow-pop);
}

/* no overflow: hidden - it cut off lists that open inside a window (typeahead, dropdowns) at the window's edge;
   the head and foot round their own corners (Bootstrap's --bs-modal-inner-border-radius) */
.modal-content {
    box-shadow: var(--sp-shadow-pop);
}

.modal-header {
    padding: .5rem .85rem;
}

.modal-body {
    padding: .6rem .75rem;
}

.modal-footer {
    padding: .4rem .6rem;
}

.modal-header .modal-title {
    font-size: 1rem;
}

.modal-header[class*=bg-] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .8;
}

/* menus */
.dropdown-menu {
    --bs-dropdown-bg: var(--sp-surface);
    --bs-dropdown-color: var(--sp-text);
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-padding-x: 6px;
    --bs-dropdown-padding-y: 6px;
    --bs-dropdown-item-border-radius: 8px;
    --bs-dropdown-link-color: var(--sp-text);
    --bs-dropdown-link-hover-color: var(--sp-soft-fg);
    --bs-dropdown-link-hover-bg: var(--sp-soft-bg);
    --bs-dropdown-link-active-color: var(--sp-primary-fg);
    --bs-dropdown-link-active-bg: var(--sp-primary);
    --bs-dropdown-header-color: var(--sp-muted);
    --bs-dropdown-divider-bg: var(--sp-line);
    box-shadow: var(--sp-shadow-pop);
}

.dropdown-item.selected {
    background: var(--sp-soft-bg);
    color: var(--sp-soft-fg);
    font-weight: 600;
}

.dropdown-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* tabs: an underline; pills: the primary */
/* the old app's 30 px tabs (delete.css); sing.css pads them 6 px and the client card's are .btn (a raised shadow) */
.nav-tabs:not(.nav-tabs-vertical) .nav-link {
    height: 30px;
    padding: 2px 8px;
    line-height: 24px;
    box-shadow: none;
}

/* forms: 26 px fields, the old app's (delete.css) */
.form-control, .form-select {
    padding-top: 2px;
    padding-bottom: 2px;
    border-color: var(--sp-field-line);
    background-color: var(--sp-field);
    color: var(--sp-text);
    font-size: .8125rem;
}

.form-control {
    padding-left: .6rem;
    padding-right: .6rem;
}

.form-select {
    padding-left: .6rem;
}

.form-control::placeholder {
    color: var(--sp-muted);
    opacity: .8;
}

.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: var(--sp-head);
}

.form-control-sm, .form-select-sm, .input-sm {
    border-radius: 8px;
}

.form-check-input:checked {
    background-color: var(--sp-primary);
    border-color: var(--sp-primary);
}

.form-label, .col-form-label {
    font-size: 13px;
    font-weight: 600;
}

.input-group-text {
    padding: 0 .5rem;
    border-color: var(--sp-field-line);
    background: var(--sp-head);
    color: var(--sp-muted);
    font-size: .8125rem; /* Bootstrap 5: 1rem = 16 px, the app's text is 13 */
}

textarea.form-control {
    min-height: 120px;
}

/* tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sp-text);
    --bs-table-border-color: var(--sp-row-line);
    --bs-table-striped-bg: rgba(var(--sp-primary-rgb), .025);
    --bs-table-hover-bg: rgba(var(--sp-primary-rgb), .05);
    --bs-table-active-bg: rgba(var(--sp-primary-rgb), .08);
}

.table > thead > tr > th,
.table > thead > tr > td {
    background: var(--sp-head);
    color: var(--sp-text);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    border-bottom-color: var(--sp-line);
}

/* Bootstrap 5 colours every cell itself: a row coloured inline (<tr style="background: darkred; color: white">, the
   crew's order in progress) keeps its text colour, as in Bootstrap 4 */
.table > tbody > tr[style*="color"] > * {
    color: inherit;
}

/* table cells centred, as the old look had them (refresh.css), DataTables' numbers and dates too */
table tr td,
table tr th,
table.dataTable tbody td:is(.dt-type-numeric, .dt-type-date),
table.dataTable thead th:is(.dt-type-numeric, .dt-type-date) {
    text-align: center;
}

table.dataTable thead th .dt-column-header {
    justify-content: center;
}

table thead th {
    text-align: center !important;
}

/* DataTables 3 puts the sort arrows beside the title (8 px + a 4 px gap in every head cell, so a full table lost a
   column to Responsive at 1024 px); in the cell's right padding instead, as DataTables 2 had them */
table.dataTable > thead > tr > :is(th, td):is(.dt-orderable-asc, .dt-orderable-desc, .dt-ordering-asc, .dt-ordering-desc) {
    position: relative;
    padding-right: 7px !important;
}

/* Inter is wider than the old Samsung Sans: 4 px beside a cell's text instead of sing.css's 5, so a table keeps the
   columns it had at 1024 px */
table.dataTable > tbody > tr > td,
table.dataTable > thead > tr > :is(th, td) {
    padding-left: 4px !important; /* sing.css: .table tr td 1px 5px !important */
    padding-right: 4px !important;
}

table.dataTable thead > tr > :is(th, td) .dt-column-header {
    gap: 0;
}

table.dataTable thead > tr > :is(th, td) .dt-column-order {
    position: absolute !important;
    top: 0;
    right: 2px;
    bottom: 0;
}

.table-condensed > :not(caption) > * > * {
    padding: .3rem .5rem;
}

/* alerts: a tint and the colour as text */
/* pagination: round */
/* the calendar (bootstrap-datepicker, kept: it needs nothing of Bootstrap's JS; date-fields.js sets it up day-first) */
.datepicker.dropdown-menu {
    padding: 8px;
    border: 0;
    border-radius: 12px;
    background: var(--sp-surface);
    color: var(--sp-text);
    box-shadow: var(--sp-shadow-pop);
    font-family: var(--bs-body-font-family);
}

.datepicker-dropdown::before,
.datepicker-dropdown::after {
    display: none !important;
}

.datepicker table tr td,
.datepicker table tr th {
    width: 32px;
    height: 30px;
    border-radius: 8px;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused,
.datepicker table tr td span:hover,
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
    background: var(--sp-soft-bg);
    color: var(--sp-soft-fg);
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover {
    background: var(--sp-soft-bg);
    color: var(--sp-soft-fg);
    font-weight: 700;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background: var(--sp-primary) !important;
    border-color: var(--sp-primary) !important;
    color: var(--sp-primary-fg) !important;
    text-shadow: none;
}

.datepicker table tr td.old,
.datepicker table tr td.new,
.datepicker table tr td.disabled {
    color: var(--sp-muted);
    opacity: .6;
}

/* DataTables: a selected row in the primary's tint, not Bootstrap's bright blue */
:root {
    --dt-row_background-selected: 224, 227, 251;
    --dt-row-text_color-selected: 18, 22, 58;
    --dt-row-link_color-selected: 21, 28, 94;
}

[data-bs-theme=dark] {
    --dt-row_background-selected: 43, 52, 120;
    --dt-row-text_color-selected: 232, 234, 248;
    --dt-row-link_color-selected: 200, 206, 255;
}

/* a card's title in its header: the header's size, not h4's */
.card-header .card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

/* DataTables RowReorder: the dragged row outlined in the primary */
:root,
[data-bs-theme=dark] {
    --dtrr-move_outline-color: var(--sp-primary);
    --dtrr-moved_outline-color: var(--sp-muted);
}

/* select2: the fields' look */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 31px;
    border: 1px solid var(--sp-field-line);
    border-radius: 8px;
    background-color: var(--sp-field);
    color: var(--sp-text);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--multiple {
    padding: 2px 4px;
    border-radius: 8px;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 .2rem rgba(var(--sp-primary-rgb), .2);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 29px;
    padding-left: .6rem;
    color: var(--sp-text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 29px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 2px 4px 2px 0;
    padding: 0 8px;
    border: 0;
    border-radius: .3rem;
    background-color: var(--sp-soft-bg);
    color: var(--sp-soft-fg);
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0 4px;
    order: 2;
    float: none;
    background: transparent;
    color: var(--sp-soft-fg);
    font-size: 14px;
    line-height: 1;
    opacity: .7;
    border-radius: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--sp-danger);
    opacity: 1;
}

.select2-dropdown {
    border: 0;
    border-radius: 10px;
    background: var(--sp-surface);
    color: var(--sp-text);
    box-shadow: var(--sp-shadow-pop);
    overflow: hidden;
}

/* select2 opens its list in <body> (z-index 1051): above a Bootstrap 5 modal (1055) */
.select2-container--open {
    z-index: 1060;
}

.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--inline .select2-search__field {
    border: 1px solid var(--sp-field-line);
    border-radius: 8px;
    background: var(--sp-field);
    color: var(--sp-text);
}

.select2-container--default .select2-search--inline .select2-search__field {
    border: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--sp-primary);
    color: var(--sp-primary-fg);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--sp-soft-bg);
    color: var(--sp-soft-fg);
}

/* ---------------------------------------------------------------- 5. old helper classes the pages still use */
.bg-red, .bg-danger.bg-red {
    background-color: var(--sp-danger) !important;
    color: #fff;
}

.bg-green {
    background-color: var(--sp-success) !important;
    color: #fff;
}

.bg-darkgreen {
    background-color: #0b5d3e !important;
    color: #fff;
}

.bg-blue {
    background-color: var(--sp-info) !important;
    color: #fff;
}

.bg-purple {
    background-color: #5b2bd1 !important;
    color: #fff;
}

.bg-orange {
    background-color: #e0731b !important;
    color: #fff;
}

.text-red {
    color: var(--sp-danger) !important;
}

.text-green {
    color: var(--sp-success) !important;
}

.text-purple {
    color: var(--sp-violet-fg) !important;
}

.text-pink {
    color: #c0267a !important;
}

[data-bs-theme=dark] .text-pink {
    color: #f9a8d4 !important;
}

/* titles coloured inline in navy (<h6 class="card-title" style="color: #102679">, the counter): readable at night */
[data-bs-theme=dark] :is(.card-title, .card-header, h1, h2, h3, h4, h5, h6)[style*="color"] {
    color: var(--sp-text) !important;
}

/* sing.css fixes .text-danger / success / primary to dark shades (!important), and the toned hues themselves are too
   dark to read on the dark page (user 2026-10-21: "red font is not readable"): the light variant of each colour */
[data-bs-theme=dark] .text-danger {
    color: var(--bs-danger-text-emphasis) !important;
}

[data-bs-theme=dark] .text-success {
    color: var(--bs-success-text-emphasis) !important;
}

[data-bs-theme=dark] .text-primary {
    color: var(--bs-primary-text-emphasis) !important;
}

[data-bs-theme=dark] .text-warning {
    color: var(--bs-warning-text-emphasis) !important;
}

[data-bs-theme=dark] .text-info {
    color: var(--bs-info-text-emphasis) !important;
}

.nowrap {
    white-space: nowrap;
}

.font-size-lg {
    font-size: 1.125rem;
}

.section-title {
    font-size: 1rem;
    margin-bottom: .5rem;
}

/* the old frame's rules still in sing.css / responsive.css (they change on development, so they are outweighed here,
   not edited): the menu's green hover, the white menu, the phone header's fixed 100 px and hidden icons */
#asideMenu {
    background-color: var(--sp-rail-bg) !important;
}

/* the menu's icons take the link's colour (sing.css paints them black: .stacked-menu .menu-link:not(.active) >
   .menu-icon) - light on the rail, grey in the light fly-outs */
#stacked-menu .menu-link > .menu-icon {
    color: inherit;
}

#stacked-menu .side-sec-menu a.menu-link > .menu-icon {
    width: 18px;
    margin: 0;
    font-size: 14px;
    color: var(--sp-muted);
}

#stacked-menu .side-sec-menu a.menu-link:hover > .menu-icon,
#stacked-menu .side-sec-menu a.menu-link.active > .menu-icon {
    color: var(--sp-soft-fg);
}

#stacked-menu > .menu > li > a.menu-link:hover {
    background-color: var(--sp-rail-hover-bg) !important;
}

#stacked-menu > .menu > li.activeLi > a.menu-link:hover,
#stacked-menu > .menu > li > a.menu-link.active:hover {
    background-color: var(--sp-rail-on-bg) !important;
}

#stacked-menu .side-sec-menu a.menu-link:hover {
    background-color: var(--sp-soft-bg) !important;
}

#stacked-menu a.menu-link:hover .menu-text {
    color: inherit !important;
}

.app-header,
.app-header .top-bar,
.app-header .top-bar-list {
    height: auto !important;
}

.app-header .top-bar-item.px-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.app-header .top-bar-item-right .nav-link {
    margin: 0;
}

.app-header .top-bar-search {
    padding: 0 !important;
}


/* the old look's fixed light colours (sing.css, chat.css, messenger.css) follow the theme */
.card {
    background-color: var(--bs-card-bg);
}

.tdHead ~ .label {
    background-color: transparent !important;
}

.tooltip-text,
#chatko .chatelement {
    background-color: var(--sp-surface);
    color: var(--sp-text);
}

[data-bs-theme=dark] .btn-default:hover {
    background-color: rgba(var(--sp-primary-rgb), .18) !important;
}

[data-bs-theme=dark] ::-webkit-scrollbar-track,
[data-bs-theme=dark] .dt-scroll-body::-webkit-scrollbar-track {
    background: var(--sp-page);
}

[data-bs-theme=dark] ::-webkit-scrollbar-thumb {
    background: #343c74;
}

/* ---------------------------------------------------------------- 6. phones and 1024 px screens */
/* 992-1199 px (many office screens are 1024 x 768): no account name, the header's icons on one line */
@media (max-width: 1199.98px) {
    .app-header .account-summary {
        display: none !important;
    }

    /* (GreenSing keeps its name here: its header has room, and the name tells it from Spectrum) */

    .app-header .top-bar {
        gap: 4px;
        padding: 0 6px;
    }

    .app-header .header-nav {
        gap: 0;
    }

    .app-header .header-nav > .nav-item > .nav-link {
        min-width: 32px;
        height: 36px;
        padding: 0 5px;
    }

    /* the search gives way (as the old header's 140 px box) so the icons stay on the line */
    .top-bar-item-full {
        flex: 1 1 150px;
        min-width: 120px;
        max-width: none;
    }

    /* the sheet edge to edge, as the old page: at 1024 px the 12 px of frame on each side cost wide tables a column */
    .page-inner, #app-content.page-inner {
        min-height: calc(100vh - var(--sp-header-h) - var(--sp-stripe-h) - var(--sp-footer-h));
        margin: 0 0 var(--sp-footer-h) !important;
        padding: 4px !important;
        border-radius: 0;
        box-shadow: none;
    }
}

/* phones: the header in rows (menu, brand, language / the search / from 576 px the icons), in the flow (sticky), so
   the content starts under it whatever its height; full-screen windows, 16 px fields (no zoom on an iPhone), no
   footer bar */
@media (max-width: 767.98px) {
    .app-header {
        position: sticky;
    }

    .app-main {
        padding-top: var(--sp-stripe-h) !important;
    }

    .app-header .top-bar {
        flex-wrap: wrap;
        gap: 2px 4px;
        padding: 4px 6px 6px;
    }

    .app-header .top-bar-list {
        display: contents;
    }

    .app-header .top-bar-item:has(.hamburger) {
        order: 0;
    }

    .app-header .top-bar-brand {
        order: 1;
        margin-right: 4px;
    }

    .app-header .top-bar-item:has(> .header-nav):not(.top-bar-item-right) {
        order: 2;
        min-width: 0;
    }

    .app-header .top-bar-item-full {
        order: 4;
        flex: 0 0 100%;
    }

    .app-header .top-bar-search {
        max-width: none;
    }

    .app-header .top-bar-item-right {
        order: 5;
        flex: 0 0 100%;
        justify-content: flex-start;
        margin-left: 0;
    }

    .footko {
        display: none;
    }

    .page-inner, #app-content.page-inner {
        min-height: calc(100vh - var(--sp-stripe-h));
        margin: 0 0 64px !important;
        padding: 8px !important;
        border-radius: 0;
        box-shadow: none;
    }

    /* (responsive.css: .modal .modal-dialog 40 px auto, 90 % - mobile.css outweighed it the same way) */
    .modal .modal-dialog:not(.modal-sm) {
        width: 100%;
        max-width: none !important;
        margin: 0 !important;
        min-height: 100%;
    }

    .modal .modal-dialog:not(.modal-sm) > .modal-content {
        min-height: 100dvh;
        border-radius: 0;
    }

    .modal .modal-dialog.modal-sm {
        max-width: calc(100% - 32px) !important;
        margin: 16px auto !important;
    }

    .form-control, .form-select, input, select, textarea {
        font-size: 16px !important;
    }

    .dropdown-menu-rich {
        width: calc(100vw - 16px);
    }
}

/* field titles: one line, a long one ends in "..." (sing.js shows it whole on hover) */
.label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-link[role="tab"] {
    cursor: pointer;
}

/* the grid at the old app's density (delete.css): columns side by side keep 2 px clear (a card's edge is a 1 px line,
   so 4 px apart); the row reaches 6 px left, so a row's first column starts where its container does */
.col, [class*="col-"] {
    padding-right: 0;
    padding-left: 4px;
}

.row {
    margin-right: -2px;
    margin-left: -6px;
}

/* ... a row inside a column ends with it (a column has no right padding to take the -2 px): it stood 2 px out, and in a
   box that scrolls (a line's details on the client page, .heightPane) that was a sideways scrollbar */
.col > .row, [class*="col-"] > .row {
    margin-right: 0;
}

/* a field with its title (form-group, kept by the codemod: Bootstrap 5 has no rule for it): no margin, as delete.css
   had it (sing.css's 0 2px pushed the second of two col-6 fields under the first) */
.form-group {
    margin: 0;
}

/* sing.css sets icons in a .form-group to weight 400 (fine for the old SVG icons): a solid icon needs 900 or its
   glyph is missing (an empty box) */
.form-group :is(.fas, .fa-solid, .fa) {
    font-weight: 900;
}

/* a button in a row of fields (.singBtn__container) lines up with the fields: it starts where they do (under a
   20 px title) and is as tall as one (many set 54 px inline for the old label bar; refresh.css did the same) */
.singBtn__container .btn {
    height: 26px !important;
    margin-top: 18px;   /* + the container's 2 px (sing.css) = the fields' 20 px title */
    line-height: 1;
}

/* ... (GreenSing) a button its column has no room for goes on a line under the first (the title's 18 px are the row's,
   not each button's), and a label longer than the whole column wraps inside a button that grows (two buttons in a
   col-3, bank statements: a label wrapped to three lines in 26 px; generate_invoice: 154 px labels in 105 px columns
   ran over each other) */
.singBtn__container {
    flex-wrap: wrap;
    gap: 3px;
    padding-top: 18px;
}

.singBtn__container .btn {
    flex: 0 0 auto;
    max-width: 100%;
    height: auto !important;
    min-height: 26px;
    margin-top: 0;
}

/* (a button wrapped in a form-group: the wrapper keeps to the column too) */
.singBtn__container > .form-group {
    max-width: 100%;
}

/* dark: the outline buttons' text in the light variant of their colour (the toned hue alone is too faint on the dark
   page: netmon's tabs, the shift plan's actions) - the line and the hover keep the colour itself */
[data-bs-theme=dark] .btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); }
[data-bs-theme=dark] .btn-outline-success { --bs-btn-color: var(--bs-success-text-emphasis); }
[data-bs-theme=dark] .btn-outline-danger { --bs-btn-color: var(--bs-danger-text-emphasis); }
[data-bs-theme=dark] .btn-outline-warning { --bs-btn-color: var(--bs-warning-text-emphasis); }
[data-bs-theme=dark] .btn-outline-info { --bs-btn-color: var(--bs-info-text-emphasis); }

/* Responsive's open / close square stays beside the cell's button (it stood above it and doubled the row: olt_detail's
   client column) */
table.dataTable > tbody > tr > td.dtr-control {
    white-space: nowrap;
}

/* small fields: Bootstrap 5's min-height for .form-control-sm (29.5 px at 13 px text) outweighed sing.css's 25.6 px
   height, so every small input stood 4 px taller than the small select beside it (rack windows, filters) */
.form-control-sm:not(textarea) {
    min-height: 0;
}

/* jquery-confirm windows with a Bootstrap .row inside: the row's negative gutter overflowed the content by 2 px and
   put a grey scrollbar under the form (racks' "Нов рек") */
.jconfirm .jconfirm-box .jconfirm-content {
    overflow-x: hidden !important;   /* jquery-confirm's own rule is .jconfirm .jconfirm-box div.jconfirm-content-pane ... */
}

/* ... and inside that clipped box the old grid's row (6 px out on the left, 2 px on the right) cut off a full-width
   field's side lines: the row there starts and ends with the content */
.jconfirm .jconfirm-content .row {
    margin-left: -4px;
    margin-right: 0;
}

/* jquery-confirm windows in the dark theme: its light box stayed white while the title and the text took the theme's
   light colour - a white window with grey-white words (cron jobs' "Изврши сега", every $.confirm / $.alert) */
[data-bs-theme=dark] .jconfirm .jconfirm-box {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

[data-bs-theme=dark] .jconfirm .jconfirm-box .jconfirm-title-c,
[data-bs-theme=dark] .jconfirm .jconfirm-box .jconfirm-content {
    color: var(--bs-body-color);
}

/* alerts as Bootstrap 5's own (light background, dark text, a line, from the toned palette) instead of sing.css's solid
   bars with white text - the loudest thing left on a page after the toning; compact as the old ones, text off the edge */
.alert {
    padding: 4px 10px;
    border-radius: 6px;
}

.alert-primary,
.alert-success,
.alert-danger,
.alert-warning,
.alert-info {
    background-color: var(--bs-alert-bg) !important;
    border-color: var(--bs-alert-border-color) !important;
    color: var(--bs-alert-color) !important;
}

/* dark: Bootstrap's dark badge is the page's own colour there (outages' "Исклучено" was text without a pill) */
[data-bs-theme=dark] .badge.text-bg-dark {
    background-color: #495057 !important;
}

/* code (cron scripts and times, setting names) in a toned pink: Bootstrap's #d63384 was the brightest text left */
:root,
[data-bs-theme=light] {
    --bs-code-color: #9c4a72;
}

[data-bs-theme=dark] {
    --bs-code-color: #d2a1b9;
}

/* dark: quiet grey lines (user 2026-10-21: "white borders look bad, make them more gray less noticeable") - the theme's
   line (the frame, tables, cards, fly-outs follow it), fields keep a slightly stronger one, and the old stylesheets'
   hard-coded light lines (sing.css #ddd / lightgrey / white, responsive.css, tasks.css) take the same grey - a step
   lighter since 2026-10-22 ("the theme is pale": #363c42 / fields #4b5259 hardly showed), lighter again on "still pale" */
[data-bs-theme=dark] {
    --bs-border-color: #525a63;
    --bs-border-color-translucent: rgba(255, 255, 255, .1);
    --sp-dark-line: #525a63;
}

[data-bs-theme=dark] :is(.form-control, .form-select, .form-check-input) {
    --bs-border-color: #737d88;
}

[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-control[readonly] {
    border-color: #737d88 !important;
}

[data-bs-theme=dark] :is(.table td, .table th, table.dataTable tbody th, table.dataTable tbody td, .description-block,
    .salterCard, .workOrder__card, .workOrder__card_main, div.flex-between-details .nav-item, div.no-flex-between .nav-item,
    .drawrpallete-wrapper button, .chat-header-button) {
    border-color: var(--sp-dark-line) !important;
}

[data-bs-theme=dark] :is(.dtvBox div.flex-container, .service-container div.flex-container, .tdHead, .nav-tabs-vertical .nav-link) {
    border-bottom-color: var(--sp-dark-line) !important;
}

[data-bs-theme=dark] :is(#msgPayment, .services-tab .tab-pane) {
    border-top-color: var(--sp-dark-line) !important;
}

[data-bs-theme=dark] :is(.nav-tabs-vertical .nav-link, div.flex-between-details .nav-link:hover) {
    border-right-color: var(--sp-dark-line) !important;
}

@media (max-width: 767.98px) {
    [data-bs-theme=dark] :is(div.dt-buttons .btn, .flex-between .me-2.mt-2 .btn, .nav-tabs .nav-item) {
        border-color: var(--sp-dark-line);
    }
}

/* yellow buttons and badges with dark text (sing.css forced white: 2:1, hard to read), as Bootstrap's own and the
   tables' Print button already have */
.btn.btn-warning,
.btn.btn-warning:hover,
.btn.btn-warning:focus,
.badge.text-bg-warning,
.text-bg-warning {
    color: #1f1a0e !important;
}

/* dark: a fly-out stands off the page by a slightly lighter surface, a quiet line and a deeper shadow (it had the
   page's own colour and no edge) */
@media (min-width: 768px) {
    [data-bs-theme=dark] #stacked-menu > .menu > li.has-child > .menu {
        background: var(--bs-tertiary-bg);
        border: 1px solid var(--sp-dark-line);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
    }
}

/* the menu's labels take the link's colour: sing.css paints them black (.stacked-menu .menu-link:not(.active) >
   .menu-text), black text on the dark theme's fly-outs (user 2026-10-21) */
#stacked-menu .menu-link > .menu-text {
    color: inherit;
}

/* an icon and its label apart by a small gap in buttons and badges - whether or not the markup has a space between them
   ("<i …></i>Нов Налог"); icon-only buttons stay centred. This replaces the `i { padding: 0 4px }` / `a svg { padding }`
   rules (user 2026-10-21: removed, they widened every icon, icon button and badge) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3em;
    vertical-align: middle;
}

.btn:is(.text-start, .text-left) {
    justify-content: flex-start;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .25em;
    vertical-align: middle;
}

.dropdown-toggle::after {
    margin-left: 0;   /* the gap spaces the caret */
}

/* ... the same gap in tabs and dropdown items that carry an icon of their own (not the client card's service rows: a
   tab holding a whole row), and after an icon that starts a title or a field's label */
:is(.nav-tabs, .nav-pills) .nav-link:has(> i[class*="fa-"]),
.dropdown-item:has(> i[class*="fa-"]) {
    display: flex;
    align-items: center;
    gap: .35em;
}

:is(h1, h2, h3, h4, h5, h6, .card-title, .card-header, label, legend) > i[class*="fa-"]:first-child {
    margin-right: .3em;
}

/* a purple / pink button keeps the button's padding (sing.css gives .bg-purple / .bg-pink 4 px for badges: the client
   card's G button stood 36 px high once its inline padding went) */
.btn:is(.bg-purple, .bg-pink) {
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}

/* the one class the inline-style conversion needs that Bootstrap has not (D:\sing-tools\bs5\inline.py: cursor: pointer) */
.cursor-pointer {
    cursor: pointer;
}

/* fixed small text sizes for the inline-style conversion (Bootstrap's .small is relative: inside a heading it grows) */
.fs-2xs { font-size: .625rem !important; }    /* 10 px */
.fs-xs { font-size: .6875rem !important; }    /* 11 px */
.fs-sm { font-size: .75rem !important; }      /* 12 px */
.fs-body { font-size: .8125rem !important; }  /* 13 px, the body's */
.fs-md { font-size: .875rem !important; }     /* 14 px */

/* a button group's labels stay on one line (as inline flex a label wrapped by a pixel's shortfall: the work-order
   window's "Задолжи Опрема", "Нов Налог" stood two lines high) */
.btn-group > .btn {
    white-space: nowrap;
}

/* less fog (user 2026-10-21: "the whole app looks foggy"): a touch blacker text in the light theme, and the tables'
   heads on a light grey band so a list has an edge (they were white on white with thin grey lines) */
:root:not([data-bs-theme=dark]) {
    --bs-body-color: #0b0d10;
    --bs-body-color-rgb: 11, 13, 16;
}

.table > thead,
table.dataTable > thead {
    --bs-table-bg: var(--bs-secondary-bg);
}

/* more contrast (2026-10-22, 3 steps: staff found the theme pale): the content's sheet a shade of grey with the cards white on
   it, darker lines on cards, tables and fields, the secondary text darker; in the dark theme the sheet darker than its
   cards (its lines a step lighter, below with its other greys) */
:root:not([data-bs-theme=dark]) {
    --bs-border-color: #a9b1ba;
    --bs-border-color-translucent: rgba(0, 0, 0, .25);
    --bs-secondary-bg: #ced4da;
    --bs-secondary-color: #343a40;
    --sp-page: #ffffff;   /* the page around the sheet white (user, 2026-10-23; was #cdd3da) */
    --sp-sheet: #e4e8ec;
    --sp-field-line: #7c858f;
    --sp-card-shadow: 0 1px 3px rgba(16, 24, 40, .16);
}

[data-bs-theme=dark] {
    --sp-sheet: #121416;
    --sp-card-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* ... the tables' cell lines too (sing.css: #ddd !important on the right and bottom sides only, so a cell's own coloured
   left edge stays) */
:root:not([data-bs-theme=dark]) :is(.table td, .table th) {
    border-right-color: var(--bs-border-color) !important;
    border-bottom-color: var(--bs-border-color) !important;
}

/* the old app's font, Samsung Sans (user 2026-10-21: trying it against the fog - the system font at 13 px is thin): the
   same faces as refresh.css, normal text (400-600) drawn with the Medium file as in the old app, so it reads heavier */
@font-face {
    font-family: 'Samsung Sans';
    src: url('font/SamsungSans-Regular.woff') format('woff');
    font-weight: 100 300;
    font-display: swap;
}

@font-face {
    font-family: 'Samsung Sans';
    src: url('font/SamsungSans-Medium.woff') format('woff');
    font-weight: 400 600;
    font-display: swap;
}

@font-face {
    font-family: 'Samsung Sans';
    src: url('font/SamsungSans-Bold.woff') format('woff');
    font-weight: 700 900;
    font-display: swap;
}

:root {
    --bs-body-font-family: 'Samsung Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* cards round like the sheet they sit in (user 2026-10-21: the rounded sheet round square cards looked bad; sing.css
   squares .card and .card-header, !important): 6 px = the sheet's 12 px less its 6 px padding, so the corners run
   parallel; a card's own head and foot follow its inner corner */
.card {
    --bs-card-border-radius: 6px;
    --bs-card-inner-border-radius: 5px;
    border-radius: var(--bs-card-border-radius) !important;
}

.card > .card-header:first-child {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0 !important;
}

.card > .card-footer:last-child {
    border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) !important;
}

/* buttons side by side a little apart (user 2026-10-21: rounded buttons touching looked stuck together): 3 px between
   neighbours, and a group's buttons apart too, each with its own rounded corners (Bootstrap joins them flat) */
.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
    margin-left: 3px;
}

.btn-group {
    gap: 3px;
}

.btn-group > .btn,
.btn-group > .btn-group > .btn {
    margin-left: 0 !important;
    border-radius: var(--bs-btn-border-radius) !important;
}

.input-group > .btn + .btn {
    margin-left: 0;   /* buttons on a field stay joined to it */
}

/* ... also groups inside a group (the client card's top rows: one .btn-group per button; Bootstrap pulls each 1 px
   left, sing.css sets the row's gap to 2 px) */
.btn-group > .btn-group:not(:first-child) {
    margin-left: 0 !important;
}


/* the header (user 2026-10-21: "buttons right of the search are small, the search is way too big, make it small in
   line with the others"): the icons 17 px (were 13 / 16), the search 28 px high (was 38: a field's height won over
   the 32 above); then "the search should span the whole empty space" */
.app-header .header-nav > .nav-item > .nav-link > i[class*="fa-"],
.app-header .header-nav > .nav-item > .nav-link > svg {
    font-size: 20px;   /* then "still small, bigger and closer to each other" */
}

.app-header .header-nav {
    gap: 0 !important;
}

.app-header .header-nav > .nav-item > .nav-link {
    min-width: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.app-header .top-bar-search {
    max-width: none;   /* the search takes the header's free space (user 2026-10-21) */
}

.app-header .input-group-search > .form-control {
    height: 28px !important;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 26px;
}

/* the rail's icons darker in the light theme (user 2026-10-21: "it still feels muted, the grey icons on the side") */
:root:not([data-bs-theme=dark]) {
    --sp-rail-fg: #3b4149;
}

/* tabs as real tabs (user 2026-10-21: "the line below them is missing", "blue on the tabs feels like 90s internet"):
   a line under the row, the open tab boxed and open into the page below it, dark text instead of the link blue
   (sing.css drops the row's line and draws a 3 px underline per tab) */
.nav-tabs:not(.nav-tabs-vertical):not(.flex-column) {
    gap: 2px;
    border-bottom: 1px solid var(--bs-border-color) !important;
}

.nav-tabs:not(.nav-tabs-vertical):not(.flex-column) .nav-link {
    margin-bottom: -1px !important;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.nav-tabs:not(.nav-tabs-vertical):not(.flex-column) .nav-link:hover {
    border-color: transparent;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.nav-tabs:not(.nav-tabs-vertical):not(.flex-column) .nav-link.active,
.nav-tabs:not(.nav-tabs-vertical):not(.flex-column) .nav-item.show .nav-link {
    border-color: var(--bs-border-color) var(--bs-border-color) var(--sp-surface);
    background: var(--sp-surface);
    color: var(--bs-body-color);
    font-weight: 600;
}

/* badges are not buttons (user 2026-10-21: "people don't know what is a button"): a badge is a soft tag like the client
   card's .cld-tag (user 2026-10-22) - its colour as a light background with dark text, no line, small corners - while
   buttons stay solid with a little shadow. Counts on buttons, tabs (not the client card's service rows, a vertical tab
   list), the header and the menu stay solid; a badge with its own inline background keeps it. */
.badge:is(.text-bg-primary, .bg-primary, .text-bg-success, .bg-success, .bg-green, .badge-success, .badge-darkgreen, .text-bg-danger, .bg-danger, .bg-red, .badge-danger, .text-bg-warning, .bg-warning, .text-bg-info, .bg-info, .text-bg-secondary, .bg-secondary, .text-bg-dark, .text-bg-default, .badge-default):not(.btn .badge):not(.nav-tabs:not(.nav-tabs-vertical) .nav-link .badge):not(.nav-pills .badge):not(.app-header .badge):not(#stacked-menu .badge):not(.foot-bugs .badge):not([style*=background]) {
    border: 0;
    border-radius: .3rem;
    background: var(--badge-bg, var(--sp-grey-bg)) !important;
    color: var(--badge-fg, var(--sp-grey-fg)) !important;
    font-weight: 500;
}

.badge:is(.text-bg-primary, .bg-primary) {
    --badge-bg: var(--bs-primary-bg-subtle);
    --badge-fg: var(--bs-primary-text-emphasis);
}

.badge:is(.text-bg-success, .bg-success, .bg-green, .badge-success, .badge-darkgreen) {
    --badge-bg: var(--sp-ok-bg);
    --badge-fg: var(--sp-ok-fg);
}

.badge:is(.text-bg-danger, .bg-danger, .bg-red, .badge-danger) {
    --badge-bg: var(--sp-bad-bg);
    --badge-fg: var(--sp-bad-fg);
}

.badge:is(.text-bg-warning, .bg-warning) {
    --badge-bg: var(--sp-warn-bg);
    --badge-fg: var(--sp-warn-fg);
}

.badge:is(.text-bg-info, .bg-info) {
    --badge-bg: var(--sp-info-bg);
    --badge-fg: var(--sp-info-fg);
}

/* ... and a solid button stands up a little */
.btn:not(.btn-link):not([class*="btn-outline"]):not(.btn-default):not(.btn-light):not(.btn-close):not(.nav-link) {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* coloured text in the badge's text colour (user 2026-10-21: "badge gets the outline but text gets only the text part
   from the badge"): the dark shade of each colour, the same as a soft badge's text, in both themes */
.text-danger {
    color: var(--bs-danger-text-emphasis) !important;
}

.text-success {
    color: var(--bs-success-text-emphasis) !important;
}

.text-warning {
    color: var(--bs-warning-text-emphasis) !important;
}

.text-primary {
    color: var(--bs-primary-text-emphasis) !important;
}

.text-info {
    color: var(--bs-info-text-emphasis) !important;
}

/* ... in the light theme a little brighter than the badge text, so red and green still read as colours (user
   2026-10-21: "a bit brighter than the badge text but darker than before", then red and green "a smidge brighter"):
   60 % the colour, 40 % the badge text; red and green 70 / 30, yellow 30 / 70 (readable on the grey sheet) */
:root:not([data-bs-theme=dark]) .text-danger {
    color: #a41c29 !important;
}

:root:not([data-bs-theme=dark]) .text-success {
    color: #0f613c !important;
}

:root:not([data-bs-theme=dark]) .text-warning {
    color: #866206 !important;
}

:root:not([data-bs-theme=dark]) .text-primary {
    color: #08469f !important;
}

:root:not([data-bs-theme=dark]) .text-info {
    color: #0a5d6e !important;
}

/* every button with the same corners (user 2026-10-21: "dropdown buttons' radius is different"): sing.css forces 4 px
   on all .btn (!important), only a group's buttons had the theme's 7 px; buttons on a field keep their joined side */
.btn:not(.nav-link):not(.btn-close):not(.input-group > .btn) {
    border-radius: var(--bs-btn-border-radius) !important;
}

/* a dropdown button shows it opens a menu: a bigger arrow */
.btn.dropdown-toggle::after {
    border-top-width: .4em;
    border-right-width: .32em;
    border-left-width: .32em;
    vertical-align: .12em;
}

/* menu items readable (user 2026-10-21: "dropdown text is dark with dark colour" - sing.css paints a hovered or
   focused item solid blue and leaves its text dark): hover a light tint with the normal text, the chosen one solid
   blue with white text */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: rgba(var(--bs-primary-rgb), .09);
    color: var(--bs-body-color);
}

[data-bs-theme=dark] .dropdown-menu .dropdown-item:hover,
[data-bs-theme=dark] .dropdown-menu .dropdown-item:focus {
    background-color: rgba(var(--bs-primary-rgb), .35);
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: var(--bs-primary);
    color: #fff;
}

/* a table's rows (buttons + search, the table, count + pages) spaced as DataTables 2 did: the gap under a row, none
   above the first (scripts.php drops DataTables 3's mt-2) */
.dt-container > .row:has(~ .row) {
    margin-bottom: .5rem;
}

/* ... and as wide as the table: the grid's -2 px right margin put the search box 2 px past the table's edge (and a
   sideways scrollbar where the table sits in a box that scrolls) */
.dt-container > .row {
    margin-right: 0;
    margin-left: -4px;
}

/* sing.css puts a shadow under every item of a right-aligned menu, and with Bootstrap 5's rounded items each one stood
   as a box of its own (user 2026-10-21, the header's notes menu: "looks bad"): plain rows, the icons in one column */
.dropdown-menu.dropdown-menu-end .dropdown-item {
    box-shadow: none;
}

/* the menus that buttons open (user 2026-10-22, the client page's menus and the work order window's ⋯: "this dropdowns
   look bad"): sing.css also took a right-aligned menu's padding away and squeezed its items to .3rem .2rem, and an icon
   stood against its word - room around the list and in each item, the text as large as the buttons that open the menus,
   the icons in a column of their own (grey; a coloured item keeps its colour). The header's menus (rich) keep theirs. */
.dropdown-menu.dropdown-menu-end:not(.dropdown-menu-rich) {
    padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
}

.dropdown-menu:not(.dropdown-menu-rich) .dropdown-item {
    padding: .45rem .75rem;
    font-size: .875rem;
}

.dropdown-menu:not(.dropdown-menu-rich) .dropdown-item:has(> i[class*="fa-"]) {
    gap: .6rem;
}

.dropdown-menu:not(.dropdown-menu-rich) .dropdown-item > i[class*="fa-"]:first-child {
    flex: none;
    width: 1rem;
    color: var(--sp-muted);
    text-align: center;
}

.dropdown-menu .dropdown-item:is([class*="text-"], .active, :active) > i[class*="fa-"]:first-child {
    color: inherit;
}

.dropdown-menu-rich .dropdown-item-body > i:first-child {
    width: 1.25em;
    text-align: center;
}

/* sing.css rings a focused or pressed button in grey with a shadow under it, so a clicked tab or button kept a line at
   its bottom (user 2026-10-21: "buttons in tab show the border bottom when focused, they should only show it on
   hover"): a mouse click leaves no mark, a solid button keeps its own small shadow, the keyboard gets Bootstrap's ring */
.btn:focus:not(:focus-visible),
.btn:active:not(:focus-visible) {
    outline: 0 !important;
    box-shadow: none !important;
}

.btn:not(.btn-link):not([class*="btn-outline"]):not(.btn-default):not(.btn-light):not(.btn-close):not(.nav-link):is(:focus, :active):not(:focus-visible) {
    box-shadow: 0 1px 2px rgba(16, 24, 40, .22), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

.btn:focus-visible {
    outline: 0 !important;
    box-shadow: var(--bs-btn-focus-box-shadow) !important;
}

/* ---------------------------------------------------------------- 8. pages (Spectrum's section 7 rules for markup
   GreenSing shares with Spectrum's old pages: the client page's figures, tabs and tables on phones) */
/* the client card's figures (ID, OBD, region, debts, dates): small tiles, the caption under the value */
.cl-flex--container > .description-block,
.card__left > .description-block {
    padding: 2px 4px;
    border: 1px solid var(--sp-line);
    border-radius: 6px;
    background: var(--sp-head);
}

.description-header {
    font-weight: 700;
}

.description-text {
    color: var(--sp-muted);
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

@media (max-width: 767.98px) {
    /* tabs: one row to swipe */
    .nav-tabs:not(.nav-tabs-vertical):not(.flex-column) {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        max-width: 100%;
        min-width: 0 !important;
        padding-bottom: 2px;
    }

    .nav-tabs:not(.nav-tabs-vertical):not(.flex-column)::-webkit-scrollbar {
        display: none;
    }

    .nav-tabs:not(.nav-tabs-vertical):not(.flex-column) > li {
        flex: 0 0 auto !important;
    }

    .nav-tabs:not(.nav-tabs-vertical):not(.flex-column) .nav-link {
        white-space: nowrap;
    }

    /* a tab row that also holds buttons (the counter's pay buttons): wraps, the buttons on their own line */
    .nav-tabs:not(.nav-tabs-vertical):not(.flex-column):has(> li > :not(.nav-link):not(.dropdown-menu)) {
        flex-wrap: wrap !important;
        overflow: visible;
    }

    .nav-tabs:not(.nav-tabs-vertical):not(.flex-column):has(> li > :not(.nav-link):not(.dropdown-menu)) > li:has(> :not(.nav-link):not(.dropdown-menu)) {
        flex: 1 1 100% !important;
    }

    /* a dropdown in the tab row: a sheet under its tab, not cut off by the scrolling row */
    .nav-tabs:not(.nav-tabs-vertical):not(.flex-column) .dropdown-menu.show {
        position: fixed !important;
        top: var(--dropdown-top, 30%) !important;
        left: 8px !important;
        right: 8px !important;
        transform: none !important;
        width: auto !important;
        max-height: 60vh;
        overflow-y: auto;
    }

    .nav-tabs .dropdown-item {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    /* DataTables' responsive mode: the open-row marker and the row's button on one line */
    table.dataTable td.dtr-control {
        white-space: nowrap !important;
    }

    table.dataTable td.dtr-control > div {
        display: inline-flex !important;
        vertical-align: middle;
        width: auto !important;
    }

    /* table titles beside the table's search on wide screens: above the table */
    .moveElem {
        position: static !important;
        text-align: left !important;
        font-weight: 600;
        margin: 8px 0 4px 0;
    }

    .select2-container .select2-selection,
    .select2-search__field {
        font-size: 16px !important;
    }

    .fixSelect .select2-selection,
    .wo-groups .select2-selection,
    #smallerSelects .select2-selection,
    #clientTypesHere .select2-container .select2-selection--multiple {
        height: auto !important;
        min-height: 44px;
    }

    .form-control:not(textarea):not([type="file"]),
    .form-select {
        min-height: 38px;
    }

    /* responsive.css stretches these to the full width; delete.css undid it (the Radius buttons, Раскин) */
    .btn-darkgreen, #smallerSelects .btn, #channelAnalog_wrapper .btn, #telopTable_wrapper .btn {
        width: unset;
    }


}

/* --- Клиент (billing pages/client-detail.php, source/includes/mobile_phones.php, cancelled_phones.php and the tabs'
   lists), user 2026-10-23: "redisign client-detail view" - Spectrum's client page (its app.css "Клиент"): the head (the
   initials, the name, the lawsuit flag, the address / ids / partner, the actions on the right, their names hidden
   below 1400 px), tiles for the debt, the balance, the subsidy and the penalties, one tab bar whose Финансии opens a row
   of pills under it, the lines as cards beside the picked line's panel. */
.cld-tone-ok { --cld-c: var(--sp-success); --cld-bg: var(--sp-ok-bg); --cld-fg: var(--sp-ok-fg); }
.cld-tone-warn { --cld-c: var(--sp-warning); --cld-bg: var(--sp-warn-bg); --cld-fg: var(--sp-warn-fg); --cld-on: var(--sp-warning-fg); }
.cld-tone-bad { --cld-c: var(--sp-danger); --cld-bg: var(--sp-bad-bg); --cld-fg: var(--sp-bad-fg); }
.cld-tone-info { --cld-c: var(--sp-info); --cld-bg: var(--sp-info-bg); --cld-fg: var(--sp-info-fg); }
.cld-tone-plain { --cld-c: var(--sp-muted); --cld-bg: var(--sp-grey-bg); --cld-fg: var(--sp-grey-fg); }

.cld-page {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.cld-page > .card {
    margin-bottom: 0;
}

/* --- the head --- */
.cld-head {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    grid-template-areas: "av name act" "av info act";
    align-items: center;
    gap: .15rem 1rem;
    padding: .85rem 1rem;
}

.cld-avatar {
    grid-area: av;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--sp-soft-bg);
    color: var(--sp-soft-fg);
    font-size: 1rem;
    font-weight: 700;
}

/* the name's line: the name and the flags */
.cld-title {
    grid-area: name;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .6rem;
    min-width: 0;
}

.cld-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.cld-info {
    grid-area: info;
    min-width: 0;
}

.cld-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1.1rem;
    color: var(--sp-muted);
    font-size: .875rem;
}

.cld-meta b {
    color: var(--sp-text);
    font-weight: 600;
}

.cld-meta i {
    margin-right: .35rem;
    opacity: .75;
}

.cld-flags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.cld-flags:not(:has(.cld-flag)) {
    display: none;
}

.cld-flag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 1.5rem;
    padding: 0 .55rem;
    border: 1px dashed var(--sp-line);
    border-radius: 999px;
    background: transparent;
    color: var(--sp-muted);
    font-size: .75rem;
    font-weight: 600;
}

.cld-flag.on {
    border: 1px solid var(--sp-danger);
    background: var(--sp-bad-bg);
    color: var(--sp-bad-fg);
}

/* a lawsuit that is paid: green */
.cld-flag.on.cld-flag-ok {
    border-color: var(--sp-success);
    background: var(--sp-ok-bg);
    color: var(--sp-ok-fg);
}

.cld-flag i {
    font-size: .65rem;
}

.cld-actions {
    grid-area: act;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .4rem;
}

.cld-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

.cld-actions .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cld-actions .dropdown-item > i {
    width: 1rem;
    color: var(--sp-muted);
    text-align: center;
}

/* --- the tiles --- */
.cld-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .75rem;
}

/* the lawsuit's tile alone (an open lawsuit): a tile's width, not the whole line */
.cld-tiles > .cld-tile:only-child {
    max-width: 24rem;
}

.cld-tiles .cld-tile {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-bottom: 0;
    padding: .75rem 1rem;
}

.cld-go {
    cursor: pointer;
}

.cld-go:hover,
.cld-go:focus-visible {
    border-color: var(--sp-muted);
}

.cld-tiles .cld-tile-bad {
    border-color: var(--sp-danger);
    box-shadow: inset 0 3px 0 var(--sp-danger);
}

/* the label, the figure and the link each stay whole: in a narrow tile the line wraps between them, never inside a
   word (the user 2026-10-23: "Потрош / ено") */
.cld-tile-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .15rem .5rem;
    color: var(--sp-muted);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cld-tile-label > *,
.cld-rows > * {
    white-space: nowrap;
}

.cld-tile-link {
    margin-left: auto;
    color: var(--bs-link-color);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.cld-tile-value {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

.cld-tile-value small {
    font-size: .8rem;
}

.cld-rows {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: .2rem 1rem;
    margin: 0;
    font-size: .92rem;
}

.cld-rows dt {
    color: var(--sp-muted);
    font-weight: 400;
}

.cld-rows dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.cld-zero,
.cld-rows dd.cld-zero,
.cld-tile-value.cld-zero {
    color: var(--sp-muted);
}

.cld-rows dd.cld-zero {
    font-weight: 400;
}

/* --- the tab bar: tabs, Финансии's pills under it --- */
.cld-body {
    margin-bottom: 0;
}

.cld-tabbar {
    border-bottom: 1px solid var(--sp-line);
}

.cld-tabs {
    display: flex;
    gap: .1rem;
    padding: .35rem .5rem 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.cld-tabbar .cld-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: -1px;
    padding: .55rem .75rem .6rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--sp-muted);
    font-weight: 600;
    white-space: nowrap;
}

.cld-tabbar .cld-tab:hover {
    color: var(--sp-text);
}

.cld-tabbar .cld-tab.active {
    border-bottom-color: var(--sp-primary);
    background: none;
    color: var(--bs-link-color);
}

.cld-caret {
    font-size: .6rem;
    opacity: .7;
}

.cld-count {
    min-width: 1.3rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--sp-grey-bg);
    color: var(--sp-grey-fg);
    font-size: .7rem;
    line-height: 1.15rem;
    text-align: center;
}

.cld-tab.active .cld-count {
    background: var(--sp-primary);
    color: var(--sp-primary-fg);
}

.cld-pills {
    display: none;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .5rem .75rem;
    border-top: 1px solid var(--sp-row-line);
}

.cld-pills.show {
    display: flex;
}

.cld-tabbar .cld-pill {
    padding: .2rem .75rem;
    border: 1px solid var(--sp-line);
    border-radius: 999px !important;
    background: var(--sp-surface);
    color: var(--sp-muted);
    font-size: .85rem;
    font-weight: 600;
}

.cld-tabbar .cld-pill:hover {
    color: var(--sp-text);
}

.cld-tabbar .cld-pill.active {
    border-color: var(--sp-primary);
    background: var(--sp-soft-bg);
    color: var(--sp-soft-fg);
}

.cld-panes {
    padding: .75rem;
}

/* the instalment contracts over the instalments */
.cld-sub {
    margin-bottom: .75rem;
}

.cld-sub .cld-svc-title {
    margin-bottom: .25rem;
}

.cld-sub-table {
    width: auto;
    min-width: 50%;
    margin-bottom: 0;
}

/* --- the lines: cards (left) beside the picked one's panel --- */
.cld-svc {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.cld-svc.cld-svc-split {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 3fr);
    align-items: start;
}

.cld-svc-side-col {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-width: 0;
}

.cld-svc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.cld-svc-title {
    color: var(--sp-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cld-svc-head .cld-line-search {
    flex: 1 1 8rem;
    max-width: 14rem;
}

.cld-svc-list {
    flex-wrap: nowrap;
    gap: .4rem;
}

/* many lines: the list scrolls (calcHeight fits it to the window) */
.cld-line-list {
    overflow-y: auto;
    padding-right: 2px;
}

.cld-svc-list .cld-svc-card {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: .5rem .65rem;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-ctl) !important;
    background: var(--sp-surface);
    color: var(--sp-text);
    cursor: pointer;
}

.cld-svc-list .cld-svc-card:hover {
    border-color: var(--sp-muted);
    color: var(--sp-text);
}

.cld-svc-list .cld-svc-card.active {
    border-color: var(--sp-primary);
    background: var(--sp-surface);
    box-shadow: inset 0 0 0 1px var(--sp-primary);
    color: var(--sp-text);
}

.cld-svc-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .5rem;
    background: var(--cld-bg);
    color: var(--cld-c);
    font-size: 1rem;
}

.cld-svc-main {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.cld-svc-top,
.cld-svc-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .6rem;
}

.cld-svc-name {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cld-svc-pkg {
    color: var(--sp-muted);
    font-size: .82rem;
}

.cld-svc-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    min-width: 0;
}

.cld-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 1.3rem;
    padding: .05rem .45rem;
    border-radius: .3rem;
    background: var(--sp-grey-bg);
    color: var(--sp-grey-fg);
    font-size: .72rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.cld-tag[class*=cld-tone-] {
    background: var(--cld-bg);
    color: var(--cld-fg);
}

.cld-tag i {
    font-size: .65rem;
    opacity: .75;
}

/* the resend arrow of a porting that failed: about a tag's height */
.cld-svc-act {
    display: inline-flex;
    align-items: center;
    height: 1.4rem;
    padding: 0 .45rem;
    font-size: .72rem;
}

.cld-none {
    padding: .5rem 0;
    list-style: none;
}

/* the picked line's panel: a framed box beside the cards; before a line is picked, a hint */
.cld-svc-split .cld-svc-panel {
    min-width: 0;
    min-height: 10rem;
    padding: .5rem;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-card);
}

.cld-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 9rem;
    color: var(--sp-muted);
}

@media (max-width: 1399.98px) {
    .cld-actions .cld-lbl {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .cld-rows {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cld-tabs .cld-tab > i:not(.cld-caret) {
        display: none;
    }

    .cld-tabbar .cld-tab {
        padding: .55rem .6rem .6rem;
    }
}

@media (max-width: 991.98px) {
    .cld-svc.cld-svc-split {
        display: flex;
    }
}

/* phones: the actions under the name, two tiles a line */
@media (max-width: 767.98px) {
    .cld-head {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        grid-template-areas: "av name" "info info" "act act";
        gap: .25rem .75rem;
        padding: .75rem;
    }

    .cld-avatar {
        width: 2.5rem;
        height: 2.5rem;
        font-size: .9rem;
    }

    .cld-name {
        font-size: 1.1rem;
    }

    .cld-actions {
        justify-content: flex-start;
        margin-top: .5rem;
    }

    .cld-tiles {
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }

    .cld-tile-label {
        flex-wrap: wrap;
    }

    .cld-tile-label .cld-tile-value {
        flex-basis: 100%;
        order: 2;
    }

    .cld-panes {
        padding: .5rem;
    }
}

/* --- Нов договор / Обнова (billing pages/new-deal.php, add-renew-deal.php, source/includes/dealPage.php), user
   2026-10-23: "add-renew-deal new-deal redisign" - Spectrum's redesigned Нов договор (its app.css "Нов договор /
   Миграција"): the three steps (Клиент, Број, Снимено) as numbered pills, a step not reached yet greyed; each step's
   fields in titled sections (two columns, three on the number step, one on a phone); quiet field titles (also those of
   the fragments source/deal/deal_options.php loads into the number step); the message and the buttons in one bar under
   the step; the saved numbers as cards beside the client's summary. The markup keeps every id and label + field pair
   (.form-group) the pages' scripts read. */
.deal-page .deal-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--sp-line);
}

.deal-page .deal-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Обнова: the client it renews, a link back to the client */
.deal-page .deal-sub {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1rem;
    margin: .3rem 0 0 calc(34px + .6rem);
    color: var(--sp-muted);
    font-size: .875rem;
}

.deal-page .deal-sub a {
    color: var(--bs-link-color);
    font-weight: 600;
    text-decoration: none;
}

.deal-page .deal-sub a:hover {
    text-decoration: underline;
}

.deal-page .deal-sub i {
    margin-right: .35rem;
}

.deal-page .deal-sub b {
    color: var(--sp-text);
}

.deal-page .deal-steps {
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
}

.deal-page .deal-steps .nav-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* a line between the steps */
.deal-page .deal-steps .nav-item + .nav-item::before {
    content: "";
    width: 2rem;
    height: 2px;
    border-radius: 1px;
    background: var(--sp-line);
}

.deal-page .deal-steps .nav-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .9rem .25rem .3rem;
    border: 1px solid var(--sp-line);
    border-radius: 999px !important;
    background: var(--sp-surface);
    color: var(--sp-muted);
    font-weight: 600;
    line-height: 1.5;
}

.deal-page .deal-steps a.nav-link:hover {
    border-color: var(--sp-primary);
    color: var(--sp-text);
}

.deal-page .deal-steps .nav-link.active {
    border-color: var(--sp-primary);
    background: var(--sp-primary);
    color: var(--sp-primary-fg);
}

.deal-page .deal-steps .nav-link.disabled {
    opacity: .55;
}

.deal-page .deal-step-no {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--sp-head);
    color: var(--sp-text);
    font-size: .8rem;
    font-weight: 700;
}

.deal-page .deal-steps .nav-link.active .deal-step-no {
    background: rgba(255, 255, 255, .22);
    color: inherit;
}

/* how many numbers are saved */
.deal-page .deal-step-count {
    min-width: 1.3rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--sp-grey-bg);
    color: var(--sp-grey-fg);
    font-size: .72rem;
    line-height: 1.2rem;
    text-align: center;
}

.deal-page .deal-steps .nav-link.active .deal-step-count {
    background: rgba(255, 255, 255, .22);
    color: inherit;
}

/* the sections: the contract and the client on the left (wider), the addresses and the login on the right; the number
   step's number, subsidy and package side by side; the saved step's client summary beside the numbers */
.deal-page .deal-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}

.deal-page .deal-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.deal-page .deal-grid-saved {
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 2.2fr);
}

.deal-page .deal-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.deal-page .deal-sec {
    min-width: 0;
    padding: .75rem 1rem 1rem;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-card);
    background: var(--sp-surface);
}

.deal-page .deal-sec-title {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 .75rem;
    font-size: .95rem;
    font-weight: 700;
}

.deal-page .deal-sec-title > i {
    width: 1.1em;
    color: var(--sp-primary);
    text-align: center;
}

/* fields on six columns: .span-2 / -3 / -4, any other a whole row */
.deal-page .deal-fields {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
}

.deal-page .deal-fields > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.deal-page .deal-fields > .span-2 {
    grid-column: span 2;
}

.deal-page .deal-fields > .span-3 {
    grid-column: span 3;
}

.deal-page .deal-fields > .span-4 {
    grid-column: span 4;
}

.deal-page .deal-fields > .hidden {
    display: none;
}

.deal-page :is(.form-control, .form-select) {
    min-height: 34px;
    font-size: .875rem;
}

.deal-page .form-group {
    margin-bottom: 0;
}

/* the field titles: quiet, at the app's 12 px - those of the loaded fragments too (they come with a colour each) */
.deal-page .form-group .label {
    top: 0;
    margin-bottom: 4px;
    padding: 0 2px;
    color: var(--sp-muted) !important;
    font-size: .75rem;
    line-height: 1.35;
}

.deal-page .form-group .label > i {
    display: none;
}

/* what the number step loads under its first field (the number, the porting's data, the subsidy's choices): the
   fragments' own rows and fields spaced like the sections' */
.deal-page .deal-more:not(:empty) {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: .75rem;
}

.deal-page .deal-more .form-group + .form-group {
    margin-top: .75rem;
}

.deal-page .deal-more :is(.row, .col-md-12, .col-md-6) {
    margin-right: 0;
    margin-left: 0;
}

.deal-page .deal-more .row {
    --bs-gutter-x: .75rem;
    row-gap: .75rem;
}

.deal-page .deal-more .row > * {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

.deal-page .deal-more .row:has(> .col-md-12) > .col-md-12,
.deal-page .deal-more > .col-md-12 {
    padding: 0;
}

/* the package's checks and prices (deal_options.php packageData): quiet small tables */
.deal-page #packageData .table {
    margin-bottom: .5rem;
    font-size: .82rem;
}

/* the buttons under a step (the message first, on the left) */
.deal-page .deal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--sp-line);
}

.deal-page .deal-actions > [class^=msg] {
    flex: 1 1 12rem;
    min-width: 0;
}

.deal-page .deal-actions .btn {
    --bs-btn-padding-x: 1rem;
    flex: none;
}

/* the client's summary: label and value per line, the total subsidy bold over a line */
.deal-page .deal-sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--sp-row-line);
}

.deal-page .deal-sum-row > span {
    color: var(--sp-muted);
}

.deal-page .deal-sum-row > strong {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow-wrap: anywhere;
}

.deal-page .deal-sum-row.deal-sum-total {
    border-top: 2px solid var(--sp-line);
    border-bottom: 0;
}

.deal-page .deal-sum-row.deal-sum-total > strong {
    font-size: 1.05rem;
    font-weight: 700;
}

/* a saved number: its kind, the number and × on the first line, its facts under it */
.deal-page .deal-phone-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
}

.deal-page .deal-phone-no {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.deal-page .deal-phone-head .delPhone {
    margin-left: auto;
}

.deal-page .deal-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: .5rem 1rem;
    margin: 0;
}

.deal-page .deal-facts dt {
    color: var(--sp-muted);
    font-size: .72rem;
    font-weight: 600;
}

.deal-page .deal-facts dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* the porting's / the old owner's data under a line */
.deal-page .deal-facts-more {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--sp-line);
}

/* three sections side by side only where each is wide enough */
@media (max-width: 1399.98px) {
    .deal-page .deal-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .deal-page .deal-grid-3 > .deal-summary {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .deal-page :is(.deal-grid, .deal-grid-saved) {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .deal-page .deal-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .deal-page .deal-sec {
        padding: .65rem .75rem .75rem;
    }

    .deal-page .deal-fields > :is(.span-2, .span-3, .span-4) {
        grid-column: 1 / -1;
    }

    .deal-page .deal-steps .nav-item + .nav-item::before {
        width: .75rem;
    }

    .deal-page .deal-actions .btn {
        flex: 1 1 auto;
    }
}

/* --- search and report forms --- */
/* the buttons beside a form's fields (#btnsRep_pay in a .btn-toolbar column, 28 pages): level with the fields and as
   tall as one, under the 20 px of the fields' titles, each as wide as its label (sing.css: 44 px high for the old
   coloured title bars, each nearly half the column wide) - as .singBtn__container's (section 7): a button the column
   has no room for goes under the first, a label longer than the whole column wraps in a button that grows */
#btnsRep_pay {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 3px;
    padding-top: 20px;
}

#btnsRep_pay .btn {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 26px;
    line-height: 1;
}

/* the fields' titles (.form-group .label - sing.css: 10 px, 12 px in from the field's edge, pushed 2 px down) at a
   readable 11.5 px from the edge; their icon in proportion (sing.css gives every icon in a form group 1.1rem, 17.6 px,
   beside 10 px words). The line stays 18 px high, so the buttons beside the fields (#btnsRep_pay) stay level */
.form-group .label {
    padding: 0 2px;
    top: 0;
    font-size: 11.5px;
}

.form-group .label > i[class*="fa-"] {
    width: 1.2em;
    font-size: 1.15em;
    text-align: center;
}

/* a table's dates on one line (DataTables 3 marks a date column dt-type-date): squeezed by the other columns they
   broke after the year (2025- / 02-12) and doubled every row */
table.dataTable :is(td, th).dt-type-date {
    white-space: nowrap;
}

/* --- Наплата (billing pages/invoice-payment.php), user 2026-10-23: "redisign invoice-payment" - Spectrum's Шалтер in the
   client page's look (.cld-avatar, .cld-tabbar, .cld-count and .cld-tag come from the client page): the client card on
   the left (the search, the client, what is owed, the active lines), on the right the checkout bar (the sum of what is
   marked, the partner, the buttons with Наплати last) over the tabs, quiet tables with a tick per row and the amounts
   as figures, a marked row light with a line at its start. Below 992 px the card goes above the bill. --- */
.ip-page {
    display: grid;
    grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
}

.ip-page:focus {
    outline: none;
}

.ip-page > .card {
    margin-bottom: 0;
}

.ip-title,
.ip-label {
    margin: 0;
    color: var(--sp-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* the client card */
.ip-side {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: .9rem 1rem;
}

.ip-search {
    position: relative;
}

.ip-search > i {
    position: absolute;
    top: 50%;
    left: .8rem;
    color: var(--sp-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.ip-search .form-control {
    padding: .5rem .75rem .5rem 2.3rem;
    font-size: .95rem;
}

.ip-client {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
}

.ip-client .cld-avatar {
    grid-area: auto;
}

.ip-client-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    min-width: 0;
}

.ip-client-name {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ip-client-addr {
    color: var(--sp-muted);
    font-size: .875rem;
}

.ip-client-addr i {
    margin-right: .35rem;
    opacity: .75;
}

.ip-page .ip-client-id {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .3rem;
    border: 1px solid var(--sp-line);
    background: var(--sp-surface);
    color: var(--sp-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ip-page .ip-client-id:is(:hover, :focus-visible) {
    border-color: var(--sp-primary);
    background: var(--sp-soft-bg);
    color: var(--sp-soft-fg);
}

.ip-client-id i {
    color: var(--sp-primary);
    font-size: .8rem;
}

/* what is owed, the advance, the subsidy */
.ip-figures {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .3rem 1rem;
    margin: 0;
    padding: .65rem .8rem;
    border-radius: var(--sp-r-ctl);
    background: var(--sp-head);
    font-size: .875rem;
}

.ip-figures dt {
    color: var(--sp-muted);
    font-weight: 400;
}

.ip-figures dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ip-figures small,
.ip-lines small {
    font-size: .75em;
    font-weight: 600;
}

.ip-figures dd.ip-zero {
    color: var(--sp-muted);
    font-weight: 400;
}

/* the active lines: the number and the price, under them the contract and its end; many lines scroll */
.ip-lines-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: -.6rem;
}

.ip-lines {
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

/* the card no taller than the window (the bill beside it is fitted by calcHeight): only the list of lines gives way */
@media (min-width: 992px) {
    .ip-side {
        max-height: calc(100vh - 7rem);
    }

    .ip-side > * {
        flex-shrink: 0;
    }

    .ip-side > .ip-lines {
        flex-shrink: 1;
        min-height: 3rem;
    }
}

.ip-lines li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .15rem .5rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--sp-row-line);
}

.ip-lines li:last-child {
    border-bottom: 0;
}

.ip-line-no {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ip-line-price {
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ip-line-contract {
    color: var(--sp-muted);
    font-size: .8rem;
}

.ip-lines .cld-tag {
    justify-self: end;
    font-variant-numeric: tabular-nums;
}

/* the bill: before a client is picked, a hint */
.ip-main {
    min-width: 0;
}

.ip-start {
    justify-content: center;
    min-height: 18rem;
}

/* the checkout bar: the sum (grey while nothing is marked), the partner, a message, the buttons with Наплати last */
.ip-checkout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.25rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--sp-line);
    border-radius: var(--sp-r-card) var(--sp-r-card) 0 0;
    background: var(--sp-head);
}

.ip-sum {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: .75rem;
}

.ip-sum .ip-label {
    grid-column: 1 / -1;
}

.ip-sum-value {
    color: var(--sp-muted);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ip-has .ip-sum-value {
    color: var(--sp-text);
}

.ip-sum-value small {
    color: var(--sp-muted);
    font-size: .9rem;
    font-weight: 600;
}

.ip-sum-count {
    color: var(--sp-muted);
    font-size: .8rem;
}

.ip-partner {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 12rem;
}

.ip-msg {
    color: var(--sp-bad-fg);
    font-size: .875rem;
    font-weight: 600;
}

.ip-msg:empty {
    display: none;
}

.ip-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-left: auto;
}

.ip-buttons .btn,
.ip-tools .btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

/* the quiet buttons: the colour in the icon */
:is(.ip-page, .ip-win) .ip-quiet {
    border: 1px solid var(--sp-line);
    background: var(--sp-surface);
    color: var(--sp-text);
}

:is(.ip-page, .ip-win) .ip-quiet:is(:hover, :focus-visible, :active) {
    border-color: var(--sp-line);
    background: var(--sp-soft-bg);
    color: var(--sp-soft-fg);
}

.ip-quiet i {
    color: var(--sp-primary);
}

.ip-pay {
    padding-right: 1.1rem;
    padding-left: 1.1rem;
    font-weight: 600;
}

.ip-pay kbd {
    padding: .05rem .3rem;
    border-radius: .25rem;
    background: rgba(255, 255, 255, .2);
    color: inherit;
    font-size: .7rem;
}

/* a scanned invoice that is not to pay any more */
.ip-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .75rem 1rem 0;
    padding: .45rem .75rem;
    border-left: 3px solid var(--bs-warning);
    border-radius: var(--sp-r-ctl);
    background: var(--sp-warn-bg);
    color: var(--sp-warn-fg);
    font-size: .875rem;
}

/* the tabs: a count in red where something is owed (the client page's look) */
.ip-page .cld-tabbar .cld-count.ip-owed {
    background: var(--sp-bad-bg);
    color: var(--sp-bad-fg);
}

.ip-panes {
    padding: .6rem .75rem .75rem;
}

.ip-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .5rem;
}

.ip-scroll {
    overflow: auto;
}

/* the tables: a line between rows, no grid, the head stays in view; a tick per row, the amount as a figure */
.ip-table {
    margin: 0;
}

.ip-table > :not(caption) > * > * {
    padding: .5rem .6rem;
    border-right: 0 !important;   /* sing.css draws every cell's right line, !important */
    border-bottom-color: var(--sp-row-line);
    text-align: left;
    vertical-align: middle;
}

.ip-table > :not(caption) > * > .text-end {
    text-align: right;
}

.ip-table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--sp-line);
    background: var(--sp-surface);
    color: var(--sp-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ip-table td {
    font-size: .9rem;
}

.ip-table tbody tr {
    cursor: pointer;
}

.ip-table tbody tr:hover > * {
    --bs-table-bg-state: var(--sp-head);
}

/* centred like the head's tick (every table head is centred, !important) */
.ip-table .ip-check {
    width: 2.5rem;
    text-align: center;
}

.ip-table .ip-check .form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    cursor: pointer;
}

.ip-no {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ip-late {
    color: var(--sp-danger);
}

.ip-amount {
    font-size: .95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ip-table .ip-acts {
    width: 1%;
    white-space: nowrap;
}

.ip-page .ip-icon {
    border: 1px solid transparent;
    background: transparent;
    color: var(--sp-muted);
}

.ip-page .ip-icon:is(:hover, :focus-visible) {
    border-color: var(--sp-line);
    background: var(--sp-surface);
    color: var(--sp-primary);
}

/* a marked row: light, a line at its start (sing.css's .selected paints it dark green, !important) */
.ip-table > tbody > tr.selected {
    background-color: transparent !important;
    color: inherit;
}

.ip-table > tbody > tr.selected > * {
    --bs-table-bg-state: var(--sp-soft-bg);
    color: var(--sp-text);
}

.ip-table > tbody > tr.selected > td:first-child {
    box-shadow: inset 3px 0 0 var(--sp-primary), inset 0 0 0 9999px var(--sp-soft-bg);
}

/* its windows (source/payment/payModal.php, upFrontPayment.php): the title with its icon, the sum to pay, the payment
   type as two large buttons, the amount received and the change side by side, the result with a large icon */
.ip-win-title {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ip-win-title > i {
    color: var(--sp-primary);
}

.modal-body.ip-win {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.1rem;
}

.ip-win .ip-label {
    display: block;
    margin-bottom: .25rem;
}

.ip-pay-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: .5rem;
    padding: .75rem;
    border-radius: var(--sp-r-ctl);
    background: var(--sp-head);
}

.ip-pay-figure {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ip-pay-figure small {
    color: var(--sp-muted);
    font-size: 1rem;
    font-weight: 600;
}

.ip-paytypes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin-bottom: .5rem;
}

.ip-paytypes .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem .75rem;
    border: 1px solid var(--sp-line);
    background: var(--sp-surface);
    color: var(--sp-text);
    font-weight: 600;
}

.ip-paytypes .btn > i {
    color: var(--sp-primary);
}

.ip-paytypes .btn-check:checked + .btn {
    border-color: var(--sp-primary);
    background: var(--sp-primary);
    color: var(--sp-primary-fg);
}

.ip-paytypes .btn-check:checked + .btn > i {
    color: inherit;
}

.ip-paytypes .btn-check:focus-visible + .btn {
    box-shadow: 0 0 0 .2rem rgba(var(--sp-primary-rgb), .3);
}

.ip-pay-cash {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.ip-pay-change {
    display: block;
    padding: .375rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.modal-body.ip-pay-result {
    align-items: center;
    gap: .35rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.ip-pay-result > i {
    margin-bottom: .25rem;
    font-size: 2.25rem;
}

.ip-pay-ok > i {
    color: var(--sp-success);
}

.ip-pay-bad > i {
    color: var(--sp-danger);
}

.ip-pay-result p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem .5rem;
    margin: 0;
    font-size: .95rem;
}

.ip-pay-result p > span {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 991.98px) {
    .ip-page {
        grid-template-columns: minmax(0, 1fr);
    }

    .ip-buttons {
        margin-left: 0;
    }
}

/* a window or panel with nothing to list: the message centred under a large faint icon (Spectrum's) */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.75rem 1rem;
    color: var(--bs-secondary-color);
    font-size: .8125rem;
    text-align: center;
}

.empty-state > i {
    font-size: 1.75rem;
    opacity: .5;
}

/* a table's export buttons as wide as their labels: in a narrow column they wrap, and the wrapped ones stretched over
   the whole row (a .btn-group's buttons grow) */
.dt-buttons.btn-group {
    flex-wrap: wrap;
}

.dt-buttons.btn-group > .btn {
    flex: 0 0 auto;
}

/* a table's top row (its buttons, its search - the pages' dom: "col-6 B" + "col-6 f"): each part as wide as it needs,
   on two lines when the table is narrow (warehouse settings: a 165 px button in a 125 px half ran into the search) */
.dt-container > .row:has(> [class*="col-"] > .dt-buttons, > [class*="col-"] > .dt-search) {
    flex-wrap: wrap;
    row-gap: 4px;
}

.dt-container > .row:has(> [class*="col-"] > .dt-buttons, > [class*="col-"] > .dt-search) > [class*="col-"] {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
}

/* --- Клиенти (billing pages/clients.php + source/client/client.php), user 2026-10-23: "redesign clients view" ---
   Spectrum's client list (its app.css: Клиенти, with the parts of Налози it uses: .wo-bar, .wo-count, .wo-search,
   .wo-tag, .wo-name / .wo-sub): a bar with the title, the count and the search; the client's number as the button
   that opens the client, the cashier beside it; two-line cells; the partner as a muted tag; the client's numbers as
   tags (green active, red cancelled). On phones each client is a card. */
.wo-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: .5rem;
}

.wo-count {
    min-width: 1.5rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--sp-grey-bg);
    color: var(--sp-grey-fg);
    font-size: .72rem;
    line-height: 1.2rem;
    text-align: center;
}

.wo-search {
    position: relative;
    flex: 0 1 22rem;
    margin-left: auto;
}

.wo-search > i {
    position: absolute;
    top: 50%;
    left: .6rem;
    color: var(--sp-muted);
    font-size: .8rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.wo-search .form-control {
    padding-left: 1.8rem;
}

.wo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.wo-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: 0 .4rem;
    border-radius: .3rem;
    font-size: .72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2rem;
    white-space: nowrap;
}

.wo-tag-ok { background: var(--sp-ok-bg); color: var(--sp-ok-fg); }
.wo-tag-bad { background: var(--sp-bad-bg); color: var(--sp-bad-fg); }
.wo-tag-grey { background: var(--sp-grey-bg); color: var(--sp-grey-fg); }

.wo-name {
    font-weight: 600;
}

.wo-sub {
    color: var(--sp-muted);
    font-size: .75rem;
}

/* the title beside the count */
.cl-page .cl-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.cl-page .cl-title > i {
    color: var(--sp-muted);
}

.cl-page table.cl-table > thead > tr > th {
    text-align: left !important;
}

.cl-page table.cl-table thead .dt-column-header {
    justify-content: flex-start;
}

.cl-page table.cl-table > tbody > tr > td {
    padding: 6px 8px !important;
    text-align: left;
    vertical-align: top;
    white-space: normal;
    line-height: 1.35;
}

.cl-page table.cl-table > tbody > tr > td.dt-empty {
    padding: 1.5rem !important;
    color: var(--sp-muted);
    text-align: center;
}

.cl-page table.cl-table .cl-c-kid {
    width: 1%;
    white-space: nowrap;
}

.cl-acts {
    display: flex;
    gap: 4px;
}

/* the row's buttons in full colour (badges are the muted ones), only their size here */
.cl-page .btn.cl-kid,
.cl-page .btn.cl-act {
    height: 26px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cl-page .btn.cl-kid {
    min-width: 64px;
    padding: 0 .5rem !important;
}

.cl-page .btn.cl-act {
    width: 30px;
    padding: 0 !important;
}

.cl-page table.cl-table .cl-c-client { min-width: 180px; }
.cl-page table.cl-table .cl-c-addr { min-width: 160px; }
.cl-page table.cl-table .cl-c-lines { min-width: 120px; }

.cl-pkg {
    display: inline-block;
    padding: 0 .45rem;
    border-radius: .3rem;
    background: var(--sp-grey-bg);
    color: var(--sp-grey-fg);
    font-size: .75rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

/* tablets: the whole row without scrolling sideways */
@media (min-width: 768px) and (max-width: 991.98px) {
    .cl-page table.cl-table .cl-c-client,
    .cl-page table.cl-table .cl-c-addr {
        min-width: 110px;
    }

    .cl-page table.cl-table > tbody > tr > td {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .cl-pkg {
        white-space: normal;
    }
}

/* phones: each client a card - the number and its buttons with the partner, the name, the address, the numbers */
@media (max-width: 767.98px) {
    .cl-page .wo-search {
        flex: 1 1 100%;
    }

    .cl-page table.cl-table > thead {
        display: none;
    }

    .cl-page table.cl-table,
    .cl-page table.cl-table > tbody {
        display: block;
        width: 100% !important;
    }

    .cl-page table.cl-table > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .25rem .75rem;
        padding: .6rem .5rem;
        border-bottom: 1px solid var(--sp-line);
    }

    /* (the table's hover shades each cell: in a card that was a patchwork of grey blocks) */
    .cl-page table.cl-table > tbody > tr > td {
        display: block;
        flex: 1 1 100%;
        order: 3;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .cl-page table.cl-table > tbody > tr > td.cl-c-kid {
        flex: 1 1 auto;
        order: 1;
    }

    .cl-page table.cl-table > tbody > tr > td.cl-c-pkg {
        flex: 0 1 auto;
        order: 2;
    }

    .cl-page .btn.cl-kid,
    .cl-page .btn.cl-act {
        height: 34px;
    }

    .cl-page .btn.cl-act {
        width: 38px;
    }
}

/* --- The list and report pages (billing source/includes/repList.php), user 2026-10-23: "go through all the pages ...
   and redesign" - Spectrum's Компанија / reports look (its app.css: .mg-list-*, .co-*, .rp-*, .wo-field, .wo-tabs):
   the head (an icon, the title, how many rows, the exports at the right end), the filters as quiet labelled fields
   with Прикажи, the figures as boxes, the tabs with their counts and the search at their end, the list as on Клиенти
   (.cl-page .cl-table: two-line cells, solid buttons, the row's state as a bar at its start, cards on phones). */
.wo-field {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.wo-field > label {
    margin: 0;
    color: var(--sp-muted);
    font-size: .72rem;
    font-weight: 600;
}

.wr-help {
    color: var(--sp-muted);
    font-size: .78rem;
    line-height: 1.3;
}

.wo-bar .wo-tabs.nav-tabs {
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.wo-bar .wo-tabs.nav-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    height: auto;
    padding: .3rem .65rem;
    line-height: 1.4;
}

.wo-tabs .nav-link.active .wo-count {
    background: var(--sp-primary);
    color: var(--sp-primary-fg);
}

.wo-tone-danger { color: var(--bs-danger); }
.wo-tone-warning { color: var(--bs-warning); }
.wo-tone-success { color: var(--bs-success); }
.wo-tone-primary { color: var(--bs-primary); }
.wo-tone-info { color: var(--bs-info); }
.wo-tone-secondary { color: var(--bs-secondary-color); }

.wo-tag-warn { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.wo-tag-info { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }

.mg-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: .5rem;
    background: var(--sp-soft-bg);
    color: var(--sp-soft-fg);
    font-size: .95rem;
}

.mg-list-head {
    align-items: center;
}

.mg-list-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.mg-list-title h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.mg-list-head > .wo-search {
    flex: 0 1 22rem;
}

.mg-list-tools {
    margin-left: auto;
}

.mg-list-tools .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.mg-list-tools .dt-buttons > .btn {
    margin: 0 !important;
    border-radius: var(--bs-btn-border-radius) !important;
}

.co-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: .6rem;
}

.co-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-left: auto;
}

.co-tools > .btn {
    white-space: nowrap;
}

/* the figures: a box each in a wrapping row */
.co-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .6rem;
}

.co-stat {
    display: flex;
    flex: 0 1 15rem;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .45rem .75rem;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-card);
    background: var(--sp-surface);
}

.co-stat > i {
    flex: 0 0 auto;
    width: 1.3em;
    font-size: 1.1rem;
    text-align: center;
}

.co-stat-label {
    color: var(--sp-muted);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.25;
}

.co-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* the tabs' line: the search at its right end, under the tabs when it does not fit */
.co-page .wo-bar {
    align-items: flex-end;
}

.co-page .wo-bar .wo-search {
    flex: 0 1 22rem;
    margin-left: auto;
}

/* the filters: quiet labelled fields on one line, Прикажи at its end */
.co-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem .6rem;
    margin-bottom: .6rem;
}

.co-filters > .wo-field .form-control[type=date],
.co-filters > .wo-field .form-control[type=month] {
    width: 9.5rem;
}

.co-filters > .co-filter-wide {
    flex: 0 1 17rem;
    min-width: 12rem;
}

.co-filters > .co-filter-wide .select2-container {
    width: 100% !important;
}

.rp-filters .rp-number {
    width: 6rem;
}

.rp-filters > .rp-note {
    flex: 1 1 100%;
}

.rp-page .co-top .mg-list-title h4 > .wo-count {
    margin-left: .35rem;
    font-size: .75rem;
    vertical-align: middle;
}

/* the cells: numbers and amounts right, dates on one line, a row's buttons as narrow as they are */
.mg-page table.cl-table .mg-c-act,
.mg-page table.cl-table .mg-c-date {
    width: 1%;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mg-page table.cl-table .mg-c-kind {
    min-width: 90px;
}

.mg-page table.cl-table > tbody > tr > td.mg-c-num,
.mg-page table.cl-table > thead > tr > th.mg-c-num,
.mg-page table.cl-table > tfoot > tr > th.mg-c-num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mg-page table.cl-table thead th.mg-c-num .dt-column-header {
    justify-content: flex-end;
}

.mg-page table.cl-table .mg-c-by {
    color: var(--sp-muted);
    font-size: .8rem;
}

.mg-page .cl-acts > .btn {
    white-space: nowrap;
}

/* the row's state as a bar at its start: ok green, bad red, waiting amber, off grey */
.co-page table.cl-table > tbody > tr.co-st-ok > td:first-child { box-shadow: inset 3px 0 0 var(--bs-success); }
.co-page table.cl-table > tbody > tr.co-st-bad > td:first-child { box-shadow: inset 3px 0 0 var(--bs-danger); }
.co-page table.cl-table > tbody > tr.co-st-warn > td:first-child { box-shadow: inset 3px 0 0 var(--bs-warning); }
.co-page table.cl-table > tbody > tr.co-st-off > td:first-child { box-shadow: inset 3px 0 0 var(--sp-line); }
.co-page table.cl-table > tbody > tr.co-st-off > td { color: var(--sp-muted); }

/* the totals row the exports carry: bold, a line over it */
.rp-page table.cl-table > tfoot > tr > th {
    padding: 6px 8px;
    border-top: 2px solid var(--sp-line);
    font-weight: 700;
    white-space: nowrap;
}

/* a long text (an SMS, a note) gets room and wraps */
.rp-page table.cl-table > tbody > tr > td.rp-c-long {
    min-width: 18rem;
    white-space: normal;
}

/* up to 1400 px the exports are icons (their names in the tooltip) */
@media (max-width: 1399.98px) {
    .mg-list-tools .buttons-excel .mg-bt,
    .mg-list-tools .buttons-pdf .mg-bt,
    .mg-list-tools .buttons-print .mg-bt {
        display: none;
    }

    .wo-bar .wo-tabs.nav-tabs .nav-link {
        gap: .3rem;
        padding: .3rem .45rem;
    }
}

/* phones: the lists are cards (Клиенти's rules for .cl-table), numbers with their title; the totals are the figures */
@media (max-width: 767.98px) {
    .mg-list-head > .wo-search,
    .co-page .wo-bar .wo-search {
        flex: 1 1 100%;
    }

    .co-filters > .wo-field,
    .co-filters > .co-filter-wide {
        flex: 1 1 calc(50% - .3rem);
        min-width: 0;
    }

    .co-filters > .wo-field .form-control[type=date],
    .co-filters > .wo-field .form-control[type=month],
    .rp-filters .rp-number {
        width: 100%;
    }

    .co-filters > #rpShow {
        flex: 1 1 100%;
        height: 38px;
    }

    .co-stats > .co-stat {
        flex: 1 1 calc(50% - .25rem);
    }

    .rp-page table.cl-table > tfoot {
        display: none;
    }

    .mg-page table.cl-table > tbody > tr > td:is(.mg-c-act, .mg-c-kind) {
        flex: 0 0 auto;
        order: 1;
        width: auto;
    }

    .mg-page table.cl-table > tbody > tr > td.mg-c-date {
        flex: 1 1 auto;
        order: 2;
        width: auto;
        color: var(--sp-muted);
        font-size: .8rem;
        text-align: right;
    }

    .mg-page table.cl-table > tbody > tr > td:is(.mg-c-num, .mg-c-by) {
        flex: 0 1 auto;
        order: 4;
        width: auto;
        text-align: left !important;
    }

    .mg-page table.cl-table > tbody > tr > td:is(.mg-c-num, .mg-c-by)::before {
        content: attr(data-label) ": ";
        color: var(--sp-muted);
        font-size: .72rem;
    }

    .mg-page table.cl-table > tbody > tr > td:empty {
        display: none;
    }

    .rp-page table.cl-table > tbody > tr > td.rp-c-long {
        min-width: 0;
    }
}

/* Извештај за АЕК (billing pages/reportAek.php): its rows' groups as the lists' bars (they were solid inline colours,
   unreadable in the dark theme) - subscriptions purple, services amber, green, sums blue, the other income red, the
   total bold under a line */
.aek-page table.cl-table > tbody > tr.aek-sub > td:first-child { box-shadow: inset 3px 0 0 var(--bs-purple); }
.aek-page table.cl-table > tbody > tr.aek-sum > td:first-child { box-shadow: inset 3px 0 0 var(--bs-primary); }
.aek-page table.cl-table > tbody > tr.aek-sum > td,
.aek-page table.cl-table > tbody > tr.aek-total > td {
    font-weight: 700;
}

.aek-page table.cl-table > tbody > tr.aek-total > td {
    border-top: 2px solid var(--sp-line);
}

.aek-page table.cl-table > tbody > tr > td:not(:first-child),
.aek-page table.cl-table > thead > tr > th:not(:first-child) {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

/* --- Подесувања -> Крон задачи (billing pages/cronJobs.php + source/cron/cronJobs.php), Spectrum's cron page: the
   state of cli/cron.php and the server's backup over the list (.cr-note, .cr-item), the jobs as a page-drawn list (the
   row's state as a bar at its start), the windows (.cr-win: a job, its runs) as Spectrum's .cw-* windows. --- */
.cr-item {
    margin-bottom: .45rem;
    padding: .5rem .75rem;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-card);
    background: var(--sp-surface);
    font-size: .8rem;
}

.cr-item-bad { box-shadow: inset 4px 0 0 var(--bs-danger); }
.cr-item-ok { box-shadow: inset 4px 0 0 var(--bs-success); }
.cr-item-warn { box-shadow: inset 4px 0 0 var(--bs-warning); }

.cr-item code {
    word-break: break-all;
}

.cr-backup-parts {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.5rem;
}

.cr-page table.cr-table {
    margin-bottom: 0;
}

.cr-page table.cr-table > thead > tr > th {
    color: var(--sp-muted);
    font-size: .75rem;
    font-weight: 600;
    text-align: left !important;
    white-space: nowrap;
}

.cr-page table.cr-table thead .dt-column-header {
    justify-content: flex-start;
}

.cr-page table.cr-table > tbody > tr > td {
    padding: 5px 8px !important;
    vertical-align: top;
    line-height: 1.35;
    text-align: left;
}

.cr-page table.cr-table > tbody > tr.co-st-ok > td:first-child { box-shadow: inset 3px 0 0 var(--bs-success); }
.cr-page table.cr-table > tbody > tr.co-st-bad > td:first-child { box-shadow: inset 3px 0 0 var(--bs-danger); }
.cr-page table.cr-table > tbody > tr.co-st-info > td:first-child { box-shadow: inset 3px 0 0 var(--bs-info); }
.cr-page table.cr-table > tbody > tr.co-st-off > td:first-child { box-shadow: inset 3px 0 0 var(--sp-line); }
.cr-page table.cr-table > tbody > tr.co-st-off > td { color: var(--sp-muted); }

/* the row's buttons as narrow as they are (not the head's empty cell: DataTables gives the head the body's widths) */
.cr-page table.cr-table > tbody > tr > td.cr-c-more {
    width: 1%;
    white-space: nowrap;
    text-align: right !important;
}

.cr-page table.cr-table .cr-c-more > .btn + .btn {
    margin-left: .2rem;
}

.cr-page .wo-tag + .wo-tag {
    margin-left: .2rem;
}

/* the windows: parts with a title, each field's quiet name over it, the fields side by side as many as fit */
.cr-win .cr-sec {
    margin-bottom: .75rem;
    padding: .65rem .85rem .8rem;
    border: 1px solid var(--sp-line);
    border-radius: var(--sp-r-card);
    background: var(--sp-surface);
}

.cr-win .cr-sec:last-child {
    margin-bottom: 0;
}

.cr-win .cr-sec-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .6rem;
    font-size: .9rem;
    font-weight: 700;
}

.cr-win .cr-sec-title > i {
    color: var(--sp-muted);
}

.cr-win .cr-label {
    display: block;
    margin: 0 0 .2rem;
    color: var(--sp-muted);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.25;
}

.cr-win .cr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .6rem .75rem;
    align-items: start;
}

.cr-win .cr-grid > .cr-wide {
    grid-column: 1 / -1;
}

.cr-win .cr-hint {
    color: var(--sp-muted);
    font-size: .8rem;
}

.modal-title.cr-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .5rem;
}

.modal-title.cr-title > i:first-child {
    color: var(--sp-muted);
}

.modal-title.cr-title .wo-tag {
    font-size: .75rem;
}

.cr-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

#default-modal-lg .modal-dialog:has(.cr-md) {
    max-width: min(720px, calc(100vw - 1rem));
}

/* a job's runs: a line each (the time, the result, who), its output folded under it */
.cr-runs {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.cr-run {
    border: 1px solid var(--sp-line);
    border-left: 3px solid var(--sp-line);
    border-radius: 8px;
}

.cr-run.cr-st-ok { border-left-color: var(--bs-success); }
.cr-run.cr-st-failed { border-left-color: var(--bs-danger); }
.cr-run.cr-st-running { border-left-color: var(--bs-info); }

.cr-run-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .35rem .6rem;
    color: inherit;
    font-size: .85rem;
    text-decoration: none;
}

.cr-run-line:hover {
    background: var(--sp-soft-bg);
    color: inherit;
}

.cr-run-fold {
    color: var(--sp-muted);
    font-size: .7rem;
}

.cr-run-out {
    display: none;
    max-height: 320px;
    margin: 0 .6rem .5rem;
    padding: .5rem .65rem;
    overflow: auto;
    border-radius: 6px;
    background: var(--sp-soft-bg);
    color: var(--sp-text);
    font-size: .78rem;
    white-space: pre-wrap;
}

/* phones: each job a card (as Клиенти's .cl-table) - the name over the line, then the script, the time, the switch, the
   last run and the buttons at the end; the state as a bar at the card's start; the page scrolls (no scroll box) */
@media (max-width: 767.98px) {
    .cr-page .dt-scroll-head,
    .cr-page table.cr-table > thead {
        display: none;
    }

    .cr-page table.cr-table,
    .cr-page table.cr-table > tbody {
        display: block;
        width: 100% !important;
    }

    .cr-page table.cr-table > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .25rem .75rem;
        padding: .6rem .5rem .6rem .75rem;
        border-bottom: 1px solid var(--sp-line);
    }

    .cr-page table.cr-table > tbody > tr > td {
        display: block;
        flex: 0 1 auto;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .cr-page table.cr-table > tbody > tr > td:first-child {
        flex: 1 1 100%;
    }

    .cr-page table.cr-table > tbody > tr > td.cr-c-more {
        flex: 0 0 auto;
        width: auto;
        margin-left: auto;
    }

    .cr-page table.cr-table > tbody > tr.co-st-ok { box-shadow: inset 3px 0 0 var(--bs-success); }
    .cr-page table.cr-table > tbody > tr.co-st-bad { box-shadow: inset 3px 0 0 var(--bs-danger); }
    .cr-page table.cr-table > tbody > tr.co-st-info { box-shadow: inset 3px 0 0 var(--bs-info); }
    .cr-page table.cr-table > tbody > tr.co-st-off { box-shadow: inset 3px 0 0 var(--sp-line); }
}

/* ---------------------------------------------------------------------------------------------------------------------
   Подесувања -> Веб страна (module webpage, pages/website.php): the page editor in the large window, the media
   library, the menu tree (.wx-*)
   --------------------------------------------------------------------------------------------------------------------- */
.wx-ed-head {
    gap: .75rem;
}

.wx-ed-head .modal-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wx-ed-badges {
    margin-left: auto;
    white-space: nowrap;
}

.wx-ed {
    background: var(--sp-bg, #f6f7f9);
}

.wx-ed-form {
    min-width: 0;
}

.wx-ed-sub {
    margin: 1.25rem 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
}

.wx-seo summary {
    cursor: pointer;
    font-weight: 600;
}

.wx-block {
    margin-bottom: .75rem;
}

.wx-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .75rem;
}

.wx-block-tools,
.wx-item-tools,
.wx-menu-tools {
    display: inline-flex;
    gap: .25rem;
}

.wx-field {
    margin-bottom: .6rem;
}

.wx-field .form-label {
    margin-bottom: .2rem;
    font-size: .85rem;
}

.wx-items {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .5rem;
}

.wx-item {
    border: 1px solid var(--sp-line, #dee2e6);
    border-radius: .5rem;
    padding: .5rem .75rem;
    background: var(--bs-body-bg, #fff);
}

.wx-item-tools {
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: .25rem;
}

.wx-item-n {
    margin-right: auto;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
}

.wx-code {
    font-family: var(--bs-font-monospace);
    font-size: .8rem;
    white-space: pre;
}

/* the add-ons of a roaming zone (Роаминг -> a zone's window) */
.wx-check-list {
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: .375rem;
    padding: .5rem .75rem;
}

.wx-media-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.wx-media-thumb img {
    max-height: 56px;
    max-width: 120px;
    border-radius: .25rem;
    border: 1px solid var(--sp-line, #dee2e6);
}

.wx-doc {
    font-size: .85rem;
}

.wx-empty {
    padding: 1rem;
    color: var(--bs-secondary-color, #6c757d);
    border: 1px dashed var(--sp-line, #dee2e6);
    border-radius: .5rem;
    text-align: center;
}

.wx-preview-wrap {
    position: sticky;
    top: 0;
    border: 1px solid var(--sp-line, #dee2e6);
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}

.wx-preview-bar {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .75rem;
    border-bottom: 1px solid var(--sp-line, #dee2e6);
    font-size: .85rem;
}

.wx-preview {
    width: 100%;
    height: 75vh;
    border: 0;
    display: block;
    background: #fff;
}

/* the editor is long: its buttons stay at the bottom of the screen however far the window is scrolled
   (clip, not .modal-content's hidden: an overflow: hidden box would hold the sticky footer at its own end) */
.modal-content:has(> .wx-ed-foot) {
    overflow: clip;
}

.wx-ed-foot {
    flex-wrap: wrap;
    gap: .5rem;
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--bs-modal-bg, var(--bs-body-bg, #fff));
    box-shadow: 0 -.25rem .75rem rgba(0, 0, 0, .08);
}

.wx-history {
    max-height: 60vh;
    overflow-y: auto;
    min-width: 18rem;
}

.wx-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.wx-media-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    background: var(--sp-bg, #f6f7f9);
    font-size: 3rem;
    color: var(--bs-secondary-color, #6c757d);
}

.wx-media-img img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}

.wx-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.wx-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .4rem;
    border: 1px solid var(--sp-line, #dee2e6);
    border-radius: .5rem;
    background: var(--bs-body-bg, #fff);
    font-size: .75rem;
    min-width: 0;
}

.wx-pick:hover,
.wx-pick:focus-visible {
    border-color: var(--bs-primary);
}

.wx-pick img {
    max-width: 100%;
    height: 80px;
    object-fit: contain;
}

.wx-pick i {
    font-size: 2.5rem;
    height: 80px;
    line-height: 80px;
}

.wx-pick span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wx-menu {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.wx-menu-item {
    border: 1px solid var(--sp-line, #dee2e6);
    border-radius: .5rem;
    padding: .5rem;
}

.wx-menu-row {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 2fr) auto auto auto;
    gap: .5rem;
    align-items: center;
}

.wx-menu-child {
    margin: .4rem 0 0 2rem;
}

@media (max-width: 767.98px) {
    .wx-menu-row {
        grid-template-columns: 1fr;
    }

    .wx-menu-child {
        margin-left: 1rem;
    }

    .wx-preview {
        height: 60vh;
    }
}

.wx-form-msg {
    max-width: 32rem;
    white-space: pre-wrap;
}

/* Веб страна -> Поставки: section cards (it was one form stretched over the whole screen at 13 px), larger text and
   fields, the per-language fields one under the other, Save always in view. Made for 1920 px screens (most users):
   from 1400 px the cards stand in two columns, one column below. Клиентска апликација -> Поставки uses them too */
.wx-settings {
    font-size: .875rem;
}

.wx-set-grid {
    max-width: 1000px;
}

@media (min-width: 1400px) {
    .wx-set-grid {
        max-width: none;
        columns: 2;
        column-gap: 1.25rem;
    }
}

/* the app's 8 px gutters (.row > * 4 px) put the fields nearly edge to edge */
.wx-settings .row {
    --bs-gutter-x: 1.5rem;
    margin-left: -.75rem;
    margin-right: -.75rem;
}

.wx-settings .row > * {
    padding-left: .75rem;
    padding-right: .75rem;
}

.wx-set-card {
    break-inside: avoid;
    margin-bottom: 1.25rem;
    padding: 1.1rem 1.25rem 1.25rem;
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    background: var(--sp-surface);
    box-shadow: var(--sp-card-shadow);
}

.wx-set-title {
    margin: 0 0 .9rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--sp-line);
    font-size: 1rem;
    font-weight: 600;
}

.wx-set-title > i {
    width: 1.25rem;
    color: var(--sp-primary);
}

.wx-settings .form-label {
    margin-bottom: .3rem;
    font-size: .875rem;
}

.wx-settings .form-control,
.wx-settings .input-group-text,
.wx-settings .form-check-label {
    font-size: .875rem;
}

.wx-settings .form-control {
    padding-top: .4rem;
    padding-bottom: .4rem;
}

.wx-settings textarea.form-control {
    min-height: 0;
}

.wx-settings .input-group-text {
    justify-content: center;
    width: 3rem;
    font-weight: 600;
}

.wx-settings .form-text {
    margin-top: .3rem;
    color: var(--sp-muted);
    font-size: .8125rem;
    line-height: 1.4;
}

.wx-set-note {
    margin-left: .25rem;
    color: var(--sp-muted);
    font-weight: 400;
}

.wx-set-langs {
    display: grid;
    gap: .5rem;
}

.wx-set-save {
    position: sticky;
    bottom: var(--sp-footer-h); /* above the fixed footer (.footko) */
    z-index: 2;
    padding: .75rem 0;
    background: var(--sp-surface);
    border-top: 1px solid var(--sp-line);
}

@media (max-width: 767.98px) {
    .wx-set-save {
        bottom: 0; /* no footer on a phone */
    }
}

/* Клиентска апликација (clientapi/pages/clientApp.php): a switch's title with its help under it, a group of ticks as a
   grid, and "Нова сметка" in one line with the list's Excel / Печати */
.ca-switch .form-check-label b {
    display: block;
}

.ca-switch .form-text {
    display: block;
    margin-top: .1rem;
}

.ca-ticks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .45rem 1rem;
}

.ca-ticks .form-check {
    margin: 0;
}

#caATools {
    display: flex;
    align-items: center;
    gap: .35rem;
}