/*
 * MagicHost panel — looks like Plesk Obsidian (CLAUDE.md "UI κανόνες").
 * Colors are the design tokens of Plesk's open @plesk/ui-library (values only; no Plesk
 * logo, name or icon files). Base font 14px as Plesk (--pl-fs).
 * Bootstrap 5 stays: this file sets its variables and restyles its components.
 */

/* ── Open Sans (local files, SIL OFL: fonts/open-sans/OFL.txt) ── */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/open-sans/open-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/open-sans/open-sans-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/open-sans/open-sans-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/open-sans/open-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/open-sans/open-sans-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/open-sans/open-sans-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/open-sans/open-sans-greek-400-normal.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/open-sans/open-sans-greek-600-normal.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/open-sans/open-sans-greek-700-normal.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* ── Tokens ── */
:root {
    --pl-sidebar-bg: #384859;          /* slate-800 */
    --pl-fs: 14px;                     /* the base text size, as Plesk Obsidian (never below it) */
    --pl-sidebar-section: #2d3a47;     /* slate-900 */
    --pl-sidebar-selected: #536a7d;    /* slate-700 */
    --pl-sidebar-hover: rgb(236 236 236 / 0.1);
    --pl-sidebar-text-subtle: #ccc;
    --pl-primary: #28aade;
    --pl-primary-hover: #259ccc;
    --pl-primary-pressed: #16759a;
    --pl-primary-subtle: #d6f3ff;
    --pl-primary-subtler: #f0faff;
    --pl-link: #16759a;
    --pl-link-hover: #259ccc;
    --pl-text: #202020;
    --pl-text-subtle: #737373;
    --pl-text-subtler: #b5b5b5;
    --pl-surface: #fff;
    --pl-secondary: #f0f0f0;
    --pl-secondary-hover: #e5e5e5;
    --pl-secondary-pressed: #ccc;
    --pl-border: #ccc;
    --pl-border-strong: #b5b5b5;
    --pl-success: #629a1e; --pl-success-text: #487f1e; --pl-success-subtle: #ddf5ce;
    --pl-danger: #d02d4b;  --pl-danger-text: #b30122;  --pl-danger-subtle: #ffdee0;  --pl-danger-hover: #b30122;
    --pl-warning: #d66b0d; --pl-warning-text: #c84a0b; --pl-warning-subtle: #ffeed4;
    --pl-info: #28aade;    --pl-info-text: #16759a;    --pl-info-subtle: #d6f3ff;
    --pl-neutral: #979797; --pl-neutral-subtle: #e5e5e5;
    --pl-card-shadow: 0 2px 4px #28283426, 0 0 1px #28283459;
    --pl-header-shadow: 0 1px 2px #28283459;
    --pl-button-shadow: inset 0 -1px 0 rgb(34 34 34 / 0.25);
    --pl-focus-ring: 0 0 0 3px rgb(40 170 222 / 0.35);
    --pl-sidebar-width: 256px;
    --pl-topbar-height: 56px;
    --pl-font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Names used by pages written before this stylesheet */
    --primary: var(--pl-primary); --primary-light: var(--pl-primary-subtle); --primary-dark: var(--pl-primary-pressed);
    --surface: var(--pl-secondary); --danger: var(--pl-danger); --warning: var(--pl-warning);
    --sidebar-width: var(--pl-sidebar-width); --topbar-height: var(--pl-topbar-height);

    /* Bootstrap */
    --bs-body-font-family: var(--pl-font);
    --bs-body-font-size: var(--pl-fs);
    --bs-body-color: var(--pl-text);
    --bs-body-bg: var(--pl-surface);
    --bs-primary: #28aade; --bs-primary-rgb: 40, 170, 222;
    --bs-success: #629a1e; --bs-success-rgb: 98, 154, 30;
    --bs-danger: #d02d4b;  --bs-danger-rgb: 208, 45, 75;
    --bs-warning: #d66b0d; --bs-warning-rgb: 214, 107, 13;
    --bs-info: #28aade;    --bs-info-rgb: 40, 170, 222;
    --bs-secondary: #737373; --bs-secondary-rgb: 115, 115, 115;
    --bs-link-color: #16759a; --bs-link-color-rgb: 22, 117, 154;
    --bs-link-hover-color: #259ccc; --bs-link-hover-color-rgb: 37, 156, 204;
    --bs-border-color: #ccc;
    --bs-border-radius: 2px; --bs-border-radius-sm: 2px; --bs-border-radius-lg: 4px;
    --bs-secondary-color: #737373;
    --bs-emphasis-color: #202020;
}

/* ── Base ── */
html { font-size: var(--pl-fs); }
body {
    font-family: var(--pl-font);
    font-size: var(--pl-fs);
    line-height: 1.5;
    color: var(--pl-text);
    background: var(--pl-surface);
    margin: 0;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--pl-link); text-decoration: none; }
a:hover { color: var(--pl-link-hover); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; color: var(--pl-text); }
h5, h6, .modal-title { font-weight: 600; }
.text-muted { color: var(--pl-text-subtle) !important; }
.text-primary { color: var(--pl-link) !important; }
.text-success { color: var(--pl-success-text) !important; }
.text-danger { color: var(--pl-danger-text) !important; }
.text-warning { color: var(--pl-warning-text) !important; }
.bg-primary { background-color: var(--pl-primary) !important; }
code { color: var(--pl-text); font-size: var(--pl-fs); }  /* data (usernames, paths) reads as text, as in Plesk's lists */

/* ── Buttons (Plesk: 2px corners, 600, shadow line underneath) ── */
.btn {
    --bs-btn-font-size: var(--pl-fs);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 5px;
    --bs-btn-border-radius: 2px;
    --bs-btn-border-width: 0;
    --bs-btn-focus-box-shadow: var(--pl-focus-ring);
    box-shadow: var(--pl-button-shadow);
    min-height: 32px;
}
.btn .bi { font-size: 16px; }
.btn-sm { --bs-btn-font-size: var(--pl-fs); --bs-btn-padding-x: 10px; --bs-btn-padding-y: 4px; min-height: 30px; }
.btn-lg { --bs-btn-font-size: var(--pl-fs); --bs-btn-padding-x: 24px; --bs-btn-padding-y: 9px; }
.btn-primary {
    --bs-btn-bg: var(--pl-primary); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--pl-primary-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--pl-primary-pressed); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--pl-primary); --bs-btn-disabled-color: #fff;
}
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark {
    --bs-btn-bg: var(--pl-secondary); --bs-btn-color: var(--pl-text);
    --bs-btn-hover-bg: var(--pl-secondary-hover); --bs-btn-hover-color: var(--pl-text);
    --bs-btn-active-bg: var(--pl-secondary-pressed); --bs-btn-active-color: var(--pl-text);
    --bs-btn-disabled-bg: var(--pl-secondary); --bs-btn-disabled-color: var(--pl-text-subtler);
}
.btn-outline-primary { --bs-btn-color: var(--pl-link); --bs-btn-hover-color: var(--pl-link); --bs-btn-active-color: var(--pl-link); }
.btn-danger {
    --bs-btn-bg: var(--pl-danger); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--pl-danger-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #a80022; --bs-btn-active-color: #fff;
}
.btn-outline-danger {
    --bs-btn-bg: var(--pl-secondary); --bs-btn-color: var(--pl-danger-text);
    --bs-btn-hover-bg: var(--pl-danger-subtle); --bs-btn-hover-color: var(--pl-danger-text);
    --bs-btn-active-bg: #ffc7ca; --bs-btn-active-color: var(--pl-danger-text);
}
.btn-success, .btn-outline-success {
    --bs-btn-bg: var(--pl-success); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #487f1e; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #366807; --bs-btn-active-color: #fff;
}
.btn-warning, .btn-outline-warning {
    --bs-btn-bg: var(--pl-warning); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #c84a0b; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #930; --bs-btn-active-color: #fff;
}
.btn-link { box-shadow: none; --bs-btn-color: var(--pl-link); --bs-btn-hover-color: var(--pl-link-hover); font-weight: 400; }
.btn-close { box-shadow: none; }

/* ── Forms ── */
.form-control, .form-select {
    font-size: var(--pl-fs);
    border-color: var(--pl-border-strong);
    border-radius: 2px;
    min-height: 36px;
}
.form-control:focus, .form-select:focus { border-color: var(--pl-primary); box-shadow: var(--pl-focus-ring); }
.form-label { font-size: var(--pl-fs); font-weight: 600; color: var(--pl-text); margin-bottom: 4px; }
.form-text { color: var(--pl-text-subtle); font-size: var(--pl-fs); }
.form-check-input { border-color: var(--pl-border-strong); border-radius: 2px; }
.form-check-input:checked { background-color: var(--pl-primary); border-color: var(--pl-primary); }
.form-check-input:focus { box-shadow: var(--pl-focus-ring); border-color: var(--pl-primary); }
.form-switch .form-check-input { border-radius: 2em; }
/* Switches, checkboxes and radios: large enough to see and hit (never the small default of Bootstrap) */
/* Checkboxes and radios as Plesk's (about 21px): everywhere, also in the lists (no .form-check around them) */
.form-check-input[type=checkbox], .form-check-input[type=radio] { width: 1.5em; height: 1.5em; flex-shrink: 0; }
.form-check { padding-left: 2.1em; min-height: 1.6em; }
.form-check .form-check-input { margin-top: 0; margin-left: -2.1em; }
.form-check-label { line-height: 1.5; }
.form-switch { padding-left: 3.7em; }
.form-switch .form-check-input { width: 3em; height: 1.6em; margin-top: -.1em; margin-left: -3.7em; }
.form-check-input.m-0, .form-check .form-check-input.m-0 { margin: 0; }
.input-group-text { background: var(--pl-secondary); border-color: var(--pl-border-strong); font-size: var(--pl-fs); }

/* ── Tables / lists ── */
.table { font-size: var(--pl-fs); --bs-table-hover-bg: var(--pl-primary-subtler); --bs-table-border-color: var(--pl-border); margin-bottom: 0; }
.table > thead > tr > th, .table th {
    font-size: var(--pl-fs); font-weight: 600; color: var(--pl-text-subtle);
    border-bottom: 1px solid var(--pl-border); white-space: nowrap; padding: 8px 12px;
}
.table > tbody > tr > td { padding: 10px 12px; border-color: #e5e5e5; }
.table > tbody > tr:hover > * { background-color: var(--pl-primary-subtler); }
.pl-list-check { width: 36px; }

/* ── Badges (Plesk labels: 2px corners, 600) ── */
.badge { font-size: var(--pl-fs) !important; font-weight: 600; border-radius: 2px; padding: .3em .55em; }
.badge.bg-success { background-color: var(--pl-success) !important; color: #fff !important; }
.badge.bg-danger { background-color: var(--pl-danger) !important; color: #fff !important; }
.badge.bg-warning { background-color: var(--pl-warning) !important; color: #fff !important; }
.badge.bg-info { background-color: var(--pl-info) !important; color: #fff !important; }
.badge.bg-primary { background-color: var(--pl-primary) !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--pl-neutral) !important; color: #fff !important; }
.badge.bg-light { background-color: var(--pl-neutral-subtle) !important; color: var(--pl-text) !important; border: 0 !important; }
.badge.bg-dark { background-color: var(--pl-text) !important; }

/* ── Status messages (Plesk alerts: subtle background) ── */
.alert { border: 0; border-radius: 4px; color: var(--pl-text); font-size: var(--pl-fs); }
.alert-info, .alert-primary { background: var(--pl-info-subtle); }
.alert-success { background: var(--pl-success-subtle); }
.alert-warning { background: var(--pl-warning-subtle); }
.alert-danger { background: var(--pl-danger-subtle); }
.alert-secondary, .alert-light { background: var(--pl-secondary); }

/* ── Tabs (Plesk: text tabs, the active one underlined) ── */
.nav-tabs { border-bottom: 1px solid var(--pl-border); gap: 4px; }
.nav-tabs .nav-link {
    border: 0; border-bottom: 3px solid transparent; border-radius: 0;
    color: var(--pl-text); padding: 10px 14px; font-size: var(--pl-fs); margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--pl-link-hover); border-bottom-color: var(--pl-primary-subtle); text-decoration: none; }
.nav-tabs .nav-link.active { color: var(--pl-text); font-weight: 600; border-bottom-color: var(--pl-primary); background: none; }
.nav-pills .nav-link.active { background: var(--pl-primary); }

/* ── Cards ── */
.card, .stat-card, .site-card {
    background: var(--pl-surface);
    border: 0;
    border-radius: 4px;
    box-shadow: var(--pl-card-shadow);
}
.stat-card { padding: 20px; }
.stat-card .stat-icon { width: 44px; height: 44px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.stat-card .stat-value { font-size: 28px; font-weight: 400; line-height: 1.2; margin-top: 12px; }
.stat-card .stat-label { font-size: var(--pl-fs); color: var(--pl-text-subtle); margin-top: 2px; }
.site-card { padding: 20px; cursor: pointer; transition: box-shadow .2s; }
.site-card:hover { box-shadow: 0 2px 4px #00548426, 0 0 1px #00548459; }
.site-card .site-status { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.site-card .site-status.active { background: var(--pl-success); }
.site-card .site-status.creating { background: var(--pl-warning); }
.site-card .site-status.suspended, .site-card .site-status.error { background: var(--pl-danger); }
.usage-bar { height: 6px; background: var(--pl-neutral-subtle); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.usage-bar .fill { height: 100%; border-radius: 2px; transition: width .5s; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--pl-text-subtle); }
.empty-state .bi { font-size: 48px; opacity: .3; }

/* ── Modals, dropdowns, toasts ── */
.modal-content { border: 0; border-radius: 4px; box-shadow: 0 8px 24px rgb(34 34 34 / 0.25); }
.modal-header { border-bottom: 0; padding: 20px 24px 8px; }
.modal-title { font-size: 18px; }
.modal-body { padding: 12px 24px; }
.modal-footer { border-top: 0; padding: 12px 24px 20px; }
.dropdown-menu { border: 0; border-radius: 4px; box-shadow: var(--pl-card-shadow); font-size: var(--pl-fs); }
.dropdown-item:active { background: var(--pl-primary); }
.toast-container { position: fixed; top: calc(var(--pl-topbar-height) + 12px); right: 20px; z-index: 9999; }
.toast { border-radius: 4px; }
.loading-overlay { position: fixed; inset: 0; background: rgb(255 255 255 / .8); display: flex; align-items: center; justify-content: center; z-index: 9999; }

/* ── Layout: sidebar ── */
.pl-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--pl-sidebar-width);
    background: var(--pl-sidebar-bg);
    color: #fff;
    overflow-y: auto;
    z-index: 1032;
    display: flex; flex-direction: column;
    transition: transform .25s;
}
.pl-brand {
    height: var(--pl-topbar-height); flex: none;
    display: flex; align-items: center; gap: 10px;
    padding: 0 16px;
    color: #fff; font-size: 18px; font-weight: 400; letter-spacing: .2px;
}
.pl-brand:hover { color: #fff; text-decoration: none; }
.pl-brand .bi { font-size: 19px; color: #4cccff; }
.pl-brand .pl-brand-logo { max-height: 36px; max-width: 200px; object-fit: contain; }
/* The look's product logo (Branding::markHtml) across the whole width of the menu (core.js mhFitBrand sizes the letters):
   the mark and the name, its first part in the light blue */
.pl-brand { height: auto; min-height: var(--pl-topbar-height); padding: 12px 16px; white-space: nowrap; overflow: hidden; line-height: 1.1; }
.pl-brand .sv-mark { width: 1.3em; height: 1.3em; flex: none; }
.pl-brand .sv-word { white-space: nowrap; }
.pl-brand .sv-word b { font-weight: inherit; color: #4fc3f0; }
.pl-brand .pl-brand-logo { width: 100%; max-width: 100%; max-height: 72px; object-position: left center; }
.pl-panel { display: none; }
html[data-panel="admin"] .pl-panel[data-panel="admin"],
html[data-panel="reseller"] .pl-panel[data-panel="reseller"],
html[data-panel="customer"] .pl-panel[data-panel="customer"],
html[data-panel="power"] .pl-panel[data-panel="power"] { display: block; }
/* Change View (administrators only), at the bottom of the navigation */
.pl-change-view { display: none; margin: 16px 0 12px; padding: 8px 16px; color: #fff; font-size: var(--pl-fs); text-decoration: none; opacity: .85; }
.pl-change-view:hover { color: #fff; opacity: 1; text-decoration: underline; }
html[data-panel="admin"] .pl-change-view, html[data-panel="power"] .pl-change-view { display: block; }
.pl-nav { list-style: none; margin: 0; padding: 0; }
/* A section: a dark bar with an arrow; closed = its items hidden (remembered) */
.pl-nav-section {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    border: 0; padding: 9px 16px;
    background: var(--pl-sidebar-section); color: var(--pl-sidebar-text-subtle);
    font-size: var(--pl-fs); text-align: left;
}
.pl-nav-section:hover { color: #fff; }
.pl-nav-section:focus-visible { outline: 2px solid #4cccff; outline-offset: -2px; }
.pl-nav-section .bi { color: var(--pl-primary); font-size: var(--pl-fs); transition: transform .2s; }
.pl-nav-group.closed .pl-nav-section .bi { transform: rotate(180deg); }
.pl-nav-group.closed .pl-nav { display: none; }
.pl-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    color: #fff; font-size: var(--pl-fs);
}
.pl-nav a:hover { background: var(--pl-sidebar-hover); color: #fff; text-decoration: none; }
.pl-nav a.active { background: var(--pl-sidebar-selected); }
.pl-nav a .bi { font-size: 17px; width: 22px; text-align: center; opacity: .9; flex: none; }
.pl-nav-count { margin-left: auto; font-size: var(--pl-fs); color: #fff; opacity: .9; font-variant-numeric: tabular-nums; }
.pl-sidebar-foot { margin-top: auto; padding: 12px 16px; font-size: var(--pl-fs); color: var(--pl-sidebar-text-subtle); }

/* ── Layout: top bar ── */
.pl-topbar {
    position: fixed; top: 0; left: var(--pl-sidebar-width); right: 0;
    height: var(--pl-topbar-height);
    background: var(--pl-surface);
    box-shadow: var(--pl-header-shadow);
    display: flex; align-items: center; gap: 16px;
    padding: 0 24px;
    z-index: 1030;
}
.pl-menu-toggle { display: none; border: 0; background: none; font-size: 26px; color: var(--pl-text); padding: 4px; }
.pl-search { position: relative; flex: 1; max-width: 520px; }
.pl-search .bi-search { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--pl-text-subtle); font-size: var(--pl-fs); }
.pl-search input { padding-left: 34px; min-height: 36px; background: var(--pl-secondary); border-color: transparent; }
.pl-search input:focus { background: #fff; }
.pl-search-results { width: 100%; max-height: 70vh; overflow-y: auto; padding: 6px 0; }
.pl-search-results .dropdown-header { font-size: var(--pl-fs); font-weight: 600; text-transform: uppercase; color: var(--pl-text-subtle); }
.pl-search-results .dropdown-item { display: flex; gap: 10px; align-items: center; white-space: normal; }
.pl-search-results .dropdown-item small { color: var(--pl-text-subtle); margin-left: auto; }
.pl-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pl-icon-btn { position: relative; border: 0; background: none; color: var(--pl-text-subtle); font-size: 18px; padding: 6px 10px; border-radius: 2px; }
.pl-icon-btn:hover { background: var(--pl-secondary); color: var(--pl-text); }
.pl-icon-btn .badge { position: absolute; top: 0; right: 0; font-size: var(--pl-fs) !important; padding: 2px 5px; border-radius: 8px; }
.pl-user { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 8px; border: 0; border-radius: 2px; background: none; color: var(--pl-link); font-size: var(--pl-fs); }
.pl-user:hover { background: var(--pl-secondary); color: var(--pl-link-hover); }
.pl-user .pl-user-name { font-weight: 600; }
.pl-user .pl-user-host { color: var(--pl-text-subtle); }
.pl-user .pl-user-caret { font-size: var(--pl-fs); }
.pl-sub-btn .pl-user-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-sub-menu { max-height: 60vh; overflow-y: auto; }
.pl-sub-menu .dropdown-item.active { background: var(--pl-primary-subtle); color: var(--pl-text); }
.pl-user .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--pl-primary-subtle); color: var(--pl-link); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--pl-fs); }
.pl-user .user-name { font-size: var(--pl-fs); font-weight: 600; line-height: 1.2; }
.pl-user .user-role { font-size: var(--pl-fs); color: var(--pl-text-subtle); line-height: 1.2; }

/* ── Layout: content, page header ── */
.pl-main { margin-left: var(--pl-sidebar-width); padding-top: var(--pl-topbar-height); min-height: 100vh; }
.pl-content { padding: 20px 32px 40px; }  /* fluid: the whole width, as in Plesk */
.pl-page-header { margin-bottom: 20px; }
.pl-title-row { display: flex; align-items: flex-start; gap: 16px; }
.pl-title-row .pl-page-title { flex: 1 1 auto; min-width: 0; }
.pl-back { flex: 0 0 auto; margin-top: 4px; }
.pl-breadcrumbs { font-size: var(--pl-fs); color: var(--pl-text-subtle); margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pl-breadcrumbs a { color: var(--pl-link); }
.pl-breadcrumbs .sep { color: var(--pl-text-subtler); }
.pl-page-title { font-size: 32px; font-weight: 400; line-height: 1.25; margin: 0; word-break: break-word; }
.pl-page-desc { color: var(--pl-text-subtle); margin: 6px 0 0; }
.pl-page-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ── List toolbar (Plesk: actions left, search and filters right) ── */
.pl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.pl-toolbar .pl-toolbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.pl-toolbar .pl-toolbar-search { position: relative; }
.pl-toolbar .pl-toolbar-search .bi-search { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--pl-text-subtle); }
.pl-toolbar .pl-toolbar-search input { padding-left: 30px; width: 240px; }
.pl-list-summary { font-size: var(--pl-fs); color: var(--pl-text-subtle); margin-bottom: 8px; }

/* ── The list of Plesk (public/js/pl-list.js) ── */
.pl-toolbar .btn-secondary { border: 1px solid var(--pl-border); box-shadow: none; font-weight: 400; }
.pl-toolbar .btn-secondary:disabled { opacity: 1; }
.pl-toolbar .btn-secondary .bi { color: var(--pl-text-subtle); }
.pl-toolbar .dropdown-toggle::after { margin-left: 6px; }
.pl-search-box { display: flex; }
.pl-search-box .pl-toolbar-search input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pl-filter-toggle { border: 1px solid var(--pl-border-strong); border-left: 0; background: #fff; padding: 0 10px; color: var(--pl-text-subtle); border-radius: 0 2px 2px 0; }
.pl-filter-toggle:hover, .pl-filter-toggle.active { background: var(--pl-secondary); color: var(--pl-link); }
.pl-filter-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
.pl-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 12px 16px; margin-bottom: 12px; background: var(--pl-secondary); border-radius: 2px; }
.pl-filters[hidden] { display: none; }
.pl-filter { min-width: 200px; }
.pl-filter .form-label { font-size: var(--pl-fs); margin-bottom: 4px; color: var(--pl-text-subtle); }
.pl-list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; font-size: var(--pl-fs); color: var(--pl-text-subtle); padding: 8px 0; }
.pl-list-bar .pl-list-per { margin-left: auto; }
.pl-list-bar a { color: var(--pl-link); padding: 0 2px; }
.pl-list-bar .current { color: var(--pl-text); font-weight: 600; padding: 0 2px; }
.pl-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.pl-pager .label { margin-right: 2px; }
.pl-pager .off { color: var(--pl-text-subtler); padding: 0 2px; }
.pl-table > thead > tr > th { font-size: var(--pl-fs); font-weight: 400; color: var(--pl-text); white-space: nowrap; border-bottom: 1px solid var(--pl-border); }
.pl-table .pl-sort { border: 0; background: none; padding: 0; color: inherit; font: inherit; }
.pl-table .pl-sort:hover { color: var(--pl-link); }
.pl-table .pl-sort .bi { color: var(--pl-primary); font-size: var(--pl-fs); }
.pl-table > tbody > tr.selected > * { background-color: var(--pl-primary-subtler); }
.pl-list-empty { padding: 32px 12px; text-align: center; color: var(--pl-text-subtle); }
.pl-status-icon { font-size: 16px; }
.pl-row-link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 575.98px) {
    .pl-list-bar .pl-list-per { margin-left: 0; }
    .pl-search-box { width: 100%; }
    .pl-filter { min-width: 100%; }
}

/* ── Tools grid (Websites & Domains: the icons under each domain) ── */
.pl-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 4px 12px; }
.pl-tool { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 2px; color: var(--pl-link); font-size: var(--pl-fs); }
.pl-tool:hover { background: var(--pl-primary-subtler); text-decoration: none; color: var(--pl-link-hover); }
.pl-tool .bi { font-size: 19px; color: var(--pl-primary); flex: none; }
.pl-tool span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.progress-bar { background-color: var(--pl-primary); }
.progress-bar.bg-warning { background-color: var(--pl-warning) !important; }
.progress-bar.bg-danger { background-color: var(--pl-danger) !important; }

/* ── Notifications (bell) ── */
.notif-item { border-left: 4px solid var(--pl-neutral); padding: 10px 12px; margin-bottom: 8px; background: #fff; border-radius: 4px; box-shadow: var(--pl-card-shadow); }
.notif-item.unread { background: var(--pl-primary-subtler); }
.notif-item.lv-error { border-left-color: var(--pl-danger); }
.notif-item.lv-warning { border-left-color: var(--pl-warning); }
.notif-item.lv-success { border-left-color: var(--pl-success); }
.notif-item.lv-info { border-left-color: var(--pl-info); }
.notif-item pre { white-space: pre-wrap; font-family: inherit; font-size: var(--pl-fs); margin: 6px 0 0; color: var(--pl-text-subtle); }

/* ── Impersonation banner ── */
.pl-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--pl-link); font-size: var(--pl-fs); text-decoration: none; white-space: nowrap; margin-right: 8px; }
.pl-back-link:hover { color: var(--pl-link-hover, #259ccc); text-decoration: underline; }
.pl-back-link[hidden] { display: none; }
@media (max-width: 575.98px) { .pl-back-text { display: none; } .pl-back-link .bi { font-size: 18px; } }

/* ── Mobile: the sidebar slides in ── */
.pl-backdrop { display: none; }
@media (max-width: 991.98px) {
    .pl-sidebar { transform: translateX(-100%); }
    .pl-sidebar.show { transform: none; box-shadow: 0 0 24px rgb(34 34 34 / .4); }
    .pl-backdrop.show { display: block; position: fixed; inset: 0; background: rgb(34 34 34 / .5); z-index: 1031; }
    .pl-topbar { left: 0; padding: 0 12px; gap: 8px; }
    .pl-menu-toggle { display: block; }
    .pl-main { margin-left: 0; }
    .pl-content { padding: 16px 16px 32px; }
    .pl-page-title { font-size: 24px; }
    .pl-user .pl-user-host { display: none; }
    .pl-toolbar .pl-toolbar-right { margin-left: 0; width: 100%; }
    .pl-toolbar .pl-toolbar-search, .pl-toolbar .pl-toolbar-search input { width: 100%; }
}
@media (max-width: 575.98px) {
    .pl-search { max-width: none; }
    .pl-sub-btn .pl-user-name { display: none; }
    .pl-tools { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* Status of a domain or subscription (Plesk: "● Active ▾"): every list */
.wd-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.wd-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pl-neutral); }
.wd-status.active::before { background: var(--pl-success); }
.wd-status.suspended { color: var(--pl-danger-text); }
.wd-status.suspended::before { background: var(--pl-danger); }

/* ── Forms of settings pages (Plesk: label on the left, field on the right, OK / Cancel under them) ── */
.pl-form { max-width: 960px; }
.pl-form-h2 { font-size: 18px; font-weight: 600; margin: 8px 0 14px; }
.pl-form-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 6px 16px; margin-bottom: 14px; align-items: start; }
.pl-form-label { padding-top: 6px; }
.pl-form-row .form-text { max-width: 560px; }
.pl-form-value { padding-top: 6px; }
.pl-form-actions { margin-top: 24px; }
@media (max-width: 575.98px) {
    .pl-form-row { grid-template-columns: 1fr; gap: 4px; }
    .pl-form-label, .pl-form-value { padding-top: 0; }
}

/* hidden wins over Bootstrap's display utilities (d-flex …) */
[hidden] { display: none !important; }

/* ── Readable text everywhere: nothing below 14px (the user's rule, 2026-09-29). Bootstrap's small sizes
   (.small, <small>, pre/kbd, .form-text = .875em) are raised to the base size too. ── */
small, .small, pre, kbd, samp, .form-text, .dropdown-item, .table-sm, .btn-sm, .form-control-sm, .form-select-sm,
.popover, .tooltip, .toast { font-size: var(--pl-fs) !important; }

/* Page titles with a name in the link color, as in Plesk ("Copy example.com Files", "SSL/TLS Certificate for example.com") */
.pl-title-link { color: #16759a; }
.pl-nav .mh-link-img { width: 18px; height: 18px; object-fit: contain; margin-right: 12px; }

/* A button or link waiting for the server (core.js btnBusy): not pressed again meanwhile */
[aria-busy="true"] { pointer-events: none; }
a[aria-busy="true"] { opacity: .65; }

/* PlDual (pl-dual.js): Plesk's "Available: / Selected:" chooser (Backup Manager > Restore) */
.pd-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr); gap: 16px; align-items: stretch; max-width: 1100px; }
.pd-h { font-weight: 600; margin-bottom: 6px; }
.pd-tools { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.pd-tools .pd-all { margin: 0 4px; flex: none; }
.pd-search { position: relative; flex: 1 1 auto; min-width: 0; }
.pd-search .bi { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #737373; pointer-events: none; }
.pd-search .form-control { padding-left: 32px; }
.pd-list { border: 1px solid #cccccc; height: 320px; overflow-y: auto; background: #fff; }
.pd-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.pd-item:hover { background: #f0faff; }
.pd-item.disabled { cursor: default; color: #737373; background: #fff; }
.pd-item .pd-cb { margin-top: 2px; flex: none; }
.pd-text { min-width: 0; overflow-wrap: anywhere; }
.pd-text .badge { margin-left: 6px; }
.pd-sub { color: #737373; }
.pd-empty { color: #737373; padding: 10px; }
.pd-mid { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; text-align: center; }
.pd-hint { color: #737373; background: #f0f0f0; padding: 8px; }
@media (max-width: 767.98px) { .pd-wrap { grid-template-columns: 1fr; } .pd-mid { flex-direction: row; } .pd-list { height: 240px; } }