/* Tissel Canvas: the client dashboard and the admin console (tissel-crm), dressed
   for the canvas. Only the look changes: the side panels are the panels of a design
   tool, the main action is blue, cards are artboards, and everything reads in
   Manrope with JetBrains Mono for labels. The markup, scripts and every tab stay
   the plugin's own.
   Colours come from the palette (chrome.css), so the light, half-dark and dark
   looks reach the dashboards too. The plugin's own colour rules are mirrored onto
   the palette by portal-map-*.css (generated by lab/portalmap.mjs, loaded in the
   footer after the plugin's styles). */

/* the canvas under everything: the plugin paints the page and the main column a
   flat grey; the dot grid wins with one more element in the selector */
html body.tsl-portal {
  background-color: var(--canvas) !important;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.4px) !important;
  background-size: 22px 22px !important;
  background-attachment: fixed !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
}
/* the light look's washes (chrome.css), here too */
html:not([data-mode]) body.tsl-portal {
  background-image:
    radial-gradient(circle, var(--dot) 1px, transparent 1.4px),
    radial-gradient(46vw 40vw at 94% 4%, rgba(37, 99, 235, 0.10), transparent 70%),
    radial-gradient(40vw 36vw at 2% 58%, rgba(124, 58, 237, 0.09), transparent 70%),
    radial-gradient(44vw 34vw at 90% 100%, rgba(245, 158, 11, 0.09), transparent 70%) !important;
  background-size: 22px 22px, 100% 100%, 100% 100%, 100% 100% !important;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat !important;
}
/* the parent theme's own tokens, which its rules for labels, links and widgets read
   on these pages too: the palette's, as site.css sets them on the other pages (the
   artboards re-read them, since in the half-dark look they keep the light palette) */
body.tsl-portal,
[data-mode="dim"] body.tsl-portal :is(.cp-card, .ws-stats, .ws-alert, .cp-stat, .cp-kpi, .cp-row-card, .cp-ql-card, .tt-card, .tt-stat-card, .tsl-card-box) {
  --gold: var(--ink); --gold2: var(--ink-2); --cyan: var(--blue-ink); --violet: var(--ink-3);
  --text: var(--ink); --muted: var(--ink-2);
  --bg: var(--well); --bg2: var(--canvas); --card: var(--frame); --card2: var(--well);
}
body.tsl-portal .cp-layout > div:last-child,
body.tsl-portal .tsl-shell,
body.tsl-portal .tsl-main,
body.tsl-portal #tsl-crm { background: transparent !important; }
body.tsl-portal #cp-wrap, body.tsl-portal #cp-auth, body.tsl-portal #tsl-dash, body.tsl-portal #tsl-crm,
body.tsl-portal .tt-card, body.tsl-portal .tsl-shell, body.tsl-portal .tsl-console-bar,
body.tsl-portal .tsl-shell h1, body.tsl-portal .tsl-shell h2, body.tsl-portal .tsl-shell h3,
body.tsl-portal #cp-wrap h1, body.tsl-portal #cp-wrap h2, body.tsl-portal #cp-wrap h3,
body.tsl-portal button, body.tsl-portal input, body.tsl-portal select, body.tsl-portal textarea { font-family: var(--sans) !important; }
/* the plugin and the console set their own fonts deep inside; one rule, scoped by
   id, outranks them all (labels that should be mono say so with !important) */
body.tsl-portal :is(#cp-wrap, #cp-auth, #tsl-dash, #tsl-crm, #tslnr, #tslNotif, #tslHelpModal) :is(h1, h2, h3, h4, h5, strong, b, span, div, p, a, button, label, input, select, textarea, td, th, li, em, small),
body.tsl-portal .tsl-shell :is(h1, h2, h3, h4, h5, strong, b, span, div, p, a, button, label, input, select, textarea, td, th, li, em, small) { font-family: var(--sans); }
body.tsl-portal ::selection { background: var(--blue-tint); color: var(--ink); }
/* scrollbars: thin, in the palette, not the browser's grey slab */
body.tsl-portal, body.tsl-portal * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
body.tsl-portal ::-webkit-scrollbar { width: 8px; height: 8px; }
body.tsl-portal ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
body.tsl-portal ::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------ the admin console bar -- */
body.tsl-portal .tsl-console-bar { background: var(--bar) !important; color: var(--ink-2) !important; border-bottom: 1px solid var(--line); padding: 0 16px !important; min-height: 52px; font-size: 13px; }
body.tsl-portal .tsl-console-bar strong { color: var(--ink) !important; font: 800 1rem/1 var(--sans) !important; letter-spacing: -0.02em; }
body.tsl-portal .tsl-console-bar a { color: var(--ink-2) !important; font-weight: 600; padding: 8px 10px; border-radius: 8px; }
body.tsl-portal .tsl-console-bar a:hover { color: var(--blue-ink) !important; background: var(--well); text-decoration: none !important; }

/* ---------------------------------------------- side panels (both rails) -- */
body.tsl-portal .tsl-shell { background: transparent !important; }
body.tsl-portal .tsl-rail,
body.tsl-portal .cp-sidebar { background: var(--frame) !important; color: var(--ink-2) !important; border-right: 1px solid var(--line) !important; box-shadow: none !important; }
body.tsl-portal .tsl-rail-brand,
body.tsl-portal .cp-sidebar .cp-sb-brand, body.tsl-portal .cp-sidebar .tsl-rail-brand { color: var(--ink) !important; font: 800 1.35rem/1 var(--sans) !important; letter-spacing: -0.04em; }
body.tsl-portal .tsl-rail-brand span { color: var(--blue-ink) !important; }
body.tsl-portal .tsl-rail-search input { background: var(--field) !important; border: 1px solid var(--field-line) !important; color: var(--ink) !important; border-radius: 8px !important; }
body.tsl-portal .tsl-rail-search input::placeholder { color: var(--ink-3) !important; }
body.tsl-portal .tsl-rail-search input:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-tint); }
body.tsl-portal .tsl-rail-group,
body.tsl-portal .cp-sb-group-label { font: 500 10.5px/1.2 var(--mono) !important; letter-spacing: 0.04em !important; text-transform: uppercase; color: var(--ink-3) !important; }
body.tsl-portal .tsl-rail-nav a,
body.tsl-portal #cp-wrap a.cp-sb-link { color: var(--ink-2) !important; font-weight: 600 !important; border-left: 3px solid transparent !important; border-radius: 0 !important; background: none !important; }
body.tsl-portal .tsl-rail-nav a:hover,
body.tsl-portal #cp-wrap a.cp-sb-link:hover { color: var(--ink) !important; background: var(--well) !important; }
body.tsl-portal .tsl-rail-nav a.active,
body.tsl-portal #cp-wrap a.cp-sb-link.active { color: var(--blue-ink) !important; background: var(--blue-tint) !important; border-left-color: var(--blue) !important; font-weight: 700 !important; }
body.tsl-portal .tsl-rail-me { border-top: 1px solid var(--line) !important; }
body.tsl-portal .tsl-rail-me-t strong { color: var(--ink) !important; }
body.tsl-portal .tsl-rail-me-t em, body.tsl-portal .tsl-rail-foot a { color: var(--ink-3) !important; }
body.tsl-portal .tsl-rail-foot a:hover { color: var(--blue-ink) !important; }
body.tsl-portal .tsl-rail-av,
body.tsl-portal .cp-sb-avatar { background: var(--green) !important; color: #fff !important; border-radius: 50% !important; box-shadow: 0 0 0 2px var(--ring); }

/* the client rail: every text in it was set light for the old dark panel */
body.tsl-portal .cp-sidebar,
body.tsl-portal .cp-sidebar * { border-color: var(--line) !important; }
body.tsl-portal .cp-sidebar .nm, body.tsl-portal .cp-sidebar strong, body.tsl-portal .cp-sb-user-info strong { color: var(--ink) !important; }
body.tsl-portal .cp-sidebar .sub, body.tsl-portal .cp-sidebar span:not(.cp-sb-badge):not(.cp-sb-count):not(.cp-sb-avatar) { color: inherit; }
body.tsl-portal .cp-sidebar .cp-sb-who .sub { color: var(--ink-3) !important; font-family: var(--mono) !important; font-size: 11px !important; }
body.tsl-portal .cp-sidebar a:not(.cp-sb-link):not(.cp-sb-cta):not(.cp-sb-logout) { color: var(--ink-2) !important; }
body.tsl-portal .cp-sidebar a:not(.cp-sb-link):not(.cp-sb-cta):not(.cp-sb-logout):hover { color: var(--blue-ink) !important; background: var(--well) !important; }
body.tsl-portal .cp-sidebar .cp-sb-new, body.tsl-portal .cp-sidebar a.cp-sb-new { color: var(--blue-ink) !important; font-weight: 700 !important; }
body.tsl-portal .cp-sb-badge, body.tsl-portal .cp-sb-count { background: var(--blue) !important; color: #fff !important; }

/* the client rail stays put while the page scrolls: it is fixed to the left edge,
   full height, and scrolls on its own if a short screen needs it (it used to be
   sticky inside the layout and rode up with the page at the bottom) */
@media (min-width: 821px) {
  body.tsl-portal .cp-layout > .cp-sidebar { position: fixed !important; left: 0; top: 0; width: 252px; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; overflow-y: auto; }
  body.admin-bar.tsl-portal .cp-layout > .cp-sidebar { top: 32px; height: calc(100% - 32px) !important; }
  body.tsl-portal .cp-layout > div:last-child { grid-column: 2; }
  /* a rail that fits a laptop screen without scrolling */
  body.tsl-portal #cp-wrap a.cp-sb-link, body.tsl-portal #cp-wrap .cp-sidebar .acc-sb-help-btn { padding-top: 8px !important; padding-bottom: 8px !important; font-size: 0.92rem !important; }
}

/* ------------------------------------------------- top bars of the main -- */
/* the page title sits on the canvas, the way a section head does on the site,
   not in a white strip that stops at the column's padding */
body.tsl-portal .ws-topbar { background: transparent !important; border-bottom: 1px solid var(--line) !important; align-items: center !important; }
body.tsl-portal .tsl-top { background: var(--bar) !important; border-bottom: 1px solid var(--line) !important; }
body.tsl-portal .tsl-top-t h2,
body.tsl-portal .ws-topbar h1, body.tsl-portal .ws-topbar h2 { font-family: var(--sans) !important; font-weight: 800 !important; letter-spacing: -0.03em; color: var(--ink) !important; }
body.tsl-portal .tsl-top-t span, body.tsl-portal .ws-meta { color: var(--ink-3) !important; font-family: var(--mono) !important; font-size: 11.5px !important; }
body.tsl-portal .tsl-top-btn { background: var(--frame) !important; border-color: var(--line) !important; border-radius: 9px !important; color: var(--ink-2) !important; }
body.tsl-portal .tsl-top-btn:hover { background: var(--well) !important; color: var(--blue-ink) !important; }
/* the console's bell: the parent theme has an older floating bell with the same
   class, which pinned this one over the top bar's «Αποσύνδεση» */
body.tsl-portal .tsl-top-a .tsl-bell { position: relative !important; inset: auto !important; z-index: auto !important; }

/* the request's status, top right («Νέα», «Σε εξέλιξη»…): a quiet chip with a
   coloured dot instead of a yellow block with an emoji (chrome.js drops the emoji) */
body.tsl-portal .ws-pill { display: inline-flex !important; align-items: center; gap: 8px; padding: 6px 12px 6px 10px !important; border-radius: 999px !important; background: var(--frame) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; font: 600 0.84rem/1.2 var(--sans) !important; box-shadow: var(--sh-1); white-space: nowrap; }
body.tsl-portal .ws-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
body.tsl-portal .ws-pill.wt::before { background: #D97706; box-shadow: 0 0 0 3px color-mix(in srgb, #D97706 22%, transparent); }
body.tsl-portal .ws-pill.go::before { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
body.tsl-portal .ws-pill.sent::before { background: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent); }

/* the four phases: done and current in the selection blue, the rest a grey track */
body.tsl-portal .ws-ph { border-top-color: var(--track) !important; }
body.tsl-portal .ws-ph.done, body.tsl-portal .ws-ph.now { border-top-color: var(--blue) !important; }
body.tsl-portal .ws-ph .t { color: var(--ink-3) !important; }
body.tsl-portal .ws-ph.done .t, body.tsl-portal .ws-ph.now .t { color: var(--ink) !important; font-weight: 700 !important; }
body.tsl-portal .ws-ph .d { color: var(--ink-3) !important; font-family: var(--mono) !important; font-size: 11.5px !important; }
body.tsl-portal .ws-ph.now .d { color: var(--blue-ink) !important; }

/* the four numbers: one artboard, labels in mono like the inspector's */
body.tsl-portal .ws-stats { background: var(--frame) !important; border: 1px solid var(--line) !important; border-radius: 8px; overflow: hidden; box-shadow: var(--sh-1); }
body.tsl-portal .ws-stat .k { font: 500 10.5px/1.3 var(--mono) !important; letter-spacing: 0.04em !important; color: var(--ink-3) !important; }
body.tsl-portal .ws-stat .v { font-family: var(--sans) !important; letter-spacing: -0.04em; }
body.tsl-portal .ws-stat .v.accent { color: var(--blue-ink) !important; }
/* cards side by side are one height */
body.tsl-portal .ws-cols, body.tsl-portal .ws-extra { align-items: stretch !important; }
body.tsl-portal .ws-feed .dot { border-radius: 50%; }
body.tsl-portal #cp-wrap a.ws-more { color: var(--blue-ink) !important; }

/* ------------------------------------------------------- cards: frames -- */
body.tsl-portal .tt-card, body.tsl-portal .cp-card, body.tsl-portal .tsl-card-box, body.tsl-portal .cp-stat,
body.tsl-portal .tsl-main .tt-stat-card, body.tsl-portal .tt-stat-card, body.tsl-portal .cp-row-card, body.tsl-portal .cp-ql-card {
  background: var(--frame) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow: var(--sh-1) !important;
}
body.tsl-portal .tsl-main .tt-stat-card::before { background: var(--blue) !important; width: 3px !important; }
body.tsl-portal .tsl-main .tt-stat-card.warn::before { background: #D97706 !important; }
body.tsl-portal .tsl-main .tt-stat-n, body.tsl-portal .tt-stat-n, body.tsl-portal .cp-stat-n, body.tsl-portal .cp-kpi-n { font-family: var(--sans) !important; font-weight: 800 !important; letter-spacing: -0.04em; color: var(--ink) !important; font-variant-numeric: tabular-nums; }
body.tsl-portal .tt-stat-l, body.tsl-portal .cp-stat-l { color: var(--ink-2) !important; }
body.tsl-portal .tsl-main .tt-card-title, body.tsl-portal .tt-card-title,
body.tsl-portal #cp-wrap .cp-card-title, body.tsl-portal .cp-card-title { font: 500 11px/1.3 var(--mono) !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: var(--ink-3) !important; border-left: 0 !important; padding-left: 0 !important; }
body.tsl-portal .tsl-main .tt-page-header h1, body.tsl-portal .tsl-main .wrap > h1,
body.tsl-portal .cp-page-header h1 { font-family: var(--sans) !important; font-weight: 800 !important; color: var(--ink) !important; letter-spacing: -0.03em; }

/* --------------------------------------------- actions: the blue colour -- */
body.tsl-portal .tt-btn-primary, body.tsl-portal .tsl-main .tt-btn-primary,
body.tsl-portal .cp-btn-gold, body.tsl-portal #cp-wrap a.cp-btn-gold,
body.tsl-portal .cp-sb-cta, body.tsl-portal #cp-wrap a.cp-sb-cta,
body.tsl-portal .btn-gold, body.tsl-portal .acc-submit {
  background: var(--blue) !important; background-image: none !important; border: 1px solid var(--blue) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border-radius: 9px !important; box-shadow: 0 8px 18px -10px rgba(37, 99, 235, 0.7) !important;
}
body.tsl-portal .tt-btn-primary:hover, body.tsl-portal .cp-btn-gold:hover, body.tsl-portal .cp-sb-cta:hover, body.tsl-portal .btn-gold:hover, body.tsl-portal .acc-submit:hover { background: var(--blue-2) !important; border-color: var(--blue-2) !important; opacity: 1 !important; }
body.tsl-portal .tt-btn, body.tsl-portal .cp-btn { border-radius: 9px !important; }
body.tsl-portal .tt-btn-ghost, body.tsl-portal .cp-btn-ghost, body.tsl-portal .btn-ghost,
body.tsl-portal #cp-wrap a.cp-btn-ghost { background: var(--frame) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; -webkit-text-fill-color: currentColor !important; }
body.tsl-portal .tt-btn-ghost:hover, body.tsl-portal .cp-btn-ghost:hover, body.tsl-portal .btn-ghost:hover,
body.tsl-portal #cp-wrap a.cp-btn-ghost:hover { border-color: var(--blue) !important; color: var(--blue-ink) !important; }
body.tsl-portal .cp-filter-tab.active, body.tsl-portal .ws-switch a.on, body.tsl-portal #tsl-tabbar .tsl-tab.active { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
body.tsl-portal .cp-progress-bar { background: var(--blue) !important; }
body.tsl-portal .cp-tl-step.done::before, body.tsl-portal .cp-tl-step.done::after, body.tsl-portal .cp-tl-step.active::before,
body.tsl-portal .cp-tl-step.done .cp-tl-dot, body.tsl-portal .cp-tl-step.active .cp-tl-dot { background: var(--blue) !important; }
body.tsl-portal .cp-tl-step.active .cp-tl-dot { box-shadow: 0 0 0 4px var(--blue-tint) !important; }
body.tsl-portal .cp-todo-check.checked { background: var(--blue) !important; border-color: var(--blue) !important; }
body.tsl-portal .cp-nba { background: var(--blue-tint) !important; border: 1px solid var(--blue-line) !important; border-radius: 10px !important; }

/* ------------------------------------------------------- form fields -- */
body.tsl-portal input[type=text], body.tsl-portal input[type=email], body.tsl-portal input[type=password], body.tsl-portal input[type=tel],
body.tsl-portal input[type=url], body.tsl-portal input[type=number], body.tsl-portal input[type=search], body.tsl-portal input[type=date],
body.tsl-portal select, body.tsl-portal textarea { border-radius: 8px !important; border-color: var(--field-line) !important; background-color: var(--field) !important; color: var(--ink) !important; }
body.tsl-portal input::placeholder, body.tsl-portal textarea::placeholder { color: var(--ink-3) !important; }
body.tsl-portal input:focus, body.tsl-portal select:focus, body.tsl-portal textarea:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-tint) !important; outline: none !important; }

/* ---------------------------------------- the sign-in page (logged out) -- */
body.tsl-portal #cp-auth h1 { font-weight: 800 !important; letter-spacing: -0.04em; color: var(--ink) !important; }
body.tsl-portal #cp-auth .cp-card, body.tsl-portal #cp-auth > div > div { border-radius: 8px; }
/* the two forms dressed like the site's contact form: artboards with a mono
   label, bold field names over plain fields, no box around each field */
body.tsl-portal #cp-wrap.cp-auth { max-width: 1000px !important; margin: 0 auto !important; padding: 48px var(--gut) 80px !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-page-header { justify-content: flex-start; margin: 0 0 30px; padding: 0; border: 0 !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-page-header h1 { font: 800 clamp(2rem, 1.4rem + 2vw, 3rem)/1.05 var(--sans) !important; letter-spacing: -0.045em; }
body.tsl-portal #cp-wrap.cp-auth .cp-page-header h1::before { content: "Ο πίνακας του πελάτη"; display: block; margin-bottom: 12px; font: 500 12px/1.2 var(--mono); letter-spacing: 0; color: var(--ink-2); }
body.tsl-portal #cp-wrap.cp-auth .cp-auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
body.tsl-portal #cp-wrap.cp-auth .cp-card { padding: clamp(22px, 3vw, 32px) !important; background: var(--frame) !important; border: 1px solid var(--line) !important; box-shadow: var(--sh-2) !important; margin: 0 !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-card-title { margin: 0 0 6px !important; padding: 0 0 12px !important; border-bottom: 1px solid var(--line) !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-card > .cp-muted { margin: 12px 0 22px !important; font-size: 0.95rem !important; color: var(--ink-2) !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-field { position: relative; display: grid; gap: 7px; margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-field label { margin: 0 !important; font: 700 0.9rem/1.3 var(--sans) !important; color: var(--ink) !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-field input { width: 100% !important; box-sizing: border-box; min-height: 46px; margin: 0 !important; padding: 11px 13px !important; border: 1px solid var(--field-line) !important; border-radius: 9px !important; background: var(--field) !important; color: var(--ink) !important; font: 500 1rem/1.3 var(--sans) !important; box-shadow: none !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-field input[type=password] { padding-right: 48px !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-field input:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-tint) !important; outline: none !important; }
/* what the browser fills in keeps the field's own colours, not its blue-grey */
body.tsl-portal #cp-wrap.cp-auth input:-webkit-autofill,
body.tsl-portal #cp-wrap.cp-auth input:-webkit-autofill:hover,
body.tsl-portal #cp-wrap.cp-auth input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--field) inset !important; -webkit-text-fill-color: var(--ink) !important; caret-color: var(--ink); transition: background-color 9999s ease 0s; }
/* the show-password button: an eye drawn in the palette, inside the field */
body.tsl-portal #cp-wrap.cp-auth .acc-pass-toggle { position: absolute !important; right: 6px !important; bottom: 6px !important; top: auto !important; transform: none !important; width: 34px; height: 34px; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: none !important; color: var(--ink-3) !important; font-size: 0 !important; cursor: pointer; }
body.tsl-portal #cp-wrap.cp-auth .acc-pass-toggle::before { content: ""; display: block; width: 18px; height: 18px; margin: auto; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
body.tsl-portal #cp-wrap.cp-auth .acc-pass-toggle:hover { color: var(--blue-ink) !important; background: var(--well) !important; }
/* «Να με θυμάσαι» and «Ξέχασες τον κωδικό;» */
body.tsl-portal #cp-wrap.cp-auth form > div[style*="space-between"] { margin: 2px 0 20px !important; font-size: 0.9rem !important; }
body.tsl-portal #cp-wrap.cp-auth form > div[style*="space-between"] label { color: var(--ink-2) !important; font-weight: 600; cursor: pointer; gap: 8px !important; }
body.tsl-portal #cp-wrap.cp-auth form > div[style*="space-between"] a { color: var(--blue-ink) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
body.tsl-portal #cp-wrap.cp-auth input[type=checkbox] { width: 17px; height: 17px; margin: 0 !important; accent-color: var(--blue); flex: none; }
/* the new password's strength, and the terms */
body.tsl-portal #cp-wrap.cp-auth .acc-strength { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: -6px 0 0; }
body.tsl-portal #cp-wrap.cp-auth .acc-strength span { height: 4px; border-radius: 4px; background: var(--track); }
body.tsl-portal #cp-wrap.cp-auth #regStrengthLabel { margin: 8px 0 16px !important; font: 500 11.5px/1.3 var(--mono) !important; color: var(--ink-3) !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-checkbox { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 20px !important; font: 600 0.9rem/1.4 var(--sans) !important; color: var(--ink-2) !important; cursor: pointer; }
body.tsl-portal #cp-wrap.cp-auth .cp-checkbox input { margin-top: 1px !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-checkbox a { color: var(--blue-ink) !important; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
/* the two buttons, as on the site */
body.tsl-portal #cp-wrap.cp-auth .cp-btn { min-height: 48px; border-radius: 10px !important; font: 700 1rem/1 var(--sans) !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-btn-ghost { background: var(--frame) !important; border: 1px solid var(--field-line) !important; color: var(--ink) !important; }
body.tsl-portal #cp-wrap.cp-auth .cp-btn-ghost:hover { border-color: var(--blue) !important; color: var(--blue-ink) !important; }
@media (max-width: 760px) {
  body.tsl-portal #cp-wrap.cp-auth { padding: 28px 16px 56px !important; }
  body.tsl-portal #cp-wrap.cp-auth .cp-auth-grid { grid-template-columns: 1fr; }
}

/* the canvas toolbar sits on the sign-in page; push the content below it */
body.tsl-portal:has(> .tb) { padding-top: calc(var(--tb) + 8px) !important; }

/* dialogs */
body.tsl-portal .acc-modal, body.tsl-portal .tslnr { border-radius: 12px !important; }
body.tsl-portal .tslnr-h strong { font-family: var(--sans) !important; font-weight: 800; }

/* the client rail: its brand is a pseudo-element, its help entry a button */
body.tsl-portal .cp-sidebar::before { color: var(--ink) !important; font: 800 1.45rem/1 var(--sans) !important; letter-spacing: -0.04em !important; }
body.tsl-portal .cp-sb-who .nm { color: var(--ink) !important; }
body.tsl-portal #cp-wrap .cp-sidebar .acc-sb-help-btn { color: var(--ink-2) !important; font: 600 0.92rem/1.3 var(--sans) !important; text-align: left; background: none !important; border: 0 !important; }
body.tsl-portal #cp-wrap .cp-sidebar .acc-sb-help-btn:hover { color: var(--blue-ink) !important; background: var(--well) !important; }
body.tsl-portal #cp-wrap a.cp-sb-logout, body.tsl-portal .cp-sidebar .cp-sb-logout { color: var(--bad-ink) !important; }
body.tsl-portal #cp-wrap a.cp-sb-logout:hover { color: var(--red-ink) !important; }

/* the parent's thin reading line at the very top: one colour, the canvas blue */
body.tsl-portal .tslprog i { background: var(--blue) !important; box-shadow: none !important; }

/* --------------------------------------------- the look, in the rails -- */
/* three swatches (chrome.js moves this into the client rail or the console's) */
.pmode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 16px 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.pmode__h { grid-column: 1 / -1; margin: 0 0 2px; font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.pmode button { display: grid; justify-items: center; gap: 5px; padding: 8px 2px 7px; border: 0; border-radius: 8px; background: var(--frame); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 600 0.72rem/1.15 var(--sans) !important; cursor: pointer; }
.pmode button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3); }
.pmode button[aria-checked="true"] { background: var(--blue-tint); box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--ink); }
.pmode button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pmode[hidden] { display: none; }
/* until the script places it, it waits out of sight */
body > .pmode { position: absolute; left: -9999px; }

/* access and payment (inc/access.php, chrome.js) */
body.tsl-portal .tsl-acc-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
body.tsl-portal .tsl-acc-hint[hidden] { display: none; }
body.tsl-portal .tsl-acc { margin-bottom: 24px; }
body.tsl-portal .tsl-acc-state { margin: 0 0 14px; padding: 10px 14px; border-radius: 9px; font-size: 14px; line-height: 1.5; }
body.tsl-portal .tsl-acc-state.is-need { background: var(--warn-bg); color: var(--warn-ink); }
body.tsl-portal .tsl-acc-state.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
body.tsl-portal .tsl-acc-form p { position: relative; }
body.tsl-portal .tsl-acc-eye { position: absolute; right: 8px; bottom: 7px; padding: 4px 8px; border: 0; border-radius: 6px; background: var(--well); color: var(--ink-2); font: 600 12px/1.2 var(--sans); cursor: pointer; }
body.tsl-portal .tsl-acc-form input#tslAcc_pass { padding-right: 96px; }
body.tsl-portal .tsl-acc-safe { margin: 14px 0 0 !important; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
body.tsl-portal .tslproj-msg.is-err { color: var(--bad-ink) !important; }
body.tsl-portal .tsl-acc-need { margin: 10px 0 0; padding: 10px 12px; border-radius: 9px; background: var(--warn-bg); font-size: 14px; }
body.tsl-portal .tsl-acc-need a { color: var(--warn-ink) !important; font-weight: 700; }
body.tsl-portal .tsl-acc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 6px 0 14px; font-size: 14px; }
body.tsl-portal .tsl-acc-dl[hidden] { display: none; }
body.tsl-portal .tsl-acc-dl dt { color: var(--ink-2); }
body.tsl-portal .tsl-acc-dl dd { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; }
body.tsl-portal .tsl-acc-dl code { padding: 3px 8px; border-radius: 6px; background: var(--well); color: var(--ink); font: 500 13px/1.4 var(--mono); overflow-wrap: anywhere; }
body.tsl-portal .tsl-acc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.tsl-portal .tsl-pay-way { margin: 0 0 12px; padding: 9px 12px; border-radius: 9px; background: var(--blue-tint); color: var(--tint-ink); font-weight: 700; }
.tsl-pay-back { position: fixed; inset: 0; z-index: 100080; background: rgba(15, 23, 42, 0.55); }
.tsl-pay { position: fixed; z-index: 100090; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); padding: 22px; background: var(--frame); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-2); font-family: var(--sans); }
.tsl-pay-h { margin: 0 0 14px; font: 800 1.2rem/1.25 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.tsl-pay-opt { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.tsl-pay-opt:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); }
.tsl-pay-opt input { margin-top: 3px; accent-color: var(--blue); }
.tsl-pay-opt span { display: grid; gap: 3px; }
.tsl-pay-opt b { font-size: 15px; color: var(--ink); }
.tsl-pay-opt:has(input:checked) b { color: var(--tint-ink); }
.tsl-pay-opt small { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.tsl-pay-opt:has(input:checked) small { color: var(--tint-ink); }
.tsl-pay-note { margin: 4px 0 16px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.tsl-pay-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }body.tsl-portal :is(.tsl-acc, .tsl-pay) [hidden] { display: none !important; }
/* the console's agreement: its «Αποθήκευση» sat on the last field */
body.tsl-portal #tslSaveAgreementBtn { margin-top: 16px; }
body.tsl-portal .tt-card.tsl-acc { margin-bottom: 0; }
/* accepted proposals */
body.tsl-portal .tsl-extras { margin-bottom: 24px; }
body.tsl-portal .tsl-extras-box { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--well); }
body.tsl-portal .tsl-extras-box .tt-card-title { margin: 0 0 10px; }
body.tsl-portal .tsl-extras-list { margin: 0; padding: 0; list-style: none; }
body.tsl-portal .tsl-extras-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); }
body.tsl-portal .tsl-extras-list b { white-space: nowrap; }
body.tsl-portal .tsl-extras-sum { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
/* «Δες την όπως ο πελάτης» */
.tsl-preview { position: fixed; z-index: 100100; left: 50%; top: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; background: var(--blue); color: #fff; box-shadow: var(--sh-2); font: 600 13.5px/1.4 var(--sans); }
.tsl-preview a { color: #fff !important; font-weight: 800; text-decoration: underline; white-space: nowrap; }
.tsl-preview.is-shake { animation: tsl-shake 0.4s; }
@keyframes tsl-shake { 25% { transform: translateX(calc(-50% - 6px)); } 75% { transform: translateX(calc(-50% + 6px)); } }
html.is-preview body.tsl-portal { padding-top: 56px !important; }/* the plugin's «Νέα αίτηση» window, once the request is sent: a small card */
body.tsl-portal .tslnr { background: var(--frame) !important; border: 1px solid var(--line); border-radius: 14px !important; }
body.tsl-portal .tslnr-h { border-bottom-color: var(--line) !important; }
body.tsl-portal .tslnr-h strong { color: var(--ink) !important; font-family: var(--sans) !important; font-weight: 800; }
body.tsl-portal .tslnr-h span { color: var(--ink-2) !important; }
body.tsl-portal .tslnr.is-done { inset: auto !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); height: min(400px, calc(100vh - 32px)); max-width: none; margin: 0; transition: width 0.3s, height 0.3s; }/* the access form's password field: the same size as the other fields */
body.tsl-portal .tsl-acc-form input[type=password], body.tsl-portal .tsl-acc-form input[type=text] { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border: 1px solid var(--field-line) !important; border-radius: 9px; background: var(--field) !important; color: var(--ink) !important; font: 400 15px/1.3 var(--sans); }
body.tsl-portal .tsl-acc-state.is-offer { background: var(--well); color: var(--ink-2); }
/* «Τι λείπει ακόμα»: the client gives what they have, any time */
body.tsl-portal .tsl-self { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
body.tsl-portal .tsl-self-h { flex: 1 0 100%; margin: 0 0 2px; font-size: 13.5px; color: var(--ink-2); }
/* «Πληρωμές»: what is due now */
body.tsl-portal .tsl-paynow { margin-bottom: 24px; }
body.tsl-portal .tsl-paynow-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink); }
body.tsl-portal .tsl-paynow-row:last-child { border-bottom: 0; }
/* «Η συμφωνία μας»: what the package includes, centred and a little larger */
body.tsl-portal .tsl-incl { grid-column: 1 / -1; justify-self: center; width: min(100%, 880px); margin-left: auto !important; margin-right: auto !important; }
body.tsl-portal .tsl-incl li { font-size: 15.5px !important; line-height: 1.6 !important; padding-top: 4px; padding-bottom: 4px; }
body.tsl-portal .tsl-incl .cp-card-title { text-align: center; }
/* the admin's «Τρόπος πληρωμής» */
body.tsl-portal .tsl-pay-way { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--blue-tint); color: var(--tint-ink); }
body.tsl-portal .tsl-pay-way-h { flex: 1 0 100%; margin: 0; font-weight: 700; font-size: 13.5px; }
body.tsl-portal .tsl-pay-way-opt { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
body.tsl-portal .tsl-pay-way-opt input { accent-color: var(--blue); }body.tsl-portal .tsl-eta { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: 10px; font-size: 12.5px; }
body.tsl-portal .tsl-pay-way-note { flex: 1 0 100%; margin: 0; font-size: 12.5px; opacity: 0.9; }
body.tsl-portal .tsl-pay-way.is-sent { background: var(--ok-bg); color: var(--ok-ink); }
/* «Πλήρωσα ✓» and what the client already declared */
body.tsl-portal .tsl-acc-need { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
body.tsl-portal .tsl-paid-btn { white-space: nowrap; }
body.tsl-portal .tsl-paynow-acts { display: inline-flex; flex-wrap: wrap; gap: 8px; }
body.tsl-portal .tsl-acc-claimed { margin: 10px 0 0; padding: 9px 12px; border-radius: 9px; background: var(--ok-bg); color: var(--ok-ink); font-size: 14px; }
body.tsl-portal .tsl-paynow-row .tsl-acc-claimed { margin: 0; }
body.tsl-portal .tsl-paid-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--ok-bg); color: var(--ok-ink); font-weight: 700; }
body.tsl-portal .tsl-paid-bar p { margin: 0; flex: 1 0 100%; }

/* Προκαταβολή & εξόφληση: the plan's rows read in every look (the plugin's own colours are for white) */
body.tsl-portal .ws-ms .lb,
body.tsl-portal .ws-ms .am,
body.tsl-portal .ws-ms li.is-done .lb,
body.tsl-portal .tt-card:has(#tslMsActionStatus) strong { color: var(--ink); }
body.tsl-portal .ws-ms li { border-bottom-color: var(--line); }

/* the next payment and how: a card link or a bank deposit */
body.tsl-portal .tsl-next-h { font-weight: 700; font-size: 17px; margin: 0 0 8px; }
body.tsl-portal .tsl-next-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
body.tsl-portal .tsl-pay-how { margin: 14px 0 0; padding: 0; border: 0; display: grid; gap: 8px; }
body.tsl-portal .tsl-pay-h2 { font-weight: 700; font-size: 17px; margin-bottom: 4px; padding: 0; }
.tsl-pay .tsl-pay-how { margin: 14px 0 0; padding: 0; border: 0; display: grid; gap: 8px; }
.tsl-pay .tsl-pay-h2 { font-weight: 700; font-size: 17px; margin-bottom: 4px; padding: 0; }
body.tsl-portal .tsl-paynow .tsl-next-h,
body.tsl-portal .tsl-bankpay__h,
body.tsl-portal .tsl-bank dd,
body.tsl-portal .tsl-bank code { color: var(--ink); }
body.tsl-portal .tsl-bank dt { color: var(--ink-2); opacity: 1; }
body.tsl-portal .tsl-bank { background: var(--well); }

/* admin: where the payment stands */
.tsl-pay-st { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, #f59e0b 16%, transparent); }
.tsl-pay-st p { margin: 0; flex: 1 1 320px; font-weight: 600; }
.tsl-pay-st.is-claimed { background: color-mix(in srgb, #22c55e 18%, transparent); }

/* the access form: the domain account, then the hosting account */
.tsl-acc-form .tsl-acc-group { grid-column: 1 / -1; margin: 14px 0 0; font-weight: 700; font-size: 16px; color: var(--ink); }
.tsl-acc-form .tsl-acc-group:first-child { margin-top: 0; }

/* «Η συμφωνία μας»: what the package includes, beside the price when nothing else is there */
body.tsl-portal .tsl-incl-side { margin: 0 !important; align-self: stretch; }
body.tsl-portal .tsl-incl-side li { font-size: 15.5px !important; line-height: 1.6 !important; padding-top: 4px; padding-bottom: 4px; }

/* «Η συμφωνία μας»: the price and what it includes, two equal boxes side by side */
body.tsl-portal .tsl-sim-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-bottom: 24px; grid-column: 1 / -1; }
body.tsl-portal .tsl-sim-pair > .cp-card { margin: 0 !important; height: 100%; width: auto !important; max-width: none !important; }
@media (max-width: 900px) { body.tsl-portal .tsl-sim-pair { grid-template-columns: minmax(0, 1fr); } }
/* the client changes how much or how to pay */
body.tsl-portal .tsl-next-change { margin: 0 0 12px; padding: 0; border: 0; background: none; color: var(--blue-ink, #6d9bff); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---- Αιτήματα (tickets): both sides */
.tsl-tk-card .tsl-tk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tsl-tk-card .tsl-tk-top .cp-card-title { margin: 0; }
.tsl-tk { margin: 8px 0 0; border-radius: 12px; background: var(--well, rgba(127, 127, 127, .08)); }
.tsl-tk__sum { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.tsl-tk__sum::-webkit-details-marker { display: none; }
.tsl-tk__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tsl-tk__main b { color: var(--ink); font-size: 15.5px; overflow-wrap: anywhere; }
.tsl-tk__main small { color: var(--ink-3, #8a8a99); font-size: 13px; }
.tsl-tk__st { flex: none; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: color-mix(in srgb, #3b82f6 18%, transparent); color: var(--ink); }
.tsl-tk__st--progress { background: color-mix(in srgb, #f59e0b 20%, transparent); }
.tsl-tk__st--done { background: color-mix(in srgb, #22c55e 20%, transparent); }
.tsl-tk__wait { flex: none; padding: 5px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #dc2626; color: #fff; }
.tsl-tk__body { padding: 0 16px 16px; }
.tsl-tk__thread { display: grid; gap: 8px; margin-bottom: 12px; }
.tsl-tk__msg { max-width: 80%; padding: 10px 12px; border-radius: 12px; background: var(--frame, rgba(127, 127, 127, .14)); justify-self: start; }
.tsl-tk__msg.is-mine { justify-self: end; background: color-mix(in srgb, #2f6bff 22%, transparent); }
.tsl-tk__msg p { margin: 0; color: var(--ink); white-space: pre-wrap; font-size: 15px; line-height: 1.5; }
.tsl-tk__msg small { display: block; margin-top: 4px; color: var(--ink-3, #8a8a99); font-size: 12px; }
.tsl-tk__reply textarea { width: 100%; min-height: 70px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, rgba(127, 127, 127, .3)); background: var(--field, transparent); color: var(--ink); font: inherit; font-size: 15px; resize: vertical; }
.tsl-tk__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.tsl-tk__status { min-height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line, rgba(127, 127, 127, .3)); background: var(--field, transparent); color: var(--ink); font: inherit; font-size: 14px; }
.tsl-tk__msgline { font-size: 13px; color: var(--ink-3, #8a8a99); }
.tsl-tk.is-waiting { box-shadow: inset 3px 0 0 #dc2626; }
.tsl-tk-board .tsl-tk-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 6px; border-radius: 10px; background: var(--well, rgba(127, 127, 127, .08)); text-decoration: none; color: inherit; transition: background .2s; }
.tsl-tk-board .tsl-tk-row:hover { background: color-mix(in srgb, #2f6bff 14%, transparent); }
.tsl-tk-board .tsl-tk-row.is-waiting { box-shadow: inset 3px 0 0 #dc2626; }
.tsl-tk-acts2 { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
/* the new-ticket window */
.tsl-tk-new .tsl-tk-f { display: grid; gap: 6px; margin: 12px 0 0; font-weight: 600; font-size: 14px; }
.tsl-tk-new .tsl-tk-f input, .tsl-tk-new .tsl-tk-f textarea, .tsl-tk-new .tsl-tk-f select { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, rgba(127, 127, 127, .3)); background: var(--field, transparent); color: inherit; font: inherit; font-weight: 400; }
.tsl-tk-new { width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 26px 26px 22px; }
.tsl-tk-new .tsl-pay-h { margin: 0 40px 6px 0; font-size: 22px; }
.tsl-tk-new .tsl-pay-note { margin: 0; color: var(--muted, #8b93a7); font-size: 14px; line-height: 1.5; }
.tsl-tk-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; opacity: .6; }
.tsl-tk-x:hover { opacity: 1; background: rgba(127, 127, 127, .14); }
.tsl-tk-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.tsl-tk-kinds legend { padding: 0; margin: 0 0 6px; font-weight: 600; font-size: 14px; }
.tsl-tk-kind { position: relative; display: block; cursor: pointer; }
.tsl-tk-kind input { position: absolute; opacity: 0; pointer-events: none; }
.tsl-tk-kind__c { display: grid; gap: 2px; height: 100%; padding: 11px 14px 11px 36px; border-radius: 12px; border: 1px solid var(--line, rgba(127, 127, 127, .3)); transition: border-color .15s, background .15s; position: relative; }
.tsl-tk-kind__c::before { content: ""; position: absolute; left: 13px; top: 14px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line, rgba(127, 127, 127, .5)); box-sizing: border-box; }
.tsl-tk-kind__c b { font-size: 14px; font-weight: 600; }
.tsl-tk-kind__c small { font-size: 12.5px; color: var(--muted, #8b93a7); line-height: 1.35; }
.tsl-tk-kind:hover .tsl-tk-kind__c { border-color: rgba(47, 107, 255, .6); }
.tsl-tk-kind input:checked + .tsl-tk-kind__c { border-color: #2f6bff; background: rgba(47, 107, 255, .1); }
.tsl-tk-kind input:checked + .tsl-tk-kind__c::before { border: 4px solid #2f6bff; background: #fff; }
.tsl-tk-kind input:focus-visible + .tsl-tk-kind__c { outline: 3px solid #2f6bff; outline-offset: 2px; }
.tsl-tk-new .tsl-tk-f { margin-top: 16px; }
.tsl-tk-new .tsl-tk-f textarea { min-height: 120px; resize: vertical; }
.tsl-tk-new .tsl-tk-f input:focus, .tsl-tk-new .tsl-tk-f textarea:focus, .tsl-tk-new .tsl-tk-f select:focus { outline: none; border-color: #2f6bff; box-shadow: 0 0 0 3px rgba(47, 107, 255, .25); }
.tsl-tk-new__msg { min-height: 20px; margin: 10px 0 0; font-size: 13.5px; color: #e5484d; }
.tsl-tk-new__msg:empty { min-height: 0; margin: 0; }
.tsl-tk-new__nav { display: flex; justify-content: flex-end; gap: 10px; margin: 18px -26px -22px; padding: 16px 26px; border-top: 1px solid var(--line, rgba(127, 127, 127, .2)); }
.tsl-tk-btn { min-height: 44px; padding: 0 20px; border-radius: 10px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.tsl-tk-btn--go { background: #2f6bff; color: #fff; }
.tsl-tk-btn--go:hover { background: #1f58e6; }
.tsl-tk-btn--go:disabled { opacity: .6; cursor: progress; }
.tsl-tk-btn--no { background: transparent; color: inherit; border-color: var(--line, rgba(127, 127, 127, .3)); }
.tsl-tk-btn--no:hover { background: rgba(127, 127, 127, .12); }
@media (max-width: 520px) {
  .tsl-tk-kinds { grid-template-columns: 1fr; }
  .tsl-tk-new__nav { flex-direction: column-reverse; }
  .tsl-tk-btn { width: 100%; }
}
/* the maintenance log on the admin's case */
.tsl-ml-lock { margin: 0 0 10px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(234, 179, 8, .45); background: rgba(234, 179, 8, .1); }
.tsl-ml-lock[hidden] { display: none; }
.tsl-ml-lock p { margin: 0 0 8px; font-size: 13.5px; }
.tsl-ml-ex { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.tsl-ml-ex input { margin-top: 3px; }
.tsl-ml-fields { display: grid; gap: 8px; }
.tsl-ml-fields.is-off { opacity: .45; }
.tsl-ml-top { display: grid; grid-template-columns: minmax(170px, 220px) 1fr; gap: 8px; }
.tsl-ml .tsl-ml-fields select, .tsl-ml .tsl-ml-fields input, .tsl-ml .tsl-ml-fields textarea { width: 100%; max-width: none; min-height: 38px; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 13.5px; box-sizing: border-box; }
.tsl-ml .tsl-ml-fields textarea { resize: vertical; }
.tsl-ml-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.tsl-ml-msg { font-size: 13px; }
.tsl-ml-lh { margin-top: 18px !important; }
.tsl-ml-list { list-style: none; margin: 0; padding: 0; }
.tsl-ml-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid rgba(127, 127, 127, .18); }
.tsl-ml-item.is-edit { display: block; }
.tsl-ml-main { flex: 1 1 auto; min-width: 0; }
.tsl-ml-t { margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.tsl-ml-ic { flex: 0 0 auto; }
.tsl-ml-xb { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(234, 179, 8, .18); color: #d4a106; }
.tsl-ml-d { margin: 4px 0 0 26px; font-size: 13.5px; opacity: .8; white-space: pre-line; }
.tsl-ml-side { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.tsl-ml-side small { opacity: .6; font-size: 12px; }
.tsl-ml-del { border: 0; background: none; color: #e5484d; font: inherit; font-size: 12.5px; cursor: pointer; padding: 4px; }
.tsl-ml-none { font-size: 13px; opacity: .7; padding: 6px 0; }
@media (max-width: 640px) { .tsl-ml-top { grid-template-columns: 1fr; } .tsl-ml-item { flex-wrap: wrap; } }
.tsl-ml, .tsl-ml-t b, .tsl-ml-d, .tsl-ml-msg, .tsl-ml-ex span, .tsl-ml-lock p { color: var(--ink, inherit); }
.tsl-ml-d, .tsl-ml-side small { color: var(--ink-2, var(--ink)); }
.tsl-ml-acts .tt-btn:disabled { opacity: .45; cursor: not-allowed; }
/* the sidebars stay put whatever the page beside them does */
@media (min-width: 900px) {
  /* the console's rail is pinned to the window: the page below its frame (the cookie banner's parts) made a sticky one run away */
  body.tsl-portal .tsl-console-bar { position: sticky; top: 0; z-index: 60; }
  body.tsl-portal .tsl-rail { position: fixed !important; left: 0; top: 52px; width: 242px; height: calc(100vh - 52px); min-height: 0 !important; max-height: none; overflow-y: auto; z-index: 50; }
  body.tsl-portal .tsl-shell { grid-template-columns: minmax(0, 1fr) !important; padding-left: 242px; }
  body.tsl-portal .tsl-top { top: 52px !important; }
  body.admin-bar.tsl-portal .tsl-console-bar { top: 32px; }
  body.admin-bar.tsl-portal .tsl-top { top: 84px !important; }
  body.admin-bar.tsl-portal .tsl-rail { top: 84px; height: calc(100vh - 84px); }
}
/* the two rounds of changes */
.tsl-rounds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.tsl-round { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line, rgba(127, 127, 127, .25)); }
.tsl-round b { font-size: 15px; color: var(--ink, inherit); }
.tsl-round small { font-size: 13px; color: var(--ink-2, inherit); opacity: .85; }
.tsl-round.is-done { border-color: rgba(22, 163, 74, .5); background: rgba(22, 163, 74, .08); }
.tsl-round.is-done small { color: #16a34a; opacity: 1; }
.tsl-round .tt-btn { justify-self: start; margin-top: 4px; }
/* «Συντήρηση»: one card per site */
.tsl-mts-list { display: grid; gap: 16px; }
.tsl-mts__pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(127, 127, 127, .16); color: var(--ink-2, inherit); }
.tsl-mts__pill.ok { background: rgba(22, 163, 74, .16); color: #16a34a; }
.tsl-mts__pill.warn, .tsl-mts__pill.wait { background: rgba(234, 179, 8, .18); color: #ca8a04; }
.tsl-mts__pill.bad { background: rgba(220, 38, 38, .15); color: #dc2626; }
.tsl-mts__name { margin: 10px 0 2px; font-size: 21px; font-weight: 700; color: var(--ink, inherit); }
.tsl-mts__sub { margin: 0; font-size: 13.5px; color: var(--ink-2, inherit); opacity: .85; }
.tsl-mts__sub a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.tsl-mts__say { margin: 14px 0 0; font-size: 15px; color: var(--ink, inherit); }
.tsl-mts__bar { margin-top: 14px; height: 8px; border-radius: 999px; background: rgba(127, 127, 127, .2); overflow: hidden; }
.tsl-mts__bar i { display: block; height: 100%; background: linear-gradient(90deg, #2563eb, #60a5fa); }
.tsl-mts__barx { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: 12px; opacity: .7; }
.tsl-mts__plan { margin-top: 16px; }
.tsl-mts__plan:empty { display: none; }
.tsl-mts__fine { margin: 10px 0 0; font-size: 13px; opacity: .8; max-width: 62ch; }
.tsl-mts__wait, .tsl-mts__ok { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 14.5px; }
.tsl-mts__wait { background: rgba(234, 179, 8, .12); border: 1px solid rgba(234, 179, 8, .4); }
.tsl-mts__ok { background: rgba(22, 163, 74, .1); border: 1px solid rgba(22, 163, 74, .4); }
.tsl-mts__ways { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.tsl-mts__way { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 12px; border: 1px solid var(--line, rgba(127, 127, 127, .25)); }
.tsl-mts__way > b { font-size: 15px; }
.tsl-mts__way .cp-btn { justify-self: start; }
.tsl-mts__bank { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.tsl-mts__bank dt { opacity: .7; }
.tsl-mts__bank dd { margin: 0; font-weight: 600; word-break: break-all; }
.tsl-mts__copy { margin-left: 8px; border: 1px solid var(--line, rgba(127, 127, 127, .3)); background: transparent; color: inherit; border-radius: 6px; font: inherit; font-size: 11.5px; font-weight: 500; padding: 1px 8px; cursor: pointer; }
.tsl-mts__msg { display: block; margin-top: 8px; font-size: 13px; }
.tsl-mts__msg:empty { display: none; }
.tsl-mts__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 18px; }
.tsl-mts__tile { display: grid; gap: 4px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line, rgba(127, 127, 127, .25)); border-left: 4px solid rgba(127, 127, 127, .4); }
.tsl-mts__tile.ok { border-left-color: #16a34a; } .tsl-mts__tile.warn { border-left-color: #d97706; } .tsl-mts__tile.bad { border-left-color: #dc2626; }
.tsl-mts__tile span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .65; }
.tsl-mts__tile b { font-size: 15px; }
.tsl-mts__foot { margin: 8px 0 0; font-size: 12.5px; opacity: .7; }
.tsl-mts__h { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line, rgba(127, 127, 127, .2)); font-size: 14px; font-weight: 700; }
.tsl-mts__none { margin: 8px 0 0; font-size: 13.5px; }
.tsl-mts__log { list-style: none; margin: 8px 0 0; padding: 0; }
.tsl-mts__log li { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line, rgba(127, 127, 127, .15)); }
.tsl-mts__log li:first-child { border-top: 0; }
.tsl-mts__log .ic { flex: 0 0 22px; text-align: center; }
.tsl-mts__log .lb { flex: 1 1 auto; font-size: 14px; }
.tsl-mts__log .dt { flex: 0 0 auto; font-size: 12px; opacity: .65; }
.tsl-mts-add { margin-top: 16px; }
.tsl-mts-add__f { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; margin-top: 12px; }
.tsl-mts-add__f input, .tsl-mts-add__f textarea { min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line, rgba(127, 127, 127, .3)); background: var(--field, transparent); color: inherit; font: inherit; }
.tsl-mts-add__f textarea { grid-column: 1 / -1; resize: vertical; }
.tsl-mts-add__f .cp-btn { justify-self: start; }
.tsl-mts-add__f .tsl-mts__msg { grid-column: 1 / -1; margin: 0; }
.tsl-mts-what { margin-top: 16px; }
.tsl-mts-what > summary { cursor: pointer; font-weight: 600; }
.tsl-mts-what ul { margin: 12px 0 0; padding-left: 20px; line-height: 1.9; }
@media (max-width: 700px) {
  .tsl-mts__ways, .tsl-mts-add__f { grid-template-columns: 1fr; }
}
/* the plan on the admin's case */
.tsl-mt-adm .tsl-mt-line { margin: 0 0 8px; font-size: 14px; color: var(--ink, inherit); }
.tsl-mt-want { margin: 0 0 8px; padding: 8px 12px; border-radius: 8px; background: rgba(234, 179, 8, .12); font-size: 13.5px; color: var(--ink, inherit); }
.tsl-mt-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.tsl-mt-link { flex: 1 1 260px; min-height: 36px; padding: 6px 10px; border-radius: 8px; font: inherit; font-size: 13.5px; }
.tsl-mt-msg { font-size: 13px; color: var(--ink, inherit); }
.tsl-mts__name, .tsl-mts__sub, .tsl-mts__sub a, .tsl-mts__fine, .tsl-mts__wait, .tsl-mts__ok, .tsl-mts__way > b, .tsl-mts__way small, .tsl-mts__bank dt, .tsl-mts__bank dd, .tsl-mts__copy, .tsl-mts__msg, .tsl-mts__h, .tsl-mts__log .lb, .tsl-mts__log .dt, .tsl-mts__barx, .tsl-mts__foot, .tsl-mts__tile span, .tsl-mts__tile b, .tsl-mts-what > summary, .tsl-mts-what li, .tsl-rounds-cl .tsl-round b, .tsl-rounds-cl .tsl-round small { color: var(--ink) !important; }
.tsl-mts__round.is-done small, .tsl-rounds-cl .tsl-round.is-done small { color: #16a34a !important; }
/* «Ζήτησε Βοήθεια» is «Αιτήματα» now: one way in */
body.tsl-portal .cp-sidebar .acc-sb-help-btn, body.tsl-portal #cp-wrap .cp-sidebar .acc-sb-help-btn { display: none !important; } /* the plugin shows it with #cp-wrap … !important */
.tsl-rail-n { margin-left: auto; min-width: 20px; padding: 2px 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; text-align: center; }

/* ---- bug check 2026-10-29: nothing in the console runs off the side */
@media (max-width: 760px) {
	/* the plugin's inline grids (filters, two-card rows) become one column on a phone */
	body.tsl-portal:has(.tsl-console-bar) .tsl-main [style*="grid-template-columns"], body.tsl-portal:has(.tsl-console-bar) .tt-grid { grid-template-columns: minmax(0, 1fr) !important; }
	/* wide tables swipe inside their card instead of widening the page */
	body.tsl-portal:has(.tsl-console-bar) .tt-table, body.tsl-portal:has(.tsl-console-bar) table.widefat { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	/* the popup settings: label and field stack */
	body.tsl-portal:has(.tsl-console-bar) .tslp-row { flex-wrap: wrap; }
	body.tsl-portal:has(.tsl-console-bar) .tslp-row select, body.tsl-portal:has(.tsl-console-bar) .tslp-row input { flex: 1 1 100%; min-width: 0; max-width: 100%; }
}