:root{
      --bg:#030303;
      --bg2:#090909;
      --bg3:#111111;
      --panel:#0d0d0f;
      --panel-2:#141418;
      --line:#24242b;
      --line-soft:#34343f;
      --text:#f5f7fb;
      --text-soft:#c6cede;
      --muted:#8d97ab;
      --blue:#d4af37;
      --accent:#d4af37;
      --accent-rgb:212,175,55;
      --green:#22c55e;
      --amber:#f59e0b;
      --red:#ef4444;
      --live:#84cc16;
      --gold:#d4af37;
      --shadow:0 18px 48px rgba(0,0,0,.40);
      --shadow-soft:0 8px 24px rgba(0,0,0,.22);
      --radius:20px;
      --bg-gradient:
        radial-gradient(circle at top left, rgba(255,255,255,.05), transparent 26%),
        radial-gradient(circle at top right, rgba(212,175,55,.07), transparent 20%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, var(--bg3) 100%);
      --panel-gradient:linear-gradient(180deg, rgba(18,18,22,.98), rgba(10,10,13,.98));
      --panel-gradient-2:linear-gradient(180deg, rgba(20,20,26,.98), rgba(10,10,14,.98));
      --accent-glow:0 0 0 3px rgba(212,175,55,.14);
    }

    body[data-theme="midnight"]{
      --bg:#03111f;
      --bg2:#071a2f;
      --bg3:#0b2340;
      --panel:#0f1a2b;
      --panel-2:#152338;
      --line:#20324e;
      --line-soft:#294166;
      --text:#e8eef8;
      --text-soft:#bcc8d9;
      --muted:#8fa4c2;
      --blue:#5b8cff;
      --accent:#5b8cff;
      --accent-rgb:91,140,255;
      --shadow:0 18px 48px rgba(0,0,0,.34);
      --shadow-soft:0 8px 24px rgba(0,0,0,.18);
      --bg-gradient:
        radial-gradient(circle at top left, rgba(91,140,255,.18), transparent 24%),
        radial-gradient(circle at top right, rgba(34,197,94,.08), transparent 20%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, var(--bg3) 100%);
      --panel-gradient:linear-gradient(180deg, rgba(15,26,43,.96), rgba(11,22,37,.96));
      --panel-gradient-2:linear-gradient(180deg, rgba(18,31,50,.98), rgba(10,18,31,.98));
      --accent-glow:0 0 0 3px rgba(91,140,255,.16);
    }

    body[data-theme="purple"]{
      --bg:#100716;
      --bg2:#170c24;
      --bg3:#211136;
      --panel:#181123;
      --panel-2:#211832;
      --line:#34264f;
      --line-soft:#49356e;
      --text:#f4efff;
      --text-soft:#d7caef;
      --muted:#aa9acb;
      --blue:#a78bfa;
      --accent:#a78bfa;
      --accent-rgb:167,139,250;
      --shadow:0 18px 48px rgba(8,0,18,.40);
      --shadow-soft:0 8px 24px rgba(8,0,18,.24);
      --bg-gradient:
        radial-gradient(circle at top left, rgba(167,139,250,.16), transparent 24%),
        radial-gradient(circle at top right, rgba(244,114,182,.10), transparent 20%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, var(--bg3) 100%);
      --panel-gradient:linear-gradient(180deg, rgba(27,18,39,.97), rgba(17,10,25,.98));
      --panel-gradient-2:linear-gradient(180deg, rgba(34,23,50,.98), rgba(16,10,24,.98));
      --accent-glow:0 0 0 3px rgba(167,139,250,.18);
    }

    body[data-theme="emerald"]{
      --bg:#04130f;
      --bg2:#08211a;
      --bg3:#0b2f24;
      --panel:#0d1b17;
      --panel-2:#132722;
      --line:#204339;
      --line-soft:#2b5a4d;
      --text:#edf9f4;
      --text-soft:#c7e8da;
      --muted:#93b8a8;
      --blue:#34d399;
      --accent:#34d399;
      --accent-rgb:52,211,153;
      --shadow:0 18px 48px rgba(0,0,0,.36);
      --shadow-soft:0 8px 24px rgba(0,0,0,.20);
      --bg-gradient:
        radial-gradient(circle at top left, rgba(52,211,153,.15), transparent 24%),
        radial-gradient(circle at top right, rgba(212,175,55,.08), transparent 20%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg2) 55%, var(--bg3) 100%);
      --panel-gradient:linear-gradient(180deg, rgba(14,26,22,.96), rgba(8,18,15,.98));
      --panel-gradient-2:linear-gradient(180deg, rgba(20,38,33,.98), rgba(10,18,16,.98));
      --accent-glow:0 0 0 3px rgba(52,211,153,.18);
    }

    * { box-sizing:border-box; }
    html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

    body {
      margin:0;
      padding:20px;
      color:var(--text);
      font-family: Inter, Segoe UI, Arial, sans-serif;
      background:var(--bg-gradient);
      min-height:100vh;
      transition:background .25s ease, color .2s ease;
    }

    h1,h2,h3 { margin:0; }
    a { color:inherit; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .muted { color:var(--muted); font-size:13px; }
    .small { font-size:12px; color:var(--muted); }
    .nowrap { white-space:nowrap; }

    .page-loader {
      position:fixed;
      inset:0;
      z-index:9999;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(180deg, rgba(8,16,27,.96), rgba(11,21,36,.98));
      transition:opacity .35s ease, visibility .35s ease;
    }
    .page-loader.hidden {
      opacity:0;
      visibility:hidden;
      pointer-events:none;
    }
    .loader-box {
      width:min(92vw, 380px);
      background:linear-gradient(180deg, rgba(15,26,43,.98), rgba(10,18,31,.98));
      border:1px solid var(--line);
      border-radius:20px;
      padding:20px;
      box-shadow:var(--shadow);
    }
    .loader-brand {
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:14px;
    }
    .loader-brand img {
      max-width:34px;
      max-height:34px;
      width:auto;
      height:auto;
      display:block;
      object-fit:contain;
      filter:
        drop-shadow(0 8px 18px rgba(0,0,0,.35))
        drop-shadow(0 0 12px rgba(212,175,55,.25));
    }
    .loader-logo-fallback {
      width:34px;
      height:34px;
      border-radius:10px;
      border:1px solid rgba(212,175,55,.22);
      color:var(--gold);
      display:none;
      align-items:center;
      justify-content:center;
      font-weight:900;
      background:rgba(255,255,255,.03);
    }
    .loader-title {
      font-size:16px;
      font-weight:800;
    }
    .loader-sub {
      color:var(--muted);
      font-size:12px;
      margin-top:2px;
    }
    .loader-bar {
      position:relative;
      height:10px;
      overflow:hidden;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid var(--line-soft);
    }
    .loader-bar:after {
      content:"";
      position:absolute;
      inset:0;
      width:38%;
      border-radius:999px;
      background:linear-gradient(90deg, #d4af37 0%, #f2d98a 45%, #5b8cff 100%);
      animation:troniusLoad 1.2s ease-in-out infinite;
      box-shadow:0 0 18px rgba(212,175,55,.25);
    }
    @keyframes troniusLoad {
      0% { transform:translateX(-120%); }
      100% { transform:translateX(320%); }
    }

    .topbar {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:nowrap;
      margin-bottom:16px;
    }

    .title-wrap {
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:0;
      flex:0 0 auto;
      min-width:0;
    }

    .brand-wrap {
      display:flex;
      align-items:center;
      gap:16px;
      padding:0;
    }

    .brand-logo {
      width:min(235px, 18vw);
      height:auto;
      max-width:none;
      max-height:none;
      display:block;
      object-fit:contain;
      filter:
        drop-shadow(0 0 12px rgba(212,175,55,.40))
        drop-shadow(0 0 30px rgba(212,175,55,.20))
        drop-shadow(0 6px 18px rgba(0,0,0,.30));
      flex:0 0 auto;
    }

    .brand-logo-fallback {
      font-size:22px;
      font-weight:900;
      color:var(--gold);
      letter-spacing:.06em;
      display:none;
      line-height:1;
    }

    .brand-kicker {
      color:var(--gold);
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.14em;
      font-weight:800;
    }

    .toolbar {
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:nowrap;
      min-width:0;
    }

    .toolbar > * {
      min-width:0;
    }

    .theme-box {
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:nowrap;
      background:rgba(255,255,255,.03);
      border:1px solid var(--line);
      border-radius:14px;
      padding:8px 10px;
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(10px);
      white-space:nowrap;
    }

    .theme-label {
      color:var(--text-soft);
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-weight:800;
      white-space:nowrap;
    }

    .theme-select {
      min-width:132px;
      background:rgba(8,8,12,.78);
    }

    .toolbar form {
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:nowrap;
      background:color-mix(in srgb, var(--panel) 88%, black 12%);
      border:1px solid var(--line);
      border-radius:14px;
      padding:8px;
      box-shadow:var(--shadow-soft);
      min-width:0;
    }

    .auth-box {
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:nowrap;
      background:color-mix(in srgb, var(--panel) 88%, black 12%);
      border:1px solid var(--line);
      border-radius:14px;
      padding:8px;
      box-shadow:var(--shadow-soft);
      white-space:nowrap;
    }

    .auth-box input {
      min-width:150px;
    }

    .auth-status {
      color:var(--text-soft);
      font-size:13px;
      font-weight:700;
    }

    .notice {
      margin:0 0 12px 0;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid var(--line);
      background:color-mix(in srgb, var(--panel) 88%, black 12%);
      color:var(--text-soft);
    }

    .login-error {
      border-color:rgba(239,68,68,.35);
      color:#ffd7de;
    }

    .locked-note {
      color:var(--muted);
      font-size:12px;
      margin-top:6px;
    }

    .site-inline-wrap {
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }


    input, select, button, textarea {
      border-radius:12px;
      border:1px solid var(--line-soft);
      padding:9px 12px;
      background:rgba(9,18,34,.88);
      color:var(--text);
      transition:.15s ease;
      outline:none;
    }

    input::placeholder, textarea::placeholder { color:color-mix(in srgb, var(--muted) 82%, white 18%); }

    input:focus, select:focus, textarea:focus {
      border-color:rgba(var(--accent-rgb), .72);
      box-shadow:var(--accent-glow);
    }

    textarea {
      width:100%;
      min-height:100px;
      resize:vertical;
    }

    .btn, button {
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      font-size:13px;
      font-weight:700;
      gap:6px;
      padding:9px 12px;
      border-radius:12px;
      border:1px solid var(--line-soft);
      color:var(--text);
      background:linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 92%, white 8%), var(--panel));
      box-shadow:0 10px 24px rgba(0,0,0,.20);
      transition:transform .12s ease, border-color .15s ease, background .15s ease, box-shadow .18s ease;
    }

    .btn:hover, button:hover {
      transform:translateY(-1px);
      border-color:rgba(var(--accent-rgb), .42);
      background:linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 86%, white 14%), var(--panel));
      box-shadow:0 14px 28px rgba(0,0,0,.28);
    }



    .btn-rocket {
      border-color:rgba(245,158,11,.55);
      background:linear-gradient(180deg, rgba(245,158,11,.16), rgba(18,28,45,.98));
      color:#ffe7bf;
    }

    .btn-rocket:hover {
      border-color:rgba(245,158,11,.9);
      background:linear-gradient(180deg, rgba(245,158,11,.24), rgba(22,31,48,.98));
    }

    .btn-icon {
      width:16px;
      height:16px;
      display:inline-block;
      flex:0 0 auto;
    }

    .btn-primary {
      border-color:rgba(var(--accent-rgb), .55);
      background:linear-gradient(180deg, rgba(var(--accent-rgb), .14), color-mix(in srgb, var(--panel) 92%, black 8%));
    }

    .btn-primary:hover { border-color:rgba(var(--accent-rgb), .9); }
    .btn-danger { border-color:rgba(239,68,68,.55); color:#ffd7de; }
    .btn-danger:hover { background:linear-gradient(180deg, rgba(72,22,31,.95), rgba(28,10,15,.98)); }
    .btn-edit { border-color:color-mix(in srgb, var(--line-soft) 80%, white 20%); }

    .panel,
    .summary-box,
    .group-card,
    .device-card {
      box-shadow:var(--shadow);
      backdrop-filter:blur(10px);
    }

    .panel {
      background:var(--panel-gradient);
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:16px 18px;
      margin-bottom:16px;
      position:relative;
      overflow:hidden;
    }

    .panel:before,
    .summary-box:before,
    .group-card:before {
      content:"";
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:1px;
      background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(255,255,255,0));
    }

    .summary-grid {
      display:grid;
      grid-template-columns:repeat(3,minmax(180px,1fr));
      gap:12px;
      margin-bottom:16px;
    }

    .summary-box.live-box {
      border-top:2px solid rgba(132,204,22,.45);
    }

    .summary-box.offline-box {
      border-top:2px solid rgba(239,68,68,.45);
    }

    .summary-box.total-box {
      border-top:2px solid rgba(212,175,55,.38);
    }

    .summary-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:8px;
    }

    .summary-indicator {
      width:12px;
      height:12px;
      border-radius:999px;
      display:inline-block;
      box-shadow:0 0 14px currentColor;
      background:currentColor;
      flex:0 0 auto;
    }

    .summary-indicator.total { color:var(--gold); }
    .summary-indicator.live { color:var(--live); }
    .summary-indicator.offline { color:var(--red); }

    .summary-box {
      position:relative;
      background:var(--panel-gradient);
      border:1px solid var(--line);
      border-top:2px solid rgba(212,175,55,.38);
      border-radius:16px;
      padding:16px;
      overflow:hidden;
    }

    .summary-link {
      display:block;
      color:inherit;
      text-decoration:none;
    }

    .summary-box.clickable {
      cursor:pointer;
      transition:transform .12s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .summary-box.clickable:hover {
      transform:translateY(-1px);
      border-color:rgba(var(--accent-rgb), .42);
    }

    .summary-label {
      color:var(--text-soft);
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.08em;
    }

    .summary-value {
      font-size:34px;
      font-weight:800;
      line-height:1.05;
      margin-top:8px;
    }

    .group-card {
      position:relative;
      background:var(--panel-gradient-2);
      border:1px solid var(--line);
      border-radius:20px;
      margin-bottom:18px;
      overflow:visible;
    }

    .group-header {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      padding:16px 18px;
      background:linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 92%, white 8%), var(--panel));
      border-bottom:1px solid var(--line);
      cursor:pointer;
      user-select:none;
    }

    .group-header-left {
      display:flex;
      align-items:center;
      gap:12px;
    }

    .group-toggle {
      width:28px;
      height:28px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:1px solid var(--line-soft);
      background:rgba(255,255,255,.03);
      color:var(--text-soft);
      font-size:14px;
      font-weight:800;
      flex:0 0 auto;
    }

    .group-card.collapsed .group-toggle {
      transform:rotate(-90deg);
    }

    .group-body {
      display:block;
      overflow:visible;
    }

    .group-card.collapsed .group-body {
      display:none;
    }

    .group-title {
      font-size:22px;
      font-weight:800;
      letter-spacing:.2px;
    }

    .group-count {
      color:var(--muted);
      font-size:13px;
      margin-top:4px;
    }

    /* WEBDESK_GROUP_PROFIT_CSS_MARKER */
    .wd-group-meta {
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:5px;
      margin-top:4px;
    }

    .wd-group-profit {
      color:var(--text-soft);
    }

    .wd-group-profit strong {
      color:var(--text);
      font-weight:800;
    }

    .wd-group-profit-separator,
    .wd-group-profit-currency-separator,
    .wd-group-profit-coverage {
      color:var(--muted);
    }

    .wd-group-profit-coverage {
      font-size:11px;
    }

    table {
      width:100%;
      border-collapse:separate;
      border-spacing:0;
    }

    .desktop-table { width:100%; }
    .mobile-cards { display:none; }

    th, td {
      padding:14px 12px;
      border-bottom:1px solid rgba(36,53,82,.88);
      text-align:left;
      font-size:14px;
      vertical-align:middle;
    }

    th {
      position:sticky;
      top:0;
      z-index:2;
      background:rgba(10,18,33,.95);
      color:var(--text-soft);
      white-space:nowrap;
      text-transform:uppercase;
      letter-spacing:.08em;
      font-size:11px;
      font-weight:800;
    }

    th a.sort-link {
      color:var(--text-soft);
      text-decoration:none;
    }

    th a.sort-link:hover {
      color:#fff;
    }

    tr:hover td {
      background:rgba(255,255,255,.018);
    }

    .status {
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-weight:800;
      letter-spacing:.02em;
      white-space:nowrap;
      line-height:1;
    }

    .status:before {
      content:"";
      width:10px;
      height:10px;
      border-radius:999px;
      display:inline-block;
      box-shadow:0 0 16px currentColor;
      background:currentColor;
    }

    .online { color:var(--green); }
    .offline { color:var(--red); }

    .tag {
      display:inline-flex;
      align-items:center;
      font-size:12px;
      font-weight:700;
      color:#dbe7ff;
      background:rgba(91,140,255,.08);
      border:1px solid rgba(91,140,255,.18);
      border-radius:999px;
      padding:4px 9px;
      margin-right:6px;
      margin-bottom:6px;
      white-space:nowrap;
    }

    .notes-inline {
      color:#dde7f7;
      max-width:240px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }


    .table-graph-cell {
      min-width: 150px;
    }

    .table-mini-graph {
      display:flex;
      align-items:center;
      gap:10px;
      min-width:132px;
    }

    .table-mini-track {
      position:relative;
      flex:1 1 auto;
      min-width:88px;
      height:8px;
      border-radius:999px;
      overflow:hidden;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
    }

    .table-mini-track span {
      display:block;
      height:100%;
      width:0;
      border-radius:999px;
      box-shadow:0 0 14px rgba(255,255,255,.08);
    }

    .table-mini-track.cpu span {
      background:linear-gradient(90deg, rgba(34,197,94,.95), rgba(245,158,11,.95), rgba(239,68,68,.98));
    }

    .table-mini-track.ram span {
      background:linear-gradient(90deg, rgba(212,175,55,.88), rgba(255,255,255,.82));
    }

    .table-mini-track.disk span {
      background:linear-gradient(90deg, rgba(91,140,255,.88), rgba(255,255,255,.82));
    }

    .table-mini-value {
      min-width:38px;
      text-align:right;
      color:var(--text-soft);
      font-size:12px;
      font-weight:800;
      letter-spacing:.02em;
      white-space:nowrap;
    }

    .cpu-hot {
      color:var(--red);
      font-weight:800;
      text-shadow:0 0 12px rgba(239,68,68,.28);
    }


    .graph-tooltip-wrap {
      position:relative;
      display:inline-block;
      width:100%;
      isolation:isolate;
    }

    .graph-tooltip-wrap:hover,
    .graph-tooltip-wrap:focus-within {
      z-index:30;
    }

    .history-popover {
      position:fixed;
      left:0;
      top:0;
      min-width:280px;
      max-width:320px;
      padding:14px;
      border-radius:16px;
      border:1px solid var(--line-soft);
      background:linear-gradient(180deg, rgba(12,12,16,.98), rgba(8,8,10,.99));
      box-shadow:0 18px 40px rgba(0,0,0,.42);
      z-index:99999;
      opacity:0;
      visibility:hidden;
      transform:translateY(6px);
      pointer-events:none;
      transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
      backdrop-filter:blur(12px);
    }

    .history-popover.is-open {
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }

    .history-popover::before {
      content:"";
      position:absolute;
      left:var(--history-arrow-left, 28px);
      top:-7px;
      width:12px;
      height:12px;
      transform:rotate(45deg);
      border-left:1px solid var(--line-soft);
      border-top:1px solid var(--line-soft);
      background:rgba(11,11,14,.98);
    }

    .history-popover.place-above::before {
      top:auto;
      bottom:-7px;
      border-left:none;
      border-top:none;
      border-right:1px solid var(--line-soft);
      border-bottom:1px solid var(--line-soft);
    }

    .history-title {
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:var(--text-soft);
      margin-bottom:6px;
    }

    .history-subtitle {
      font-size:11px;
      color:var(--muted);
      margin-bottom:10px;
      line-height:1.35;
      word-break:break-word;
    }

    .history-stats {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:8px;
      margin-bottom:10px;
    }

    .history-stat {
      padding:8px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.03);
    }

    .history-stat-label {
      font-size:10px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:4px;
    }

    .history-stat-value {
      font-size:14px;
      font-weight:800;
      color:var(--text);
    }

    .history-bars {
      display:flex;
      align-items:flex-end;
      gap:4px;
      height:74px;
      padding:10px 8px 6px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.05);
      background:rgba(255,255,255,.025);
      margin-bottom:10px;
    }

    .history-bar {
      flex:1 1 0;
      min-width:7px;
      border-radius:8px 8px 4px 4px;
      background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.42));
      opacity:.95;
    }

    .history-bar.cpu {
      background:linear-gradient(180deg, rgba(239,68,68,.96), rgba(245,158,11,.82));
    }

    .history-bar.ram {
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(212,175,55,.78));
    }

    .history-bar.disk {
      background:linear-gradient(180deg, rgba(91,140,255,.96), rgba(255,255,255,.72));
    }

    .history-footer {
      font-size:11px;
      color:var(--muted);
    }



    .desktop-table,
    .desktop-table tbody,
    .desktop-table tr,
    .desktop-table td {
      overflow:visible;
    }

    .actions {
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }

    .edit-row td {
      background:#0d1729;
      padding:0;
    }

    .edit-panel {
      padding:18px;
    }

    .edit-grid {
      display:grid;
      grid-template-columns:220px 220px 1fr;
      gap:10px;
      margin-bottom:10px;
    }

    .edit-grid-full {
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
    }

    .meta-form input,
    .meta-form select,
    .meta-form textarea {
      width:100%;
    }

    .hidden { display:none; }

    .device-card {
      background:var(--panel-gradient-2);
      border:1px solid var(--line);
      border-radius:16px;
      padding:15px;
      margin-bottom:12px;
      position:relative;
      overflow:hidden;
    }

    .device-card:before {
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      top:0;
      height:1px;
      background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.16), rgba(255,255,255,0));
    }

    .device-card-glow {
      position:absolute;
      inset:-1px;
      pointer-events:none;
      border-radius:inherit;
      background:
        radial-gradient(circle at top right, rgba(var(--accent-rgb), .14), transparent 34%),
        radial-gradient(circle at bottom left, rgba(255,255,255,.04), transparent 26%);
      opacity:.8;
    }

    .device-card-top {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
      margin-bottom:12px;
    }

    .device-card-title {
      font-size:18px;
      font-weight:800;
      letter-spacing:.1px;
    }

    .device-card-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px 12px;
      margin-bottom:12px;
    }

    .device-field { min-width:0; }
    .device-label {
      color:var(--muted);
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.08em;
      margin-bottom:3px;
    }
    .device-value {
      font-size:14px;
      color:var(--text);
      word-break:break-word;
    }

    .device-tags { margin-top:6px; margin-bottom:10px; }

    .mobile-edit-panel {
      margin-top:12px;
      padding-top:12px;
      border-top:1px solid var(--line);
    }

    .mobile-edit-grid {
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
    }

    .device-card-headline {
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .device-avatar {
      width:44px;
      height:44px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:13px;
      font-weight:800;
      color:var(--text-soft);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.18);
      flex:0 0 auto;
    }

    .device-subtitle {
      color:var(--muted);
      font-size:12px;
      margin-top:4px;
      letter-spacing:.02em;
    }

    .mini-metrics {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
      margin:0 0 12px;
    }

    .mini-chart-card {
      border:1px solid rgba(255,255,255,.08);
      border-radius:18px;
      padding:12px;
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }

    .mini-chart-top {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:8px;
      margin-bottom:8px;
    }

    .mini-chart-label {
      color:var(--text-soft);
      font-size:11px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.1em;
    }

    .mini-chart-value {
      font-size:18px;
      font-weight:800;
      line-height:1;
    }

    .mini-chart-sub {
      color:var(--muted);
      font-size:11px;
      margin-top:4px;
    }

    .mini-chart-svg {
      width:100%;
      height:58px;
      display:block;
      filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));
    }

    .mini-chart-track {
      fill:rgba(255,255,255,.04);
      stroke:rgba(255,255,255,.06);
      stroke-width:1;
    }

    .mini-chart-fill {
      fill:rgba(var(--accent-rgb), .72);
    }

    .mini-chart-fill.cpu {
      fill:rgba(239,68,68,.82);
    }

    .mini-chart-fill.ram {
      fill:rgba(var(--accent-rgb), .78);
    }

    .mini-chart-fill.disk {
      fill:rgba(91,140,255,.82);
    }

    .mini-progress {
      height:6px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      overflow:hidden;
      margin-top:8px;
      border:1px solid rgba(255,255,255,.04);
    }

    .mini-progress > span {
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(var(--accent-rgb), .86), rgba(255,255,255,.92));
      box-shadow:0 0 16px rgba(var(--accent-rgb), .32);
    }

    .mini-chart-card.cpu .mini-progress > span {
      background:linear-gradient(90deg, rgba(239,68,68,.84), rgba(255,255,255,.88));
      box-shadow:0 0 16px rgba(239,68,68,.24);
    }

    .mini-chart-card.disk .mini-progress > span {
      background:linear-gradient(90deg, rgba(91,140,255,.84), rgba(255,255,255,.88));
      box-shadow:0 0 16px rgba(91,140,255,.24);
    }

    @media (min-width: 769px) {
      .topbar { align-items:center; }
      .toolbar > form:first-child input[type="text"] { width:200px; min-width:200px; }
      .toolbar > form:first-child select[name="site"] { width:145px; min-width:145px; }
      .toolbar > form:first-child select[name="state"] { width:120px; min-width:120px; }
      .toolbar > form:first-child select[name="sort"] { width:138px; min-width:138px; }
      .toolbar > form:first-child .site-inline-wrap { flex-wrap:nowrap; }
      .toolbar > form:first-child .btn { padding:9px 11px; }
      .toolbar, .toolbar form { overflow:visible; }
    }

    body[data-theme="black"] .page-loader {
      background:linear-gradient(180deg, rgba(3,3,3,.98), rgba(9,9,9,.99));
    }
    body[data-theme="black"] .loader-box,
    body[data-theme="black"] .toolbar form,
    body[data-theme="black"] .auth-box,
    body[data-theme="black"] .notice,
    body[data-theme="black"] .theme-box {
      background:linear-gradient(180deg, rgba(14,14,16,.96), rgba(8,8,10,.98));
    }
    body[data-theme="black"] input,
    body[data-theme="black"] select,
    body[data-theme="black"] textarea {
      background:rgba(6,6,8,.96);
    }
    body[data-theme="black"] .btn,
    body[data-theme="black"] button {
      background:linear-gradient(180deg, rgba(20,20,22,.98), rgba(10,10,12,.98));
    }
    body[data-theme="black"] .btn-primary {
      border-color:rgba(212,175,55,.55);
      background:linear-gradient(180deg, rgba(212,175,55,.12), rgba(12,12,14,.98));
      color:#f6e7bc;
    }
    body[data-theme="black"] .btn-edit {
      border-color:rgba(255,255,255,.16);
    }
    body[data-theme="black"] .btn:hover,
    body[data-theme="black"] button:hover,
    body[data-theme="black"] .summary-box.clickable:hover {
      border-color:rgba(212,175,55,.38);
    }
    body[data-theme="black"] th {
      background:rgba(6,6,8,.96);
    }

    @media (max-width: 1200px) {
      table { display:block; overflow-x:auto; }
      .edit-grid { grid-template-columns:1fr; }
    }

    @media (max-width: 768px) {
      .history-popover {
        min-width:260px;
        max-width:min(320px, calc(100vw - 20px));
      }

      .history-popover::before {
        left:20px;
      }


      body {
        padding:10px;
        overflow-x:hidden;
      }
      .panel { padding:12px; border-radius:18px; }
      .group-card { border-radius:20px; }
      .group-header { padding:14px 14px 12px; }
      .group-title { font-size:20px; }
      .summary-box { padding:16px; border-radius:18px; }
      .summary-value { font-size:30px; }

      .topbar {
        gap:12px;
        flex-wrap:wrap;
        align-items:center;
        justify-content:center;
      }
      .title-wrap {
        min-width:0;
        width:100%;
        align-items:center;
        text-align:center;
      }
      .brand-wrap {
        width:100%;
        justify-content:center;
      }
      .brand-logo {
        width:min(340px, 78vw);
        max-width:100%;
        height:auto;
        margin:0 auto;
      }
      .brand-logo-fallback {
        width:100%;
        text-align:center;
      }
      .title-wrap h1 { font-size:26px; }

      .toolbar {
        width:100%;
        align-items:stretch;
        justify-content:stretch;
        gap:10px;
        flex-wrap:wrap;
        flex-direction:column;
      }
      .toolbar > * {
        width:100%;
        max-width:100%;
      }
      .toolbar form,
      .auth-box,
      .theme-box {
        width:100%;
        max-width:100%;
      }
      .toolbar form {
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        padding:12px;
        border-radius:22px;
      }
      .theme-box {
        display:grid;
        grid-template-columns:110px minmax(0,1fr);
        align-items:center;
        gap:10px;
        padding:12px 14px;
        border-radius:22px;
        white-space:normal;
      }
      .theme-label {
        font-size:12px;
      }
      .theme-select {
        min-width:0;
        width:100%;
      }
      .auth-box {
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        gap:10px;
        padding:12px 14px;
        border-radius:22px;
      }
      .auth-status {
        min-width:0;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .toolbar input,
      .toolbar select,
      .toolbar button,
      .toolbar .btn {
        width:100%;
        min-height:48px;
      }
      .site-inline-wrap {
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
      }
      .site-inline-wrap select {
        grid-column:auto;
      }
      .panel > div[style*="display:flex"] {
        display:block !important;
      }
      .summary-grid {
        grid-template-columns:1fr;
        gap:10px;
      }
      .group-header {
        flex-direction:column;
        align-items:flex-start;
      }
      .desktop-table { display:none; }
      .mobile-cards { display:block; }
      .actions { gap:8px; }
      .btn, button {
        flex:1 1 calc(50% - 6px);
        text-align:center;
        min-height:46px;
        border-radius:14px;
      }
      .device-card {
        border-radius:28px;
        padding:18px;
        background:linear-gradient(180deg, rgba(28,28,34,.88), rgba(10,10,14,.96));
        box-shadow:0 18px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
        backdrop-filter:blur(22px) saturate(140%);
      }
      .device-card-top {
        align-items:center;
        margin-bottom:14px;
      }
      .device-card-title {
        font-size:20px;
        line-height:1.15;
        letter-spacing:-.02em;
      }
      .device-card-grid {
        grid-template-columns:1fr 1fr;
        gap:10px 12px;
      }
      .device-field {
        padding:12px 13px;
        border:1px solid rgba(255,255,255,.07);
        border-radius:18px;
        background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
        box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
      }
      .mini-metrics {
        grid-template-columns:1fr;
      }
      .mini-chart-card {
        border-radius:20px;
        padding:14px;
        background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      }
      .device-tags {
        margin-top:10px;
        margin-bottom:12px;
      }
      .mobile-edit-panel {
        margin-top:14px;
        padding-top:14px;
      }
      .mobile-edit-grid textarea {
        min-height:110px;
      }
    }

    @media (max-width: 480px) {
      body { padding:8px; }
      .summary-grid { grid-template-columns:1fr; }
      .device-card-grid { grid-template-columns:1fr; }
      .title-wrap h1 { font-size:24px; }
      .brand-logo { width:min(290px, 82vw); }
      .theme-box, .toolbar form, .auth-box { border-radius:20px; }
      .theme-box, .auth-box { grid-template-columns:1fr; }
      .site-inline-wrap { grid-template-columns:1fr; }
      .btn, button { flex:1 1 100%; }
      .actions { flex-direction:column; }
      .group-header-left {
        width:100%;
        align-items:flex-start;
      }
      .group-header .small:last-child {
        width:100%;
        text-align:left;
      }
    }
  
    /* ==========================================================
       WEBDESK UI V2 — desktop, Mac, Windows and mobile
       ========================================================== */

    body {
      padding:18px;
    }

    .wd-header {
      position:relative;
      z-index:20;
      margin-bottom:18px;
    }

    .wd-header-main {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      min-width:0;
      margin-bottom:12px;
    }

    .wd-brand {
      display:flex;
      align-items:center;
      min-width:180px;
      flex:0 0 auto;
    }

    .wd-brand .brand-logo {
      width:190px;
      max-width:190px;
    }

    .wd-header-tools {
      display:flex;
      justify-content:flex-end;
      align-items:center;
      flex-wrap:wrap;
      gap:10px;
      min-width:0;
    }

    .wd-control,
    .wd-user-box,
    .wd-login-box {
      display:flex;
      align-items:center;
      gap:9px;
      min-height:46px;
      padding:7px 9px;
      border:1px solid var(--line);
      border-radius:15px;
      background:color-mix(in srgb, var(--panel) 92%, black 8%);
      box-shadow:var(--shadow-soft);
    }

    .wd-control-label {
      font-size:10px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.12em;
      color:var(--muted);
      white-space:nowrap;
    }

    .wd-control select {
      min-width:116px;
      height:34px;
      padding:6px 10px;
    }

    .wd-user-dot {
      width:9px;
      height:9px;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 14px var(--green);
    }

    .wd-user-text {
      color:var(--text-soft);
      font-size:12px;
      font-weight:800;
      white-space:nowrap;
    }

    .wd-user-box button {
      min-height:34px;
      padding:7px 11px;
    }

    .wd-login-box input {
      min-width:145px;
    }

    .wd-filterbar {
      display:grid;
      grid-template-columns:minmax(230px,1.8fr) minmax(125px,.65fr) auto minmax(110px,.55fr) minmax(120px,.6fr) auto;
      align-items:center;
      gap:9px;
      width:100%;
      padding:10px;
      border:1px solid var(--line);
      border-radius:18px;
      background:color-mix(in srgb, var(--panel) 92%, black 8%);
      box-shadow:var(--shadow);
      backdrop-filter:blur(14px);
    }

    .wd-filterbar > input,
    .wd-filterbar > select,
    .wd-filterbar > button,
    .wd-filterbar .wd-search-wrap {
      min-width:0;
      width:100%;
    }

    .wd-search-wrap {
      position:relative;
    }

    .wd-search-wrap input {
      width:100%;
      min-height:42px;
      padding-left:38px;
    }

    .wd-search-icon {
      position:absolute;
      left:13px;
      top:50%;
      transform:translateY(-50%);
      z-index:2;
      color:var(--muted);
      pointer-events:none;
    }

    .wd-filterbar select,
    .wd-apply {
      min-height:42px;
    }

    .wd-site-actions {
      display:flex;
      align-items:center;
      gap:7px;
      flex-wrap:nowrap;
      min-width:0;
    }

    .wd-site-actions .btn {
      min-height:42px;
      padding:9px 11px;
      white-space:nowrap;
    }

    .wd-apply {
      border-color:rgba(var(--accent-rgb),.6);
      background:linear-gradient(180deg,rgba(var(--accent-rgb),.18),color-mix(in srgb,var(--panel) 90%,black 10%));
    }

    .summary-grid {
      gap:14px;
      margin-bottom:20px;
    }

    .summary-box {
      min-height:118px;
      padding:18px 20px;
      border-radius:20px;
      background:
        radial-gradient(circle at 90% 10%,rgba(var(--accent-rgb),.10),transparent 32%),
        var(--panel-gradient);
    }

    .summary-value {
      font-size:38px;
      letter-spacing:-.04em;
    }

    .group-card {
      border-radius:22px;
      margin-bottom:18px;
      overflow:hidden;
    }

    .group-header {
      padding:17px 18px;
      cursor:pointer;
    }

    .group-title {
      font-size:21px;
    }

    .group-body {
      overflow-x:auto;
      overscroll-behavior-inline:contain;
    }

    .desktop-table {
      display:table;
      width:100%;
      min-width:1510px;
      table-layout:auto;
    }

    .desktop-table th,
    .desktop-table td {
      padding:14px 11px;
      white-space:nowrap;
    }

    .desktop-table th {
      top:0;
      background:color-mix(in srgb,var(--panel) 96%,black 4%);
      font-size:10px;
      letter-spacing:.105em;
    }

    .desktop-table tbody tr {
      transition:background .16s ease;
    }

    .desktop-table tbody tr:hover td {
      background:rgba(var(--accent-rgb),.035);
    }

    .desktop-table th:nth-child(1) { min-width:106px; }
    .desktop-table th:nth-child(2) { min-width:125px; }
    .desktop-table th:nth-child(3) { min-width:126px; }
    .desktop-table th:nth-child(4) { min-width:120px; }
    .desktop-table th:nth-child(5) { min-width:72px; }
    .desktop-table th:nth-child(6) { min-width:165px; }
    .desktop-table th:nth-child(7),
    .desktop-table th:nth-child(8),
    .desktop-table th:nth-child(9) { min-width:150px; }
    .desktop-table th:nth-child(10) { min-width:100px; }
    .desktop-table th:nth-child(11) { min-width:130px; }
    .desktop-table th:nth-child(12) { min-width:120px; }
    .desktop-table th:nth-child(13) { min-width:360px; }

    .version-cell {
      color:var(--text-soft);
      font-size:12px;
      max-width:190px;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .table-graph-cell {
      min-width:145px;
    }

    .table-mini-graph {
      gap:9px;
      min-width:135px;
    }

    .table-mini-track {
      height:9px;
      min-width:92px;
      background:rgba(255,255,255,.055);
    }

    .table-mini-value {
      min-width:34px;
      font-size:11px;
    }

    .table-mini-track.cpu span {
      background:linear-gradient(90deg,#22c55e 0%,#eab308 58%,#ef4444 100%);
    }

    .table-mini-track.ram span {
      background:linear-gradient(90deg,var(--accent),#f5f5f4);
    }

    .table-mini-track.disk span {
      background:linear-gradient(90deg,#5b8cff,#e8eef8);
    }

    .actions {
      flex-wrap:nowrap;
      align-items:center;
      min-width:max-content;
    }

    .actions .btn {
      min-height:40px;
      padding:8px 11px;
      white-space:nowrap;
    }

    .mobile-cards {
      display:none;
    }

    @media (max-width: 1550px) and (min-width: 769px) {
      body {
        padding:14px;
      }

      .wd-header-main {
        align-items:flex-start;
      }

      .wd-brand .brand-logo {
        width:165px;
        max-width:165px;
      }

      .wd-filterbar {
        grid-template-columns:minmax(200px,1.4fr) minmax(120px,.55fr) auto minmax(105px,.5fr) minmax(112px,.55fr) auto;
        gap:7px;
      }

      .wd-site-actions {
        gap:5px;
      }

      .wd-site-actions .btn,
      .wd-filterbar button {
        padding:8px 9px;
        font-size:12px;
      }
    }

    @media (max-width: 1240px) and (min-width: 769px) {
      .wd-header-main {
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
      }

      .wd-header-tools {
        justify-content:flex-start;
      }

      .wd-filterbar {
        grid-template-columns:minmax(220px,1fr) minmax(130px,.55fr) minmax(110px,.48fr) minmax(120px,.52fr) auto;
      }

      .wd-site-actions {
        grid-column:1 / -1;
        grid-row:2;
        justify-content:flex-start;
      }

      .wd-filterbar > select[name="state"] {
        grid-column:3;
        grid-row:1;
      }

      .wd-filterbar > select[name="sort"] {
        grid-column:4;
        grid-row:1;
      }

      .wd-apply {
        grid-column:5;
        grid-row:1;
      }
    }

    @media (max-width: 768px) {
      body {
        padding:9px;
      }

      .wd-header-main,
      .wd-header-tools,
      .wd-filterbar {
        display:grid;
        grid-template-columns:1fr;
        width:100%;
      }

      .wd-brand {
        justify-content:center;
      }

      .wd-brand .brand-logo {
        width:min(300px,76vw);
        max-width:100%;
      }

      .wd-header-tools {
        gap:9px;
      }

      .wd-control,
      .wd-user-box,
      .wd-login-box {
        width:100%;
        display:grid;
        grid-template-columns:110px minmax(0,1fr);
      }

      .wd-user-box {
        grid-template-columns:auto 1fr auto;
      }

      .wd-login-box {
        grid-template-columns:1fr;
      }

      .wd-control select,
      .wd-user-box button,
      .wd-login-box input,
      .wd-login-box button {
        width:100%;
        min-width:0;
        min-height:44px;
      }

      .wd-filterbar {
        padding:12px;
        border-radius:22px;
        gap:10px;
      }

      .wd-site-actions {
        display:grid;
        grid-template-columns:1fr;
        width:100%;
      }

      .wd-filterbar input,
      .wd-filterbar select,
      .wd-filterbar button,
      .wd-filterbar .btn {
        width:100%;
        min-height:48px;
      }

      .summary-grid {
        grid-template-columns:1fr;
      }

      .desktop-table {
        display:none;
      }

      .mobile-cards {
        display:block;
      }

      .device-card {
        padding:17px;
        border-radius:24px;
      }

      .device-card-grid {
        grid-template-columns:1fr 1fr;
      }

      .actions {
        display:grid;
        grid-template-columns:1fr 1fr;
        min-width:0;
      }

      .actions .btn {
        width:100%;
        min-width:0;
      }
    }

    @media (max-width: 480px) {
      .device-card-grid,
      .actions {
        grid-template-columns:1fr;
      }
    }


    /* ===== Desktop single-row compact table (no horizontal slider) ===== */
    @media (min-width: 1100px) {
      .group-body {
        overflow-x: hidden !important;
      }

      .desktop-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
      }

      .desktop-table th,
      .desktop-table td {
        padding: 12px 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }

      .desktop-table th:nth-child(1),
      .desktop-table td:nth-child(1) { width: 7%; }

      .desktop-table th:nth-child(2),
      .desktop-table td:nth-child(2) { width: 9%; }

      .desktop-table th:nth-child(3),
      .desktop-table td:nth-child(3) { width: 9%; }

      .desktop-table th:nth-child(4),
      .desktop-table td:nth-child(4) { width: 8%; }

      .desktop-table th:nth-child(5),
      .desktop-table td:nth-child(5) { width: 10%; }

      .desktop-table th:nth-child(6),
      .desktop-table td:nth-child(6) { width: 10%; }

      .desktop-table th:nth-child(7),
      .desktop-table td:nth-child(7) { width: 10%; }

      .desktop-table th:nth-child(8),
      .desktop-table td:nth-child(8) { width: 8%; }

      .desktop-table th:nth-child(9),
      .desktop-table td:nth-child(9) { width: 8%; }

      .desktop-table th:nth-child(10),
      .desktop-table td:nth-child(10) { width: 21%; }

      .table-graph-cell {
        min-width: 0 !important;
      }

      .table-mini-graph {
        min-width: 0 !important;
        gap: 6px !important;
      }

      .table-mini-track {
        min-width: 0 !important;
        width: 100% !important;
      }

      .table-mini-value {
        min-width: 28px !important;
        font-size: 10px !important;
      }

      .version-cell {
        max-width: none !important;
        font-size: 11px !important;
      }

      .actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        min-width: 0 !important;
        width: 100% !important;
      }

      .actions .btn,
      .actions button {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 7px 8px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
        white-space: nowrap !important;
      }

      .actions .btn-rocket {
        padding-left: 7px !important;
        padding-right: 7px !important;
      }

      .actions .btn-icon {
        width: 13px !important;
        height: 13px !important;
      }

      .tag {
        font-size: 10px !important;
        padding: 3px 7px !important;
        margin-right: 3px !important;
        margin-bottom: 3px !important;
      }
    }

    @media (min-width: 1100px) and (max-width: 1450px) {
      .desktop-table th,
      .desktop-table td {
        padding-left: 6px !important;
        padding-right: 6px !important;
        font-size: 12px !important;
      }

      .desktop-table th {
        font-size: 9px !important;
      }

      .actions {
        gap: 4px !important;
      }

      .actions .btn,
      .actions button {
        padding: 6px 7px !important;
        font-size: 10px !important;
      }
    }


    /* Actions visibility fix after removing Notes/OS/Alias */
    @media (min-width: 1100px) {
      .desktop-table th:nth-child(10),
      .desktop-table td:nth-child(10) {
        width: 24% !important;
        overflow: visible !important;
        text-overflow: clip !important;
      }

      .desktop-table td:nth-child(10) {
        padding-right: 10px !important;
      }

      .actions {
        justify-content: flex-start !important;
        overflow: visible !important;
      }
    }


    /* Full product version visibility */
    @media (min-width: 1100px) {
      .desktop-table th:nth-child(4),
      .desktop-table td:nth-child(4) {
        width: 13% !important;
        min-width: 185px !important;
        max-width: none !important;
      }

      .version-cell {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        color: var(--text) !important;
      }

      .desktop-table th:nth-child(5),
      .desktop-table td:nth-child(5),
      .desktop-table th:nth-child(6),
      .desktop-table td:nth-child(6),
      .desktop-table th:nth-child(7),
      .desktop-table td:nth-child(7) {
        width: 9% !important;
      }

      .desktop-table th:nth-child(10),
      .desktop-table td:nth-child(10) {
        width: 22% !important;
      }
    }


    /* Full tags visibility without breaking row layout */
    @media (min-width: 1100px) {
      .desktop-table th:nth-child(9),
      .desktop-table td:nth-child(9) {
        width: 12% !important;
        min-width: 190px !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
      }

      .desktop-table td:nth-child(9) {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
      }

      .desktop-table td:nth-child(9) .tag {
        display: inline-flex !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        margin-right: 5px !important;
        margin-bottom: 5px !important;
      }

      .desktop-table th:nth-child(10),
      .desktop-table td:nth-child(10) {
        width: 23% !important;
      }
    }


    /* Depot column + final 11-column desktop layout */
    .depot-cell {
      color: var(--text-soft);
      font-size: 12px;
      white-space: nowrap;
    }

    @media (min-width: 1100px) {
      .desktop-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
      }

      .desktop-table th:nth-child(1),
      .desktop-table td:nth-child(1) { width: 6% !important; }

      .desktop-table th:nth-child(2),
      .desktop-table td:nth-child(2) { width: 8% !important; }

      .desktop-table th:nth-child(3),
      .desktop-table td:nth-child(3) { width: 8% !important; }

      .desktop-table th:nth-child(4),
      .desktop-table td:nth-child(4) {
        width: 12% !important;
        min-width: 0 !important;
      }

      .desktop-table th:nth-child(5),
      .desktop-table td:nth-child(5) {
        width: 6% !important;
        min-width: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
      }

      .desktop-table th:nth-child(6),
      .desktop-table td:nth-child(6),
      .desktop-table th:nth-child(7),
      .desktop-table td:nth-child(7),
      .desktop-table th:nth-child(8),
      .desktop-table td:nth-child(8) { width: 8% !important; }

      .desktop-table th:nth-child(9),
      .desktop-table td:nth-child(9) {
        width: 7% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
      }

      .desktop-table th:nth-child(10),
      .desktop-table td:nth-child(10) {
        width: 9% !important;
        min-width: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
      }

      .desktop-table th:nth-child(11),
      .desktop-table td:nth-child(11) {
        width: 20% !important;
        min-width: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
      }

      .desktop-table td:nth-child(10) .tag {
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
      }

      .edit-grid {
        grid-template-columns: 1fr 1fr 1fr 1.35fr !important;
      }
    }

    @media (min-width: 1100px) and (max-width: 1450px) {
      .depot-cell,
      .version-cell {
        font-size: 10px !important;
      }
    }


    /* Compact device table: Depot before Version and reduced column spacing */
    @media (min-width: 1100px) {
      .desktop-table {
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
      }

      .desktop-table th,
      .desktop-table td {
        padding-left: 9px !important;
        padding-right: 9px !important;
      }

      .desktop-table th:nth-child(1),
      .desktop-table td:nth-child(1) { width: 6% !important; }

      .desktop-table th:nth-child(2),
      .desktop-table td:nth-child(2) { width: 8% !important; }

      .desktop-table th:nth-child(3),
      .desktop-table td:nth-child(3) { width: 8% !important; }

      /* Depot */
      .desktop-table th:nth-child(4),
      .desktop-table td:nth-child(4) {
        width: 8% !important;
        min-width: 0 !important;
      }

      /* Version */
      .desktop-table th:nth-child(5),
      .desktop-table td:nth-child(5) {
        width: 11% !important;
        min-width: 0 !important;
      }

      .desktop-table th:nth-child(6),
      .desktop-table td:nth-child(6),
      .desktop-table th:nth-child(7),
      .desktop-table td:nth-child(7),
      .desktop-table th:nth-child(8),
      .desktop-table td:nth-child(8) {
        width: 8% !important;
      }

      .desktop-table th:nth-child(9),
      .desktop-table td:nth-child(9) { width: 7% !important; }

      .desktop-table th:nth-child(10),
      .desktop-table td:nth-child(10) { width: 9% !important; }

      .desktop-table th:nth-child(11),
      .desktop-table td:nth-child(11) { width: 19% !important; }

      .depot-cell,
      .version-cell {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
      }

      .desktop-table td:nth-child(11) .actions,
      .desktop-table td:nth-child(11) .action-buttons {
        gap: 5px !important;
      }
    }

    @media (min-width: 1100px) and (max-width: 1450px) {
      .desktop-table th,
      .desktop-table td {
        padding-left: 6px !important;
        padding-right: 6px !important;
      }

      .depot-cell,
      .version-cell {
        font-size: 10px !important;
      }
    }


    /* Mouse-resizable desktop columns */
    @media (min-width: 1100px) {
      .desktop-table th {
        position: relative !important;
        user-select: none;
      }

      .desktop-table .column-resizer {
        position: absolute;
        top: 0;
        right: -4px;
        width: 9px;
        height: 100%;
        cursor: col-resize;
        z-index: 20;
        touch-action: none;
      }

      .desktop-table .column-resizer::after {
        content: "";
        position: absolute;
        top: 22%;
        bottom: 22%;
        left: 4px;
        width: 1px;
        background: transparent;
        transition: background .15s ease, box-shadow .15s ease;
      }

      .desktop-table th:hover .column-resizer::after,
      .desktop-table .column-resizer.active::after {
        background: rgba(214, 178, 76, .85);
        box-shadow: 0 0 7px rgba(214, 178, 76, .42);
      }

      body.column-resizing {
        cursor: col-resize !important;
        user-select: none !important;
      }

      body.column-resizing * {
        cursor: col-resize !important;
      }
    }


    /* Settings and backup history */
    .settings-modal {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .settings-modal.hidden { display: none; }
    .settings-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.72);
      backdrop-filter: blur(8px);
    }
    .settings-dialog {
      position: relative;
      z-index: 1;
      width: min(940px, 96vw);
      max-height: 90vh;
      overflow: auto;
      border: 1px solid var(--line-soft);
      border-radius: 22px;
      background: var(--panel-gradient);
      box-shadow: var(--shadow);
      padding: 22px;
    }
    .settings-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }
    .settings-head h2 { margin: 0 0 6px; }
    .settings-head p { margin: 0; color: var(--muted); }
    .settings-tabs {
      display: flex;
      gap: 8px;
      margin: 22px 0;
      border-bottom: 1px solid var(--line);
      padding-bottom: 12px;
    }
    .settings-tab {
      border: 1px solid var(--line-soft);
      background: transparent;
      color: var(--text-soft);
      border-radius: 10px;
      padding: 9px 14px;
      cursor: pointer;
    }
    .settings-tab.active {
      border-color: var(--accent);
      color: var(--text);
      box-shadow: var(--accent-glow);
    }
    .settings-pane { display: none; }
    .settings-pane.active { display: block; }
    .settings-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .settings-grid label {
      display: grid;
      gap: 8px;
      color: var(--text-soft);
    }
    .settings-grid select,
    .settings-grid input {
      width: 100%;
    }
    .settings-section { margin-top: 22px; }
    .settings-section h3 { margin-bottom: 5px; }
    .settings-section p { color: var(--muted); margin-top: 0; }
    .column-settings-list {
      display: grid;
      gap: 8px;
    }
    .column-setting-item {
      display: grid;
      grid-template-columns: 30px 1fr 110px;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      background: rgba(255,255,255,.025);
      cursor: grab;
    }
    .column-setting-item.dragging { opacity: .45; }
    .column-setting-handle { color: var(--muted); font-size: 18px; }
    .column-setting-width {
      color: var(--muted);
      text-align: right;
      font-size: 12px;
    }
    .settings-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 22px;
    }
    .settings-actions-top {
      justify-content: flex-start;
      margin-top: 0;
      margin-bottom: 16px;
    }
    .backup-history {
      display: grid;
      gap: 9px;
    }
    .backup-row {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr auto;
      gap: 12px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 11px 12px;
    }
    .backup-row small { color: var(--muted); }
    .group-card {
      max-width: var(--webdesk-card-width, 100%);
      margin-left: auto !important;
      margin-right: auto !important;
    }
    @media (max-width: 760px) {
      .settings-grid { grid-template-columns: 1fr; }
      .column-setting-item { grid-template-columns: 26px 1fr; }
      .column-setting-width { display: none; }
      .backup-row { grid-template-columns: 1fr; }
    }


    /* Professional version history */
    .backup-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .backup-toolbar-actions,
    .backup-toolbar-filters,
    .backup-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .backup-toolbar-filters input {
      min-width: 220px;
    }

    .backup-retention-note {
      margin-bottom: 14px;
      color: var(--muted);
      font-size: 12px;
    }

    .backup-history {
      position: relative;
      display: grid;
      gap: 10px;
    }

    .backup-row {
      display: grid !important;
      grid-template-columns: 18px minmax(220px, 1fr) auto !important;
      gap: 13px !important;
      align-items: center !important;
      padding: 14px !important;
      border: 1px solid var(--line) !important;
      border-radius: 14px !important;
      background: rgba(255,255,255,.022);
    }

    .backup-timeline-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: var(--accent-glow);
    }

    .backup-main {
      min-width: 0;
    }

    .backup-title {
      display: block;
      color: var(--text);
      font-weight: 800;
      margin-bottom: 4px;
    }

    .backup-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      color: var(--muted);
      font-size: 12px;
    }

    .backup-details {
      margin-top: 8px;
      color: var(--muted);
      font-size: 11px;
    }

    .backup-details summary {
      cursor: pointer;
      user-select: none;
      color: var(--text-soft);
    }

    .backup-details code {
      display: block;
      margin-top: 7px;
      white-space: normal;
      word-break: break-all;
    }

    .backup-empty {
      padding: 30px 15px;
      text-align: center;
      color: var(--muted);
      border: 1px dashed var(--line);
      border-radius: 14px;
    }

    .backup-diff-modal {
      position: fixed;
      inset: 0;
      z-index: 11000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 22px;
    }

    .backup-diff-modal.hidden {
      display: none;
    }

    .backup-diff-dialog {
      position: relative;
      z-index: 1;
      width: min(1180px, 97vw);
      max-height: 92vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line-soft);
      border-radius: 20px;
      padding: 20px;
      background: var(--panel-gradient);
      box-shadow: var(--shadow);
    }

    .backup-diff-content {
      margin: 18px 0 0;
      padding: 16px;
      overflow: auto;
      min-height: 260px;
      max-height: 72vh;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #07080c;
      color: #d9deea;
      font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      white-space: pre;
      tab-size: 4;
    }

    @media (max-width: 760px) {
      .backup-toolbar,
      .backup-toolbar-actions,
      .backup-toolbar-filters {
        align-items: stretch;
        width: 100%;
      }

      .backup-toolbar-filters input,
      .backup-toolbar-filters select {
        width: 100%;
        min-width: 0;
      }

      .backup-row {
        grid-template-columns: 14px 1fr !important;
      }

      .backup-actions {
        grid-column: 2;
      }
    }


    /* Enhanced backup categories, statistics and Update Center */
    .backup-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(120px, 1fr));
      gap: 10px;
      margin: 14px 0;
    }
    .backup-stat {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      background: rgba(255,255,255,.025);
    }
    .backup-stat small { display:block; color:var(--muted); margin-bottom:4px; }
    .backup-stat strong { color:var(--text); }
    .backup-row[data-category="manual"] .backup-timeline-dot { background:#2dd36f; box-shadow:0 0 10px rgba(45,211,111,.6); }
    .backup-row[data-category="startup"] .backup-timeline-dot { background:#f0c64e; box-shadow:0 0 10px rgba(240,198,78,.6); }
    .backup-row[data-category="restore"] .backup-timeline-dot { background:#4d9dff; box-shadow:0 0 10px rgba(77,157,255,.6); }
    .backup-row[data-category="edit"] .backup-timeline-dot { background:#b779ff; box-shadow:0 0 10px rgba(183,121,255,.6); }
    .backup-row[data-category="delete"] .backup-timeline-dot { background:#ff4d5d; box-shadow:0 0 10px rgba(255,77,93,.6); }
    .backup-protected {
      display:inline-flex;
      align-items:center;
      gap:5px;
      color:var(--muted);
      font-size:11px;
    }
    .backup-action-icon { margin-right:5px; }
    .diff-line { display:block; min-height:1.55em; padding:0 8px; }
    .diff-add { background:rgba(46,160,67,.18); color:#b7f5c6; }
    .diff-remove { background:rgba(248,81,73,.18); color:#ffc0bd; }
    .diff-header { color:#8ab4ff; background:rgba(56,139,253,.10); }
    .diff-context { color:#c9d1d9; }
    .update-center-grid {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }
    .admin-card {
      border:1px solid var(--line);
      border-radius:14px;
      padding:16px;
      background:rgba(255,255,255,.025);
    }
    .admin-card h3 { margin:0 0 6px; }
    .admin-card p { color:var(--muted); margin:0 0 14px; }
    .admin-card-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .admin-output {
      margin-top:16px;
      min-height:150px;
      max-height:330px;
      overflow:auto;
      white-space:pre-wrap;
      border:1px solid var(--line);
      border-radius:12px;
      background:#07080c;
      padding:14px;
      color:#d9deea;
    }
    .compact-list { display:grid; gap:6px; margin-top:12px; }
    .compact-list-row {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      border-top:1px solid var(--line);
      padding-top:8px;
    }
    @media (max-width:760px) {
      .backup-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .update-center-grid { grid-template-columns:1fr; }
    }

.column-setting-item{grid-template-columns:26px minmax(150px,1fr) minmax(260px,1.4fr)!important}
.column-visible-toggle{display:flex;align-items:center;gap:9px}
.column-width-editor{display:grid;grid-template-columns:minmax(120px,1fr) 54px auto;align-items:center;gap:8px}
.btn-small{min-height:30px!important;padding:5px 9px!important;font-size:11px!important}
.column-draggable{cursor:grab;user-select:none}.column-dragging{opacity:.45}.column-drag-target{box-shadow:inset 3px 0 0 var(--accent);background:rgba(234,193,75,.08)!important}
.update-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px;margin-bottom:16px;border:1px solid var(--line);border-radius:16px;background:radial-gradient(circle at 85% 20%,rgba(234,193,75,.14),transparent 30%),rgba(255,255,255,.025)}
.update-hero h3{margin:5px 0 7px;font-size:20px}.update-hero p{margin:0;color:var(--muted);max-width:760px}.update-kicker{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.16em}
.installed-version{min-width:130px;text-align:center;border:1px solid var(--line);border-radius:14px;padding:12px 15px;background:rgba(0,0,0,.18)}.installed-version small,.installed-version strong{display:block}.installed-version strong{margin-top:4px;font-size:20px}
.update-install-card{grid-row:span 2}.update-dropzone{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:14px 0;padding:18px;border:1px dashed var(--line-strong);border-radius:14px;background:rgba(255,255,255,.018);cursor:pointer}.update-dropzone:hover,.update-dropzone.drag-over,.update-dropzone.has-file{border-color:var(--accent);background:rgba(234,193,75,.07)}.update-drop-icon{font-size:27px;color:var(--accent)}
.update-version-field{display:grid;gap:6px;margin-bottom:12px}.update-main-button{width:100%;justify-content:center;min-height:44px}.update-progress{margin-top:13px;display:grid;grid-template-columns:18px 1fr;align-items:center;gap:9px}.update-progress.hidden{display:none}.update-progress>span{width:17px;height:17px;border:2px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;animation:update-spin .8s linear infinite}@keyframes update-spin{to{transform:rotate(360deg)}}
.project-backup-row>div:first-child{display:grid;gap:3px;min-width:0}.project-backup-row small{color:var(--muted)}
.update-history-card{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}.update-history-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.update-history-head h3{margin:0}.update-history-head p{margin:4px 0 0;color:var(--muted)}
.update-history-list{display:grid;gap:8px}.update-history-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px 12px;border:1px solid var(--line);border-radius:12px}.update-status-dot{width:9px;height:9px;border-radius:50%;background:#8b949e}.update-history-row[data-status=success] .update-status-dot{background:#2dd36f}.update-history-row[data-status=failed] .update-status-dot{background:#ff4d5d}.update-history-row[data-status=rolled_back] .update-status-dot{background:#4d9dff}.update-history-row small{display:block;color:var(--muted);margin-top:3px}.update-history-row p{margin:5px 0 0;color:var(--text-soft);font-size:12px}.update-status-badge{padding:5px 8px;border:1px solid var(--line);border-radius:999px;font-size:10px;font-weight:800}
@media(max-width:800px){.column-setting-item{grid-template-columns:24px 1fr!important}.column-width-editor{grid-column:2;grid-template-columns:1fr 50px auto}.update-hero{align-items:stretch;flex-direction:column}}


/* v2.4 layout command bar */
.layout-command-bar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin:18px 0;padding:12px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.018)
}
.layout-presets,.layout-history-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.layout-presets>span{color:var(--muted);font-size:12px;font-weight:800;margin-right:2px}
.layout-history-actions .btn:disabled{opacity:.38;cursor:not-allowed}

/* direct column interaction */
.desktop-table thead th.column-draggable{position:relative;padding-right:16px}
.desktop-table thead th.column-draggable:before{
  content:"⋮⋮";position:absolute;left:5px;top:50%;transform:translateY(-50%);
  opacity:0;letter-spacing:-3px;color:var(--muted);transition:.15s
}
.desktop-table thead th.column-draggable:hover:before{opacity:.7}
.column-resizer{z-index:5}

/* visual backup diff */
.diff-stats{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:10px;margin:0 0 12px}
.diff-stat{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.diff-stat small,.diff-stat strong{display:block}.diff-stat small{color:var(--muted);margin-bottom:4px}
.diff-stat-add strong{color:#40d884}.diff-stat-remove strong{color:#ff6674}.diff-stat-change strong{color:#f0c94d}
.diff-view-toolbar{display:flex;gap:8px;margin-bottom:10px}
.diff-view-toolbar .active{border-color:var(--accent);box-shadow:0 0 0 1px rgba(234,193,75,.25)}
.backup-diff-visual{border:1px solid var(--line);border-radius:12px;overflow:auto;max-height:68vh;background:#08090d}
.diff-split-head{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:1fr 1fr;background:#11131a;border-bottom:1px solid var(--line)}
.diff-split-head>div{padding:10px 14px;font-weight:800}.diff-split-head>div+div{border-left:1px solid var(--line)}
.diff-side-row{display:grid;grid-template-columns:1fr 1fr;min-width:1100px}
.diff-side-cell{display:grid;grid-template-columns:54px minmax(0,1fr);min-height:24px;border-bottom:1px solid rgba(255,255,255,.025)}
.diff-side-cell+div{border-left:1px solid var(--line)}
.diff-line-no{padding:4px 8px;text-align:right;color:#687083;background:rgba(255,255,255,.025);user-select:none}
.diff-side-cell code{padding:4px 9px;white-space:pre-wrap;overflow-wrap:anywhere}
.diff-insert .diff-side-cell:last-child,.diff-delete .diff-side-cell:first-child{background:rgba(45,211,111,.09)}
.diff-delete .diff-side-cell:first-child{background:rgba(255,77,93,.10)}
.diff-replace .diff-side-cell{background:rgba(240,201,77,.075)}
.diff-identical{padding:50px;text-align:center;color:var(--muted)}

/* improved update center */
.update-summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 16px}
.update-summary-cards>div{padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.018)}
.update-summary-cards small,.update-summary-cards strong{display:block}.update-summary-cards small{color:var(--muted);margin-bottom:5px}.update-summary-cards strong{font-size:17px}
.update-install-actions{display:grid;grid-template-columns:auto 1fr;gap:9px}
.update-validation-result{display:grid;gap:4px;margin-top:12px;padding:11px 12px;border:1px solid var(--line);border-radius:12px}
.update-validation-result.hidden{display:none}.update-validation-result[data-state=success]{border-color:rgba(45,211,111,.45);background:rgba(45,211,111,.06)}.update-validation-result[data-state=error]{border-color:rgba(255,77,93,.5);background:rgba(255,77,93,.06)}
.update-validation-result span,.update-validation-result p{color:var(--text-soft);margin:0;font-size:12px}
#projectBackupList{margin-top:12px}

@media(max-width:900px){
  .layout-command-bar{align-items:flex-start;flex-direction:column}
  .diff-stats,.update-summary-cards{grid-template-columns:repeat(2,1fr)}
  .update-install-actions{grid-template-columns:1fr}
}


/* Guacamole SSH action */
.btn-ssh {
  border-color: rgba(34, 197, 94, .55);
  background: rgba(34, 197, 94, .14);
  color: #86efac;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 800;
}
.btn-ssh:hover {
  border-color: rgba(34, 197, 94, .9);
  background: rgba(34, 197, 94, .24);
}
.btn-disabled, .btn-disabled:hover {
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(1);
}


/* Tronius local WEB tunnel button */
.btn-web {
  border-color: rgba(20,184,166,.75) !important;
  color: #5eead4 !important;
  background: rgba(13,148,136,.08) !important;
}
.btn-web:hover {
  border-color: #2dd4bf !important;
  background: rgba(13,148,136,.18) !important;
  color: #ccfbf1 !important;
}
.btn-web.btn-disabled { opacity: .42; cursor: not-allowed; }

/* Private Epoptes console through Guacamole VNC */
.btn-epoptes {
  border-color: rgba(168,85,247,.75) !important;
  color: #d8b4fe !important;
  background: rgba(126,34,206,.12) !important;
}
.btn-epoptes:hover {
  border-color: #c084fc !important;
  background: rgba(126,34,206,.24) !important;
  color: #f3e8ff !important;
}
.btn-epoptes.btn-disabled { opacity: .42; cursor: not-allowed; }

/* Compact action buttons that keep their accessible label in title/aria-label. */
.actions .btn.btn-icon-only {
  flex: 0 0 38px !important;
  width: 38px !important;
  min-width: 38px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0 !important;
}
.actions .btn.btn-icon-only .btn-icon {
  width: 17px !important;
  height: 17px !important;
}
.actions .epoptes-btn-icon {
  display: block;
  width: 25px !important;
  height: 25px !important;
  object-fit: contain;
}

/* 2026-08-28: redesigned device action buttons v2.6.5 */
.actions-redesign {
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
  padding-right: 14px;
}

.actions-redesign .btn-action,
.actions-redesign .btn-more {
  min-height: 40px;
  padding: 9px 11px;
  border-radius: 11px;
  white-space: nowrap;
  box-shadow: none;
}

.actions-redesign .btn-action:hover,
.actions-redesign .btn-more:hover {
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
}

.actions-redesign .btn-ssh,
.actions-redesign .btn-epoptes,
.actions-redesign .btn-web,
.actions-redesign .btn-primary,
.actions-redesign .btn-edit {
  background: rgba(255,255,255,.025) !important;
}

.actions-redesign .btn-primary {
  border-color: rgba(212,175,55,.58);
  color: #f7e7a6;
}

.actions-redesign .btn-edit {
  color: var(--text-soft);
}

.actions-redesign .epoptes-btn-icon {
  width: 20px !important;
  height: 20px !important;
}

.action-terminal-icon {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1;
}

.action-globe,
.action-edit-icon,
.action-connect-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
}

.action-connect-dot {
  font-size: 8px;
  color: #d4af37;
}

.action-edit-icon {
  font-size: 15px;
}

.action-more {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.actions-redesign .btn-more {
  width: 44px;
  min-width: 44px;
  padding-left: 0;
  padding-right: 0;
  color: var(--text-soft);
  font-size: 15px;
  letter-spacing: 1px;
  background: rgba(255,255,255,.025);
}

.action-more.open .btn-more {
  border-color: rgba(var(--accent-rgb), .62);
  background: rgba(var(--accent-rgb), .10);
}

/* Menu is portaled to <body> while open so no card/table overflow can clip it. */
.action-menu {
  display: none;
  width: 200px;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2) 96%, white 4%), var(--panel));
  box-shadow: 0 18px 45px rgba(0,0,0,.48);
  backdrop-filter: blur(14px);
}

.action-menu.action-menu-floating {
  display: block;
  position: fixed;
  z-index: 2147483000;
  margin: 0;
}

.action-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.action-menu-item:hover {
  background: rgba(255,255,255,.06);
}

.action-menu-item .btn-icon {
  width: 18px;
  height: 18px;
}

.action-menu-separator {
  height: 1px;
  margin: 5px 4px;
  background: var(--line-soft);
}

.action-menu-danger {
  color: #ffb9c1;
}

.action-menu-danger:hover {
  background: rgba(239,68,68,.12);
  color: #ffd4d9;
}

.action-trash {
  width: 18px;
  text-align: center;
  font-size: 17px;
  line-height: 1;
}

@media (max-width: 1250px) {
  .desktop-table .actions-redesign .btn-action {
    padding-left: 9px;
    padding-right: 9px;
  }
  .actions-redesign { padding-right: 12px; }
}

@media (max-width: 900px) {
  .actions-redesign {
    flex-wrap: nowrap;
    gap: 6px;
    padding-right: 10px;
  }
  .actions-redesign .btn-action {
    flex: 0 0 auto;
  }
}


/* 2026-08-28: v2.6.6 action polish + faster device filtering */
.actions-redesign .btn-more {
  border-color: var(--line-soft) !important;
  background: rgba(255,255,255,.025) !important;
  color: var(--muted) !important;
}
.actions-redesign .btn-more:hover {
  border-color: rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
}
.action-more.open .btn-more {
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
}

.wd-search-wrap input[type="search"] {
  padding-right: 38px;
}
.wd-search-wrap input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.wd-search-clear {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 27px !important;
  min-width: 27px !important;
  height: 27px;
  min-height: 27px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  box-shadow: none !important;
  cursor: pointer;
}
.wd-search-clear.visible { display: inline-flex; align-items:center; justify-content:center; }
.wd-search-clear:hover { background: rgba(255,255,255,.07) !important; color: var(--text); }

.wd-clear-filters {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Keep Apply as a manual fallback; dropdowns and search now auto-apply. */


/* 2026-08-28: v2.6.7 live device search dropdown */
.wd-search-wrap {
  position: relative;
  z-index: 120;
}

.wd-live-search {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px);
  z-index: 10000;
  overflow: hidden;
  max-height: 440px;
  overflow-y: auto;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(17,18,22,.985);
  box-shadow: 0 18px 50px rgba(0,0,0,.46);
  backdrop-filter: blur(14px);
}

.wd-live-search[hidden] {
  display: none !important;
}

.wd-live-result {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.wd-live-result:hover,
.wd-live-result.active {
  background: rgba(255,255,255,.065);
}

.wd-live-main,
.wd-live-meta {
  display: flex;
  align-items: center;
  min-width: 0;
}

.wd-live-main {
  gap: 8px;
  font-weight: 800;
}

.wd-live-meta {
  justify-content: space-between;
  gap: 12px;
  padding-left: 18px;
  color: var(--muted);
  font-size: 11px;
}

.wd-live-meta > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wd-live-id {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.wd-live-status {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #777;
}

.wd-live-status.online {
  background: #31d56f;
  box-shadow: 0 0 10px rgba(49,213,111,.5);
}

.wd-live-status.offline {
  background: #ff4e55;
  box-shadow: 0 0 10px rgba(255,78,85,.35);
}

.wd-live-host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wd-live-alias {
  color: var(--muted);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wd-live-search mark {
  padding: 0;
  border-radius: 2px;
  background: rgba(255,211,77,.18);
  color: inherit;
}

.wd-live-empty {
  padding: 14px 15px;
  color: var(--muted);
  font-size: 12px;
}

.wd-live-footer {
  position: sticky;
  bottom: 0;
  padding: 8px 12px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(13,14,17,.98);
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

@media (max-width: 760px) {
  .wd-live-search {
    max-height: 360px;
  }
  .wd-live-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
}


/* 2026-08-28: v2.6.8 compact live search + jump-to-device */
.wd-live-search {
  max-height: 390px;
}

.wd-live-result {
  min-height: 42px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: minmax(160px, 1.35fr) minmax(110px, .8fr) minmax(180px, 1.35fr) auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 0;
}

.wd-live-main,
.wd-live-meta {
  display: contents;
}

.wd-live-status {
  display: none;
}

.wd-live-host {
  position: relative;
  padding-left: 18px;
  font-size: 12px;
  font-weight: 800;
}

.wd-live-host::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #777;
}

.wd-live-result:has(.wd-live-status.online) .wd-live-host::before {
  background: #31d56f;
  box-shadow: 0 0 9px rgba(49,213,111,.5);
}

.wd-live-result:has(.wd-live-status.offline) .wd-live-host::before {
  background: #ff4e55;
  box-shadow: 0 0 9px rgba(255,78,85,.35);
}

.wd-live-alias {
  display: none;
}

.wd-live-meta {
  padding-left: 0;
  font-size: 10px;
}

.wd-live-meta > span:first-child {
  grid-column: 2 / 4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wd-live-id {
  grid-column: 4;
  justify-self: end;
  font-size: 10px;
}

.wd-live-footer {
  font-size: 10px;
}

.wd-search-jump-highlight {
  animation: wdSearchJumpPulse 2.6s ease-out;
}

@keyframes wdSearchJumpPulse {
  0% {
    outline: 2px solid rgba(255,211,77,.95);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 999px rgba(255,211,77,.10), 0 0 22px rgba(255,211,77,.28);
  }
  55% {
    outline: 1px solid rgba(255,211,77,.48);
    outline-offset: -1px;
    box-shadow: inset 0 0 0 999px rgba(255,211,77,.045), 0 0 10px rgba(255,211,77,.12);
  }
  100% {
    outline: 0 solid transparent;
    box-shadow: none;
  }
}

@media (max-width: 900px) {
  .wd-live-result {
    min-height: 48px;
    grid-template-columns: minmax(150px, 1fr) auto;
    row-gap: 3px;
  }

  .wd-live-host {
    grid-column: 1;
    grid-row: 1;
  }

  .wd-live-meta > span:first-child {
    grid-column: 1;
    grid-row: 2;
    padding-left: 18px;
  }

  .wd-live-id {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }
}




/* 2026-08-28: v2.6.11 RustDesk ID styled like Connect */
.rustdesk-id-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 10px !important;
  border: 1px solid rgba(199,155,45,.72) !important;
  border-radius: 10px;
  background: rgba(199,155,45,.055) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}

.rustdesk-id-link:hover {
  border-color: rgba(222,183,73,.95) !important;
  background: rgba(199,155,45,.11) !important;
  box-shadow: 0 0 0 1px rgba(199,155,45,.05), 0 0 12px rgba(199,155,45,.09) !important;
}

.rustdesk-id-link:focus-visible {
  outline: 2px solid rgba(222,183,73,.62);
  outline-offset: 2px;
}

.rustdesk-id-link::before {
  content: '●';
  margin-right: 6px;
  color: #d6ae42;
  font-size: 8px;
}


/* 2026-08-28: v2.6.12 remove gold border/accent from RustDesk ID only */
.rustdesk-id-link,
.rustdesk-id-link:hover {
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.035) !important;
  box-shadow: none !important;
}
.rustdesk-id-link::before {
  color: var(--muted) !important;
}
.rustdesk-id-link:focus-visible {
  outline-color: rgba(255,255,255,.42) !important;
}


/* 2026-08-28: v2.6.13 clickable AnyDesk ID */
.anydesk-id-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.anydesk-id-link::before {
  content: '●';
  margin-right: 6px;
  color: #e24b4b;
  font-size: 8px;
}
.anydesk-id-link:hover {
  border-color: rgba(226,75,75,.72);
  background: rgba(226,75,75,.10);
}
.anydesk-id-link:focus-visible {
  outline: 2px solid rgba(226,75,75,.55);
  outline-offset: 2px;
}


/* 2026-08-28: v2.6.14 direct mouse column ordering */
@media (min-width: 1100px) {
  .desktop-table thead th.column-draggable {
    cursor: grab;
    user-select: none;
  }

  .desktop-table thead th.column-draggable:active,
  .desktop-table thead th.column-dragging {
    cursor: grabbing;
  }

  .desktop-table thead th.column-dragging {
    opacity: .48;
  }

  .desktop-table thead th.column-drag-target {
    background: rgba(255,255,255,.07);
    box-shadow: inset 3px 0 0 rgba(255,255,255,.38);
  }
}


/* 2026-08-28: v2.6.15 responsive desktop table
   Keep the full desktop table readable on smaller laptop/monitor widths.
   The table scales its typography, spacing and action controls instead of
   forcing columns to overlap or become visually crowded. */
.desktop-table {
  table-layout: fixed;
  width: 100%;
}

.desktop-table th,
.desktop-table td {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-table .actions {
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 1700px) and (min-width: 1100px) {
  .desktop-table th {
    font-size: 9px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .desktop-table td {
    font-size: 11px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .desktop-table .btn {
    min-height: 30px;
    padding: 4px 7px;
    font-size: 10px;
    gap: 4px;
  }

  .desktop-table .rustdesk-id-link,
  .desktop-table .anydesk-id-link {
    min-height: 28px;
    padding: 4px 7px !important;
    font-size: 10px;
  }

  .desktop-table .actions {
    gap: 4px;
  }

  .desktop-table .metric {
    gap: 5px;
  }
}

@media (max-width: 1450px) and (min-width: 1100px) {
  .desktop-table th {
    font-size: 8px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .desktop-table td {
    font-size: 10px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .desktop-table .btn {
    min-height: 27px;
    padding: 3px 5px;
    font-size: 9px;
  }

  .desktop-table .rustdesk-id-link,
  .desktop-table .anydesk-id-link {
    min-height: 26px;
    padding: 3px 6px !important;
    font-size: 9px;
  }

  .desktop-table .actions {
    gap: 3px;
  }

  .desktop-table .metric-bar {
    min-width: 34px;
  }
}

/* On narrower screens the desktop table gets a horizontal scroll area rather
   than crushing all device information. This preserves readable controls. */
@media (max-width: 1250px) and (min-width: 761px) {
  .site-card {
    overflow: hidden;
  }

  .site-card > .desktop-table {
    min-width: 1180px;
  }

  .site-card {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

/* WebDesk 2.6.24 - clean ACTIONS */
@media (min-width:761px){
.desktop-table .actions-redesign{display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:5px!important;white-space:nowrap!important}
.desktop-table .actions-redesign .btn-action,.desktop-table .actions-redesign .btn-more{width:34px!important;min-width:34px!important;max-width:34px!important;height:32px!important;min-height:32px!important;padding:0!important;margin:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 34px!important;gap:0!important;overflow:hidden!important;border-radius:9px!important}
.desktop-table .actions-redesign .btn-action>span:last-child:not(:first-child){position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.desktop-table .action-app-svg{display:block!important;width:18px!important;height:18px!important;min-width:18px!important;flex:0 0 18px!important}
.desktop-table .btn-rustdesk-action{color:#25a9ff!important;border-color:rgba(37,169,255,.78)!important}
.desktop-table .btn-anydesk{color:#ff3b3b!important;border-color:rgba(255,59,59,.82)!important}
.desktop-table .btn-rustdesk-action:hover:not(.btn-disabled){background:rgba(37,169,255,.10)!important;border-color:#25a9ff!important}
.desktop-table .btn-anydesk:hover:not(.btn-disabled){background:rgba(255,59,59,.10)!important;border-color:#ff3b3b!important}
.desktop-table .actions-redesign .action-terminal-icon,.desktop-table .actions-redesign .action-globe,.desktop-table .actions-redesign .action-edit-icon{position:static!important;width:auto!important;height:auto!important;margin:0!important;overflow:visible!important;clip:auto!important}
.desktop-table .actions-redesign .action-terminal-icon{font-size:15px!important}.desktop-table .actions-redesign .action-globe{font-size:15px!important}.desktop-table .actions-redesign .action-edit-icon{font-size:17px!important}
.desktop-table .actions-redesign .epoptes-btn-icon{width:18px!important;height:18px!important;object-fit:contain!important}
.desktop-table .actions-redesign .btn-disabled{opacity:.34!important;pointer-events:none!important}
.desktop-table th:last-child,.desktop-table td:last-child{width:285px!important;min-width:285px!important;max-width:285px!important}
}
@media (min-width:761px) and (max-width:1450px){
.desktop-table .actions-redesign{gap:4px!important}
.desktop-table .actions-redesign .btn-action,.desktop-table .actions-redesign .btn-more{width:30px!important;min-width:30px!important;max-width:30px!important;height:28px!important;min-height:28px!important;flex-basis:30px!important}
.desktop-table th:last-child,.desktop-table td:last-child{width:245px!important;min-width:245px!important;max-width:245px!important}
}
@media (max-width:760px){.mobile-card .action-app-svg{width:18px;height:18px;display:inline-block}.mobile-card .btn-rustdesk-action{color:#25a9ff}.mobile-card .btn-anydesk{color:#ff3b3b}}


/* ========================================================================
   WebDesk 2.6.25 - prevent unwanted ellipsis on identity/status columns
   ======================================================================== */
@media (min-width: 761px) {
  .desktop-table th.col-status,
  .desktop-table td.col-status {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .desktop-table th.col-rustdesk,
  .desktop-table td.col-rustdesk {
    min-width: 126px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .desktop-table th.col-anydesk,
  .desktop-table td.col-anydesk {
    min-width: 126px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .desktop-table th.col-depot,
  .desktop-table td.col-depot {
    min-width: 160px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .desktop-table td.col-status .status-pill,
  .desktop-table td.col-status .status,
  .desktop-table td.col-status span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}

/* On compact laptop widths keep IDs/status readable; allow horizontal table
   scrolling rather than replacing values with ... */
@media (min-width: 761px) and (max-width: 1250px) {
  .desktop-table {
    min-width: 1240px !important;
  }
}


/* ========================================================================
   WebDesk 2.6.26 - keep ACTIONS inside the table/card
   ======================================================================== */
@media (min-width: 761px) {
  /* The table must use the available card width, not extend the final column
     beyond the rounded site container. */
  .desktop-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  /* Reserve a compact, deterministic Actions column. Seven 34px buttons +
     six 5px gaps fit comfortably without pushing the column outside. */
  .desktop-table th:last-child,
  .desktop-table td:last-child {
    width: 272px !important;
    min-width: 272px !important;
    max-width: 272px !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow: hidden !important;
  }

  .desktop-table .actions-redesign {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  /* Give back a little space from columns that do not need a large minimum. */
  .desktop-table th.col-rustdesk,
  .desktop-table td.col-rustdesk,
  .desktop-table th.col-anydesk,
  .desktop-table td.col-anydesk {
    min-width: 116px !important;
  }

  .desktop-table th.col-depot,
  .desktop-table td.col-depot {
    min-width: 145px !important;
  }
}

/* Laptop / smaller desktop:
   shrink only the action buttons and the Actions column, while keeping all
   seven controls in one row and inside the right border. */
@media (min-width: 761px) and (max-width: 1450px) {
  .desktop-table th:last-child,
  .desktop-table td:last-child {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .desktop-table .actions-redesign {
    gap: 3px !important;
  }

  .desktop-table .actions-redesign .btn-action,
  .desktop-table .actions-redesign .btn-more {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    flex: 0 0 28px !important;
  }
}

/* At narrow desktop widths preserve one-line Actions and allow the whole table
   to scroll inside its own site section instead of drawing outside the card. */
@media (min-width: 761px) and (max-width: 1250px) {
  .site-section,
  .site-card,
  .table-wrap,
  .table-responsive {
    max-width: 100% !important;
  }

  .desktop-table {
    min-width: 1180px !important;
  }
}


/* ========================================================================
   WebDesk 2.6.27 - RustDesk / AnyDesk IDs without button borders
   ======================================================================== */
.desktop-table td.col-rustdesk a,
.desktop-table td.col-anydesk a,
.desktop-table .rustdesk-id-link,
.desktop-table .anydesk-id-link {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.desktop-table td.col-rustdesk a:hover,
.desktop-table td.col-anydesk a:hover,
.desktop-table .rustdesk-id-link:hover,
.desktop-table .anydesk-id-link:hover {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Same visual treatment on mobile cards. */
.mobile-card .rustdesk-id-link,
.mobile-card .anydesk-id-link {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* WebDesk 2.6.28 - status dot before remote IDs */
.remote-id-status-dot{
 display:inline-block!important;width:7px!important;height:7px!important;min-width:7px!important;
 border-radius:50%!important;margin-right:7px!important;vertical-align:middle!important;position:relative!important;top:-1px!important
}
.remote-id-status-dot.is-online{background:#20d86b!important;box-shadow:0 0 7px rgba(32,216,107,.55)!important}
.remote-id-status-dot.is-offline{background:#ff4747!important;box-shadow:0 0 7px rgba(255,71,71,.42)!important}


/* ========================================================================
   WebDesk 2.6.30 - only one status dot before RustDesk / AnyDesk IDs
   ======================================================================== */
.desktop-table .rustdesk-id-link::before,
.desktop-table .anydesk-id-link::before,
.mobile-card .rustdesk-id-link::before,
.mobile-card .anydesk-id-link::before {
  content: none !important;
  display: none !important;
}

/* Also neutralize any legacy marker child used by older ID styling. */
.rustdesk-id-link .id-dot,
.anydesk-id-link .id-dot,
.rustdesk-id-link .dot,
.anydesk-id-link .dot {
  display: none !important;
}


/* ========================================================================
   WebDesk 2.6.31 - fixed, aligned desktop columns
   ======================================================================== */
@media (min-width: 761px) {
  /* Keep the table completely inside each site card. */
  .desktop-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .desktop-table th,
  .desktop-table td {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Fixed widths by physical column position.
     Percentages leave a stable 15% Actions area on every screen. */
  .desktop-table th:nth-child(1),  .desktop-table td:nth-child(1)  { width: 5.0% !important; } /* Status */
  .desktop-table th:nth-child(2),  .desktop-table td:nth-child(2)  { width: 7.0% !important; } /* Hostname */
  .desktop-table th:nth-child(3),  .desktop-table td:nth-child(3)  { width: 7.0% !important; } /* RustDesk */
  .desktop-table th:nth-child(4),  .desktop-table td:nth-child(4)  { width: 7.0% !important; } /* AnyDesk */
  .desktop-table th:nth-child(5),  .desktop-table td:nth-child(5)  { width: 9.5% !important; } /* Depot */
  .desktop-table th:nth-child(6),  .desktop-table td:nth-child(6)  { width: 7.5% !important; } /* Version */
  .desktop-table th:nth-child(7),  .desktop-table td:nth-child(7)  { width: 7.0% !important; } /* CPU */
  .desktop-table th:nth-child(8),  .desktop-table td:nth-child(8)  { width: 7.0% !important; } /* RAM */
  .desktop-table th:nth-child(9),  .desktop-table td:nth-child(9)  { width: 7.0% !important; } /* Disk */
  .desktop-table th:nth-child(10), .desktop-table td:nth-child(10) { width: 7.5% !important; } /* Last seen */
  .desktop-table th:nth-child(11), .desktop-table td:nth-child(11) { width: 13.5% !important; } /* Tags */
  .desktop-table th:nth-child(12), .desktop-table td:nth-child(12) {
    width: 15.0% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow: hidden !important;
  }

  /* Actions always stay on one line and inside their fixed column. */
  .desktop-table .actions-redesign {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  .desktop-table .actions-redesign .btn-action,
  .desktop-table .actions-redesign .btn-more {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    flex: 0 0 32px !important;
  }

  /* Disable the visible column resize handle/tooltip behavior on desktop.
     Columns are now deliberately fixed. */
  .desktop-table th::after {
    display: none !important;
  }
}

/* Smaller desktop/laptop: keep the same column positions and scale controls,
   instead of allowing the Actions column to escape the card. */
@media (min-width: 761px) and (max-width: 1450px) {
  .desktop-table th,
  .desktop-table td {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .desktop-table .actions-redesign {
    gap: 3px !important;
  }

  .desktop-table .actions-redesign .btn-action,
  .desktop-table .actions-redesign .btn-more {
    width: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    flex-basis: 27px !important;
  }
}


/* ========================================================================
   WebDesk 2.6.32 - final fixed columns / keep Version and Actions visible
   ======================================================================== */
@media (min-width: 761px) {
  .desktop-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  /* Rebalanced fixed widths - total = 100% */
  .desktop-table th:nth-child(1),  .desktop-table td:nth-child(1)  { width: 5.0% !important; }  /* Status */
  .desktop-table th:nth-child(2),  .desktop-table td:nth-child(2)  { width: 7.0% !important; }  /* Hostname */
  .desktop-table th:nth-child(3),  .desktop-table td:nth-child(3)  { width: 7.0% !important; }  /* RustDesk */
  .desktop-table th:nth-child(4),  .desktop-table td:nth-child(4)  { width: 7.0% !important; }  /* AnyDesk */
  .desktop-table th:nth-child(5),  .desktop-table td:nth-child(5)  { width: 9.0% !important; }  /* Depot */
  .desktop-table th:nth-child(6),  .desktop-table td:nth-child(6)  { width: 9.5% !important; }  /* Version */
  .desktop-table th:nth-child(7),  .desktop-table td:nth-child(7)  { width: 6.5% !important; }  /* CPU */
  .desktop-table th:nth-child(8),  .desktop-table td:nth-child(8)  { width: 6.5% !important; }  /* RAM */
  .desktop-table th:nth-child(9),  .desktop-table td:nth-child(9)  { width: 6.5% !important; }  /* Disk */
  .desktop-table th:nth-child(10), .desktop-table td:nth-child(10) { width: 7.5% !important; }  /* Last seen */
  .desktop-table th:nth-child(11), .desktop-table td:nth-child(11) { width: 13.0% !important; } /* Tags */
  .desktop-table th:nth-child(12), .desktop-table td:nth-child(12) { width: 15.5% !important; } /* Actions */

  /* Version must remain readable and must not get the legacy "...". */
  .desktop-table th:nth-child(6),
  .desktop-table td:nth-child(6),
  .desktop-table .version-cell {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* Keep Actions entirely inside its cell. */
  .desktop-table th:nth-child(12),
  .desktop-table td:nth-child(12) {
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .desktop-table .actions-redesign {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    gap: 4px !important;
  }
}

@media (min-width: 761px) and (max-width: 1450px) {
  .desktop-table .version-cell {
    font-size: 8px !important;
  }

  .desktop-table .actions-redesign {
    gap: 3px !important;
  }

  .desktop-table .actions-redesign .btn-action,
  .desktop-table .actions-redesign .btn-more {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    flex: 0 0 26px !important;
  }
}


/* ========================================================================
   WebDesk 2.6.33 - always show full ONLINE / OFFLINE text
   ======================================================================== */
@media (min-width: 761px) {
  .desktop-table th:nth-child(1),
  .desktop-table td:nth-child(1) {
    width: 6.0% !important;
    min-width: 92px !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .desktop-table td:nth-child(1) .status,
  .desktop-table td:nth-child(1) .status-pill,
  .desktop-table td:nth-child(1) span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    max-width: none !important;
  }

  /* Take the extra 1% from Tags so total table width remains balanced. */
  .desktop-table th:nth-child(11),
  .desktop-table td:nth-child(11) {
    width: 12.0% !important;
  }
}


/* ========================================================================
   WebDesk 2.6.34 - unified typography
   ======================================================================== */
:root {
  --wd-ui-font: Inter, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  --wd-mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

html,
body,
button,
input,
select,
textarea,
table,
th,
td,
a,
span,
div,
label,
small,
strong,
h1,
h2,
h3,
h4,
p {
  font-family: var(--wd-ui-font) !important;
}

/* Keep technical machine data consistently monospace. */
.mono,
.rustdesk-id-link,
.anydesk-id-link,
.depot-cell,
.version-cell,
.device-value.mono,
.admin-output,
code,
pre {
  font-family: var(--wd-mono-font) !important;
}

/* Prevent inherited browser/default bold-face differences in table headers. */
.desktop-table th,
.device-label,
.wd-control-label,
.summary-label {
  font-family: var(--wd-ui-font) !important;
  font-weight: 700 !important;
}

/* Buttons/actions use the same UI font even when labels are hidden. */
.btn,
.btn-action,
.btn-more,
.action-menu-item,
.wd-apply {
  font-family: var(--wd-ui-font) !important;
}


/* ========================================================================
   WebDesk 2.6.35 - unified table font size
   ======================================================================== */
:root {
  --wd-table-font-size: 12px;
}

/* Same text size across every desktop table column. */
.desktop-table th {
  font-size: var(--wd-table-font-size) !important;
}

.desktop-table td,
.desktop-table td *,
.desktop-table .mono,
.desktop-table .rustdesk-id-link,
.desktop-table .anydesk-id-link,
.desktop-table .depot-cell,
.desktop-table .version-cell,
.desktop-table .status,
.desktop-table .status-pill,
.desktop-table .tag,
.desktop-table .badge {
  font-size: var(--wd-table-font-size) !important;
}

/* Keep action icons sized as icons, not table text. */
.desktop-table .actions-redesign .btn-action,
.desktop-table .actions-redesign .btn-more,
.desktop-table .actions-redesign .btn-action *,
.desktop-table .actions-redesign .btn-more * {
  font-size: 14px !important;
}

/* Remove older responsive rules that made individual text columns smaller. */
@media (min-width: 761px) and (max-width: 1700px) {
  .desktop-table th,
  .desktop-table td,
  .desktop-table td *,
  .desktop-table .version-cell {
    font-size: var(--wd-table-font-size) !important;
  }
}


/* ========================================================================
   WebDesk 2.6.36 - unified data font weight
   ======================================================================== */

/* RustDesk and AnyDesk IDs use the same normal weight as other table data. */
.desktop-table .rustdesk-id-link,
.desktop-table .anydesk-id-link {
  font-weight: 400 !important;
}

/* Keep device status emphasized for fast visual scanning. */
.desktop-table .status,
.desktop-table .status-pill,
.desktop-table td:first-child {
  font-weight: 700 !important;
}

/* Same treatment in mobile/card layout. */
.mobile-card .rustdesk-id-link,
.mobile-card .anydesk-id-link {
  font-weight: 400 !important;
}


/* ========================================================================
   WebDesk 2.6.37 - fixed columns, no drag/reorder UI
   ======================================================================== */
.desktop-table th {
  cursor: default !important;
  user-select: text !important;
}

/* No resize/drag handles. */
.desktop-table th::before,
.desktop-table th::after {
  pointer-events: none !important;
}

/* Legacy drag visual states are disabled. */
.desktop-table th.dragging,
.desktop-table th.drag-over,
.desktop-table th[draggable="true"] {
  cursor: default !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}


/* ========================================================================
   WebDesk 2.6.38 - fully unified row typography
   ======================================================================== */
:root {
  --wd-row-font-family: Inter, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  --wd-row-font-size: 12px;
  --wd-row-font-weight: 400;
}

/* Every normal value in the desktop data rows uses exactly the same font,
   size and weight. */
.desktop-table tbody td,
.desktop-table tbody td *,
.desktop-table tbody .mono,
.desktop-table tbody .depot-cell,
.desktop-table tbody .version-cell,
.desktop-table tbody .rustdesk-id-link,
.desktop-table tbody .anydesk-id-link,
.desktop-table tbody .tag,
.desktop-table tbody .badge {
  font-family: var(--wd-row-font-family) !important;
  font-size: var(--wd-row-font-size) !important;
  font-weight: var(--wd-row-font-weight) !important;
}

/* Status remains intentionally emphasized. */
.desktop-table tbody .status,
.desktop-table tbody .status *,
.desktop-table tbody .status-pill,
.desktop-table tbody td:first-child,
.desktop-table tbody td:first-child * {
  font-family: var(--wd-row-font-family) !important;
  font-size: var(--wd-row-font-size) !important;
  font-weight: 700 !important;
}

/* Column headers remain bold but use the same family. */
.desktop-table thead th {
  font-family: var(--wd-row-font-family) !important;
  font-size: var(--wd-row-font-size) !important;
  font-weight: 700 !important;
}

/* Action glyphs/icons keep their icon sizing and are not affected by row text. */
.desktop-table .actions-redesign .btn-action,
.desktop-table .actions-redesign .btn-more,
.desktop-table .actions-redesign .btn-action *,
.desktop-table .actions-redesign .btn-more * {
  font-size: 14px !important;
}

/* Same visual consistency for mobile data values. */
.mobile-card .device-value,
.mobile-card .device-value *,
.mobile-card .rustdesk-id-link,
.mobile-card .anydesk-id-link {
  font-family: var(--wd-row-font-family) !important;
  font-size: var(--wd-row-font-size) !important;
  font-weight: var(--wd-row-font-weight) !important;
}


/* ========================================================================
   WebDesk 2.6.39 - remove all legacy column drag/resize visual artifacts
   ======================================================================== */
.desktop-table thead th::before,
.desktop-table thead th::after,
.desktop-table th::before,
.desktop-table th::after,
.desktop-table .column-resizer,
.desktop-table .resize-handle,
.desktop-table .col-resizer,
.desktop-table .drag-handle,
.desktop-table .column-drag-handle {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* Header cells are plain fixed headers only. */
.desktop-table thead th {
  background-image: none !important;
  text-shadow: none !important;
  cursor: default !important;
}

/* Remove legacy drag marker states if older JS/CSS still adds classes. */
.desktop-table thead th.dragging,
.desktop-table thead th.drag-over,
.desktop-table thead th.is-dragging,
.desktop-table thead th.is-resizing,
.desktop-table thead th.resizing {
  outline: none !important;
  box-shadow: none !important;
  border-left-color: inherit !important;
  border-right-color: inherit !important;
  transform: none !important;
}


/* ========================================================================
   WebDesk 2.6.40 - fully unified row typography
   Every visible data value in columns 1-11 uses EXACTLY the same typography.
   ======================================================================== */
:root {
  --wd-data-font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  --wd-data-font-size: 15.5px;
  --wd-data-font-weight: 400;
  --wd-data-line-height: 1.35;
  --wd-data-letter-spacing: 0px;
}

/* All data cells except ACTIONS: identical font family, size, weight,
   line-height and letter spacing. This overrides old .mono/.status/tag rules. */
.desktop-table tbody td:not(:nth-child(12)),
.desktop-table tbody td:not(:nth-child(12)) *,
.desktop-table tbody .mono,
.desktop-table tbody .status,
.desktop-table tbody .status *,
.desktop-table tbody .status-pill,
.desktop-table tbody .rustdesk-id-link,
.desktop-table tbody .anydesk-id-link,
.desktop-table tbody .depot-cell,
.desktop-table tbody .version-cell,
.desktop-table tbody .tag,
.desktop-table tbody .badge {
  font-family: var(--wd-data-font-family) !important;
  font-size: var(--wd-data-font-size) !important;
  font-weight: var(--wd-data-font-weight) !important;
  line-height: var(--wd-data-line-height) !important;
  letter-spacing: var(--wd-data-letter-spacing) !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
}

/* Keep only color as the status distinction; typography is identical. */
.desktop-table tbody .status,
.desktop-table tbody .status-pill,
.desktop-table tbody td:first-child,
.desktop-table tbody td:first-child * {
  font-weight: var(--wd-data-font-weight) !important;
}

/* Column headers use the same font family/size, but remain bold as headers. */
.desktop-table thead th {
  font-family: var(--wd-data-font-family) !important;
  font-size: var(--wd-data-font-size) !important;
  line-height: var(--wd-data-line-height) !important;
  letter-spacing: var(--wd-data-letter-spacing) !important;
  font-style: normal !important;
  font-variant: normal !important;
  font-weight: 700 !important;
}

/* ACTIONS are icons, so keep their icon sizing untouched. */
.desktop-table tbody td:nth-child(12),
.desktop-table tbody td:nth-child(12) * {
  font-family: var(--wd-data-font-family);
}

/* Same typography for visible data on mobile cards. */
.mobile-card .device-value,
.mobile-card .device-value *,
.mobile-card .rustdesk-id-link,
.mobile-card .anydesk-id-link,
.mobile-card .status,
.mobile-card .tag {
  font-family: var(--wd-data-font-family) !important;
  font-size: var(--wd-data-font-size) !important;
  font-weight: var(--wd-data-font-weight) !important;
  line-height: var(--wd-data-line-height) !important;
  letter-spacing: var(--wd-data-letter-spacing) !important;
  font-style: normal !important;
  font-variant: normal !important;
}


/* ========================================================================
   WebDesk 2.6.41 - stable ACTION button hover
   Prevent buttons from jumping upward and keep borders fully visible.
   ======================================================================== */
.desktop-table .actions-redesign {
  overflow: visible !important;
  align-items: center !important;
}

.desktop-table .actions-redesign .btn-action,
.desktop-table .actions-redesign .btn-more {
  position: relative !important;
  top: 0 !important;
  bottom: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  vertical-align: middle !important;
}

/* Disable all legacy lift/scale hover animations. */
.desktop-table .actions-redesign .btn-action:hover,
.desktop-table .actions-redesign .btn-action:focus,
.desktop-table .actions-redesign .btn-action:focus-visible,
.desktop-table .actions-redesign .btn-more:hover,
.desktop-table .actions-redesign .btn-more:focus,
.desktop-table .actions-redesign .btn-more:focus-visible {
  top: 0 !important;
  bottom: auto !important;
  transform: none !important;
  translate: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Keep a clean border on hover without changing geometry. */
.desktop-table .actions-redesign .btn-action:hover:not(.btn-disabled),
.desktop-table .actions-redesign .btn-more:hover {
  box-shadow: 0 0 0 1px currentColor inset !important;
}

/* Do not clip the button border inside the ACTIONS table cell. */
.desktop-table th:nth-child(12),
.desktop-table td:nth-child(12) {
  overflow: visible !important;
}

/* Keep focus indication inside the button bounds. */
.desktop-table .actions-redesign .btn-action:focus-visible,
.desktop-table .actions-redesign .btn-more:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 1px currentColor inset, 0 0 0 2px rgba(255,255,255,.14) !important;
}


/* ========================================================================
   WebDesk 2.6.42 - remove bold typography everywhere
   ======================================================================== */

/* All visible text uses normal font weight. */
html,
body,
body *,
table,
thead,
tbody,
tr,
th,
td,
a,
span,
div,
p,
small,
strong,
b,
label,
button,
input,
select,
textarea,
option,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400 !important;
}

/* Explicitly normalize the areas that had old bold overrides. */
.desktop-table thead th,
.desktop-table tbody td,
.desktop-table tbody td *,
.desktop-table .status,
.desktop-table .status *,
.desktop-table .status-pill,
.desktop-table .rustdesk-id-link,
.desktop-table .anydesk-id-link,
.desktop-table .depot-cell,
.desktop-table .version-cell,
.desktop-table .tag,
.desktop-table .badge,
.group-title,
.summary-label,
.summary-value,
.wd-control-label,
.device-label,
.device-value,
.btn,
.action-menu-item {
  font-weight: 400 !important;
}

/* Keep icon geometry untouched; only text weight is normalized. */
.desktop-table .actions-redesign svg,
.desktop-table .actions-redesign img {
  font-weight: normal !important;
}


/* ========================================================================
   WebDesk 2.7.0 - Script / Command Center
   ======================================================================== */
.script-center-modal.hidden { display:none !important; }
.script-center-modal { position:fixed; inset:0; z-index:12000; display:flex; align-items:center; justify-content:center; padding:24px; }
.script-center-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.script-center-dialog {
  position:relative; width:min(1480px, 96vw); max-height:92vh; overflow:auto;
  background:linear-gradient(180deg, rgba(25,26,30,.99), rgba(10,11,14,.99));
  border:1px solid rgba(255,255,255,.11); border-radius:20px; box-shadow:0 30px 90px rgba(0,0,0,.55);
  padding:20px; color:var(--text);
}
.script-center-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.09); }
.script-center-head h2 { margin:3px 0 5px; font-size:20px !important; }
.script-center-head p, .script-panel-head p { margin:0; color:var(--muted); font-size:12px !important; }
.script-center-kicker { font-size:10px !important; letter-spacing:.14em; color:#64d7ff; }
.script-target-bar { display:grid; grid-template-columns:auto minmax(300px, 1fr) auto auto; align-items:center; gap:10px; margin:16px 0; padding:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:12px; }
.script-target-bar label { color:var(--muted); }
.script-target-bar select { min-width:0; }
.script-target-state { font-size:11px !important; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--muted); white-space:nowrap; }
.script-target-state.online { color:#32df7e; background:rgba(50,223,126,.10); }
.script-target-state.offline { color:#ff6565; background:rgba(255,101,101,.10); }
.script-center-grid { display:grid; grid-template-columns:minmax(300px, .72fr) minmax(520px, 1.28fr); gap:14px; }
.script-library-panel, .script-editor-panel, .script-history-panel { background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; }
.script-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.script-panel-head h3 { margin:0 0 3px; font-size:14px !important; }
.script-library-search { width:100%; margin-bottom:10px; }
.script-library-list { display:grid; gap:7px; max-height:480px; overflow:auto; padding-right:3px; }
.script-library-item { width:100%; text-align:left; background:rgba(255,255,255,.028); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:10px; cursor:pointer; color:var(--text); }
.script-library-item:hover { border-color:rgba(100,215,255,.45); background:rgba(100,215,255,.055); }
.script-library-item.active { border-color:#33b9ff; box-shadow:0 0 0 1px rgba(51,185,255,.15) inset; }
.script-library-name { display:flex; justify-content:space-between; gap:10px; margin-bottom:4px; }
.script-library-name strong { font-weight:400 !important; }
.script-library-desc { color:var(--muted); font-size:11px !important; margin-bottom:6px; }
.script-library-command { font-family:Consolas, "Liberation Mono", monospace !important; font-size:10px !important; color:#b9c5d5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.script-form-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:10px; }
.script-form-grid label, .script-command-field { display:grid; gap:5px; color:var(--muted); }
.script-command-field { margin-top:10px; }
#scriptCommand { min-height:190px; resize:vertical; font-family:Consolas, "Liberation Mono", monospace !important; font-size:12px !important; line-height:1.5 !important; }
.script-editor-actions { display:flex; align-items:center; gap:8px; margin-top:10px; }
.script-editor-spacer { flex:1; }
.script-run-button { min-width:145px; }
.script-editor-dirty { color:#f2c94c; font-size:10px !important; }
.script-output-card { margin-top:12px; border:1px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden; background:#050609; }
.script-output-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; background:rgba(255,255,255,.045); border-bottom:1px solid rgba(255,255,255,.07); }
.script-run-status { font-size:10px !important; color:var(--muted); }
.script-run-status.success { color:#32df7e; }
.script-run-status.failed, .script-run-status.error, .script-run-status.timeout { color:#ff6565; }
#scriptRunOutput { margin:0; padding:12px; min-height:130px; max-height:320px; overflow:auto; white-space:pre-wrap; word-break:break-word; font-family:Consolas, "Liberation Mono", monospace !important; font-size:11px !important; color:#dce6f4; }
.script-history-panel { margin-top:14px; }
.script-history-list { display:grid; gap:5px; }
.script-history-row { display:grid; grid-template-columns:135px minmax(120px, 1fr) minmax(180px, 1.5fr) 90px 80px; gap:10px; align-items:center; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.025); }
.script-history-status { font-size:10px !important; text-transform:uppercase; }
.script-history-status.success { color:#32df7e; }
.script-history-status.failed, .script-history-status.error, .script-history-status.timeout { color:#ff6565; }
.script-empty { padding:18px; text-align:center; color:var(--muted); font-size:11px !important; }
.action-script-icon { width:18px; text-align:center; display:inline-block; color:#64d7ff; }
@media (max-width:900px) {
  .script-center-modal { padding:8px; }
  .script-center-dialog { width:100%; max-height:96vh; border-radius:14px; padding:12px; }
  .script-target-bar { grid-template-columns:1fr; }
  .script-center-grid { grid-template-columns:1fr; }
  .script-form-grid { grid-template-columns:1fr; }
  .script-history-row { grid-template-columns:1fr 1fr; }
}


/* ========================================================================
   WebDesk 2.7.3 - Script Center view/layout fix
   Goal: keep target, scripts, editor, live output and history visible together.
   ======================================================================== */

.script-center-modal {
  padding: 14px !important;
}

.script-center-dialog {
  width: min(1560px, 97vw) !important;
  height: min(940px, 95vh) !important;
  max-height: 95vh !important;
  overflow: hidden !important;
  padding: 16px !important;

  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
}

/* Compact top section. */
.script-center-head {
  padding-bottom: 10px !important;
  min-height: 0 !important;
}

.script-center-head h2 {
  margin: 2px 0 3px !important;
  font-size: 19px !important;
}

.script-center-head p {
  font-size: 11px !important;
}

.script-target-bar {
  margin: 0 !important;
  padding: 9px 11px !important;
  min-height: 52px !important;
}

/* Main working area fills the available modal height. */
.script-center-grid {
  min-height: 0 !important;
  height: 100% !important;
  grid-template-columns: minmax(320px, .74fr) minmax(620px, 1.36fr) !important;
  gap: 12px !important;
}

.script-library-panel,
.script-editor-panel {
  min-height: 0 !important;
  height: 100% !important;
  padding: 12px !important;
  overflow: hidden !important;
}

.script-library-panel {
  display: flex !important;
  flex-direction: column !important;
}

.script-library-search {
  margin-bottom: 8px !important;
}

.script-library-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
}

.script-library-item {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 9px !important;
}

.script-library-name,
.script-library-desc,
.script-library-command {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Editor uses remaining vertical space efficiently. */
.script-editor-panel {
  display: flex !important;
  flex-direction: column !important;
}

.script-panel-head {
  margin-bottom: 8px !important;
}

.script-form-grid {
  gap: 8px !important;
}

.script-command-field {
  margin-top: 8px !important;
}

#scriptCommand {
  min-height: 118px !important;
  height: 138px !important;
  max-height: 190px !important;
  resize: vertical !important;
}

.script-editor-actions {
  margin-top: 8px !important;
  flex: 0 0 auto !important;
}

/* Live output gets the largest remaining area and its own scroll. */
.script-output-card {
  margin-top: 9px !important;
  min-height: 170px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.script-output-head {
  flex: 0 0 auto !important;
  padding: 7px 9px !important;
}

#scriptRunOutput {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow: auto !important;
  padding: 10px !important;
}

/* History remains visible at the bottom instead of falling below the fold. */
.script-history-panel {
  margin-top: 0 !important;
  padding: 10px 12px !important;
  max-height: 145px !important;
  overflow: hidden !important;
}

.script-history-panel .script-panel-head {
  margin-bottom: 6px !important;
}

.script-history-list {
  max-height: 86px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 3px !important;
}

.script-history-row {
  padding: 6px 9px !important;
  min-height: 34px !important;
}

/* Medium laptop resolutions. */
@media (min-width: 901px) and (max-height: 820px) {
  .script-center-dialog {
    height: 96vh !important;
    max-height: 96vh !important;
    padding: 12px !important;
    gap: 8px !important;
  }

  .script-center-head {
    padding-bottom: 7px !important;
  }

  .script-center-head p {
    display: none !important;
  }

  .script-target-bar {
    min-height: 44px !important;
    padding: 7px 9px !important;
  }

  .script-library-panel,
  .script-editor-panel {
    padding: 10px !important;
  }

  #scriptCommand {
    min-height: 90px !important;
    height: 105px !important;
    max-height: 135px !important;
  }

  .script-output-card {
    min-height: 135px !important;
  }

  .script-history-panel {
    max-height: 112px !important;
    padding: 8px 10px !important;
  }

  .script-history-list {
    max-height: 62px !important;
  }
}

/* Tablets / narrow windows continue to stack, but without sideways overflow. */
@media (max-width: 900px) {
  .script-center-dialog {
    width: 100% !important;
    height: 96vh !important;
    max-height: 96vh !important;
    overflow-y: auto !important;
    display: block !important;
  }

  .script-center-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
  }

  .script-library-panel,
  .script-editor-panel {
    height: auto !important;
    overflow: visible !important;
  }

  .script-library-list {
    max-height: 260px !important;
  }

  #scriptCommand {
    height: 130px !important;
  }

  .script-output-card {
    min-height: 180px !important;
  }

  .script-history-panel {
    max-height: none !important;
    margin-top: 12px !important;
  }

  .script-history-list {
    max-height: 220px !important;
  }
}


/* ========================================================================
   WebDesk 2.7.4 - compact Script Center saved scripts + history
   ======================================================================== */

/* Saved scripts: compact rows, not large vertical cards. */
.script-library-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

.script-library-item {
  flex: 0 0 auto !important;
  min-height: 44px !important;
  height: auto !important;
  max-height: 54px !important;
  padding: 7px 9px !important;
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 8px !important;
  row-gap: 2px !important;
  align-items: center !important;
  overflow: hidden !important;
}

.script-library-name {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  max-width: 160px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.script-library-desc {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: .72 !important;
}

.script-library-command {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: .9 !important;
}

/* Make selected row visually compact too. */
.script-library-item.active,
.script-library-item.selected {
  min-height: 44px !important;
  max-height: 54px !important;
}

/* Give Execution output more room by tightening the lower history area. */
.script-history-panel {
  max-height: 118px !important;
  padding: 8px 10px !important;
}

.script-history-panel .script-panel-head {
  margin-bottom: 4px !important;
}

.script-history-panel .script-panel-head h3,
.script-history-panel .script-panel-head h4 {
  margin: 0 !important;
  font-size: 12px !important;
}

.script-history-panel .script-panel-head p {
  margin: 2px 0 0 !important;
  font-size: 9px !important;
}

.script-history-list {
  max-height: 68px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.script-history-row {
  min-height: 30px !important;
  padding: 4px 8px !important;
  gap: 8px !important;
  font-size: 10px !important;
}

/* Execution output gets the recovered vertical space. */
.script-output-card {
  min-height: 200px !important;
}

#scriptRunOutput {
  min-height: 150px !important;
}

/* On shorter laptop screens keep the same compact row model. */
@media (min-width: 901px) and (max-height: 820px) {
  .script-library-item {
    min-height: 40px !important;
    max-height: 48px !important;
    padding: 6px 8px !important;
  }

  .script-library-name {
    max-width: 140px !important;
    font-size: 11px !important;
  }

  .script-library-desc {
    font-size: 9px !important;
  }

  .script-library-command {
    font-size: 8.5px !important;
  }

  .script-history-panel {
    max-height: 94px !important;
    padding: 7px 9px !important;
  }

  .script-history-list {
    max-height: 50px !important;
  }

  .script-history-row {
    min-height: 26px !important;
    padding: 3px 7px !important;
  }

  .script-output-card {
    min-height: 165px !important;
  }

  #scriptRunOutput {
    min-height: 120px !important;
  }
}


/* ========================================================================
   WebDesk 2.7.5 - Recent execution history removed
   ======================================================================== */

/* History is intentionally removed from Script Center. */
.script-history-panel,
.script-history-list,
#scriptHistoryList {
  display: none !important;
}

/* Use the freed space for the working area / execution output. */
.script-center-dialog {
  grid-template-rows: auto auto minmax(0, 1fr) !important;
}

.script-center-grid {
  min-height: 0 !important;
  height: 100% !important;
}

.script-editor-panel {
  min-height: 0 !important;
}

.script-output-card {
  flex: 1 1 auto !important;
  min-height: 240px !important;
}

#scriptRunOutput {
  min-height: 190px !important;
}


/* ========================================================================
   WebDesk 2.8.0 - Batch target picker + multi-device execution
   ======================================================================== */
.script-target-bar-multi {
  position: relative !important;
  overflow: visible !important;
}

.script-target-label {
  white-space: nowrap;
  flex: 0 0 auto;
}

.script-target-picker {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.script-target-picker-button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  color: var(--text, #f2f4f8);
  background: #07080b;
  border: 1px solid #343945;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}

.script-target-picker-button:hover,
.script-target-picker-button:focus {
  border-color: #7d6813;
  outline: none;
}

.script-target-picker-caret {
  opacity: .75;
  flex: 0 0 auto;
}

.script-target-picker-menu {
  position: absolute;
  z-index: 10040;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 520px;
  max-height: min(520px, 68vh);
  overflow: hidden;
  padding: 8px;
  background: #101216;
  border: 1px solid #3a3f4b;
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(0,0,0,.52);
}

.script-target-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid #282c34;
}

.script-target-picker-toolbar input {
  min-width: 0;
  height: 34px;
}

.script-target-picker-list {
  max-height: min(445px, 58vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 5px 2px 2px;
}

.script-target-site-group {
  margin: 0 0 6px;
  border: 1px solid #262b34;
  border-radius: 8px;
  overflow: hidden;
}

.script-target-site-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 9px;
  background: #191c22;
  border-bottom: 1px solid #292e37;
}

.script-target-site-head label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

.script-target-site-head > span {
  font-size: 10px;
  opacity: .65;
  white-space: nowrap;
}

.script-target-site-devices {
  display: flex;
  flex-direction: column;
}

.script-target-device-row {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 12px;
  border-top: 1px solid rgba(255,255,255,.035);
  cursor: pointer;
}

.script-target-device-row:first-child {
  border-top: 0;
}

.script-target-device-row.available:hover {
  background: rgba(69,180,255,.06);
}

.script-target-device-row.unavailable {
  opacity: .43;
  cursor: default;
}

.script-target-device-row input,
.script-target-site-head input {
  accent-color: #d6b334;
  flex: 0 0 auto;
}

.script-target-device-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.script-target-device-host {
  min-width: 120px;
  font-family: inherit;
  font-size: 11px;
}

.script-target-device-state {
  font-size: 10px;
  opacity: .72;
  white-space: nowrap;
}

.script-target-device-row.available .script-target-device-state {
  color: #62df9a;
  opacity: .95;
}

/* Compact selected-device execution list inside Execution output. */
.script-batch-runs {
  flex: 0 0 auto;
  max-height: 112px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  background: #0a0b0e;
  border-bottom: 1px solid #262a32;
}

.script-batch-runs.hidden {
  display: none !important;
}

.script-batch-run-row {
  min-width: 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 4px 7px;
  color: #d7dce5;
  background: #15181e;
  border: 1px solid #2c313b;
  border-radius: 7px;
  cursor: pointer;
  font-size: 10px;
}

.script-batch-run-row:hover,
.script-batch-run-row.active {
  border-color: #6a778d;
  background: #1b1f27;
}

.script-batch-run-row > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.script-batch-run-status {
  flex: 0 0 auto;
  font-size: 8px;
}

.script-batch-run-status.success { color: #36db7f; }
.script-batch-run-status.failed  { color: #ff5656; }
.script-batch-run-status.running { color: #f0c644; }
.script-batch-run-status.queued  { color: #98a2b4; }

.script-run-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 1100px) {
  .script-target-picker-menu {
    min-width: 0;
  }

  .script-batch-runs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .script-target-bar-multi {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .script-target-picker-menu {
    position: fixed;
    left: 10px;
    right: 10px;
    top: 90px;
    max-height: calc(100vh - 110px);
  }

  .script-target-picker-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .script-target-picker-toolbar input {
    grid-column: 1 / -1;
  }

  .script-batch-runs {
    grid-template-columns: 1fr;
  }
}

/* WebDesk 2.9.0 Users & Permissions */
.user-settings-dialog{width:min(1180px,96vw)!important;height:min(820px,94vh)!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}.user-admin-toolbar{display:flex;align-items:center;gap:14px;padding:14px 0}.user-admin-grid{display:grid;grid-template-columns:310px minmax(0,1fr);gap:14px;min-height:0;flex:1}.user-list-panel,.user-editor-panel{border:1px solid var(--border,#2b2f38);border-radius:14px;padding:14px;min-height:0;background:rgba(255,255,255,.015)}.user-list-panel{overflow:auto}.user-editor-panel{display:flex;flex-direction:column;overflow:hidden}.webdesk-user-row{width:100%;text-align:left;border:1px solid #2b2f38;background:#111318;color:inherit;border-radius:10px;padding:10px;margin:0 0 7px;cursor:pointer}.webdesk-user-row.active{border-color:#a98516;background:#17150e}.webdesk-user-row strong,.webdesk-user-row small{display:block}.webdesk-user-row small{opacity:.65;margin-top:3px}.user-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.user-form-grid label>span{display:block;margin-bottom:5px;opacity:.8}.user-form-grid input,.user-form-grid select,.user-device-search{width:100%;box-sizing:border-box;background:#090a0d;color:inherit;border:1px solid #30343d;border-radius:10px;padding:10px}.user-active-label{display:flex!important;align-items:center;gap:8px;padding-top:24px}.user-active-label input{width:auto!important}.device-access-head{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-top:16px}.device-access-head h3,.device-access-head p{margin:0}.device-access-head p{opacity:.65;font-size:12px;margin-top:3px}.user-device-search{margin:12px 0 8px}.user-device-access-list{flex:1;min-height:180px;overflow:auto;border:1px solid #292d35;border-radius:11px;padding:8px}.user-site-group{margin-bottom:10px}.user-site-title{font-weight:600;padding:5px 6px;position:sticky;top:0;background:#111318}.user-device-check{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px}.user-device-check:hover{background:rgba(255,255,255,.035)}.user-device-check input{width:auto}.user-device-check small{opacity:.55;margin-left:auto}.settings-actions{margin-top:12px;display:flex;justify-content:flex-end;gap:8px}.settings-actions .danger{margin-right:auto;color:#ff7777}.user-access-disabled{opacity:.45;pointer-events:none}@media(max-width:800px){.user-admin-grid{grid-template-columns:1fr}.user-list-panel{max-height:180px}.user-form-grid{grid-template-columns:1fr}.user-settings-dialog{overflow:auto!important}}


/* ========================================================================
   WebDesk 2.9.1 - Site-level device selection in Users & Permissions
   ======================================================================== */
.user-site-select{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  cursor:pointer !important;
  z-index:2 !important;
}
.user-site-select-left{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  min-width:0 !important;
}
.user-site-select input.user-site-checkbox{
  width:auto !important;
  margin:0 !important;
  flex:0 0 auto !important;
}
.user-site-select small{
  margin-left:auto !important;
  opacity:.5 !important;
  font-weight:400 !important;
  white-space:nowrap !important;
}
.user-site-title:has(.user-site-checkbox:checked){
  background:rgba(215,172,56,.10) !important;
}
.user-site-title:has(.user-site-checkbox:indeterminate){
  background:rgba(215,172,56,.055) !important;
}
.user-site-group{
  border-radius:9px !important;
  overflow:visible !important;
}


/* ========================================================================
   WebDesk 2.9.2 - Mobile action buttons fix
   RustDesk / AnyDesk SVGs must stay compact like SSH / Epoptes / WEB.
   ======================================================================== */
@media (max-width: 768px) {
  .device-card .actions.actions-redesign {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    align-items: stretch !important;
  }

  .device-card .actions.actions-redesign .btn-action,
  .device-card .actions.actions-redesign .btn-more {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    flex: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }

  .device-card .actions.actions-redesign .action-app-svg,
  .device-card .actions.actions-redesign .action-rustdesk-svg,
  .device-card .actions.actions-redesign .action-anydesk-svg {
    display: inline-block !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    flex: 0 0 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    overflow: visible !important;
  }

  .device-card .actions.actions-redesign .epoptes-btn-icon {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    object-fit: contain !important;
    flex: 0 0 20px !important;
  }

  .device-card .actions.actions-redesign .action-terminal-icon,
  .device-card .actions.actions-redesign .action-globe,
  .device-card .actions.actions-redesign .action-edit-icon {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 20px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .device-card .actions.actions-redesign .btn-rustdesk-action {
    color: #25a9ff !important;
  }

  .device-card .actions.actions-redesign .btn-anydesk {
    color: #ff4d57 !important;
  }

  .device-card .actions.actions-redesign .action-more {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ========================================================================
   WebDesk 2.9.5 - responsive desktop table / keep ACTIONS fully visible
   ======================================================================== */
@media (min-width: 1051px) {
  .site-section,
  .site-card,
  .table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .site-card > .desktop-table,
  .desktop-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .desktop-table th,
  .desktop-table td {
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding-left: clamp(3px, .45vw, 7px) !important;
    padding-right: clamp(3px, .45vw, 7px) !important;
  }

  /* Percentages total 100%. Give ACTIONS enough room while allowing the
     information columns to shrink with the browser instead of forcing a
     horizontal desktop width. */
  .desktop-table th:nth-child(1),  .desktop-table td:nth-child(1)  { width: 6.5% !important; }
  .desktop-table th:nth-child(2),  .desktop-table td:nth-child(2)  { width: 8.5% !important; }
  .desktop-table th:nth-child(3),  .desktop-table td:nth-child(3)  { width: 7.5% !important; }
  .desktop-table th:nth-child(4),  .desktop-table td:nth-child(4)  { width: 7.5% !important; }
  .desktop-table th:nth-child(5),  .desktop-table td:nth-child(5)  { width: 8.0% !important; }
  .desktop-table th:nth-child(6),  .desktop-table td:nth-child(6)  { width: 10.5% !important; }
  .desktop-table th:nth-child(7),  .desktop-table td:nth-child(7)  { width: 6.0% !important; }
  .desktop-table th:nth-child(8),  .desktop-table td:nth-child(8)  { width: 6.0% !important; }
  .desktop-table th:nth-child(9),  .desktop-table td:nth-child(9)  { width: 6.0% !important; }
  .desktop-table th:nth-child(10), .desktop-table td:nth-child(10) { width: 7.0% !important; }
  .desktop-table th:nth-child(11), .desktop-table td:nth-child(11) { width: 9.0% !important; }
  .desktop-table th:nth-child(12), .desktop-table td:nth-child(12) { width: 17.5% !important; }

  .desktop-table th:nth-child(1),
  .desktop-table td:nth-child(1),
  .desktop-table th:nth-child(12),
  .desktop-table td:nth-child(12) {
    overflow: visible !important;
  }

  .desktop-table td:not(:nth-child(12)) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .desktop-table .version-cell {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .desktop-table .actions-redesign {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(1px, .28vw, 4px) !important;
    overflow: visible !important;
  }

  .desktop-table .actions-redesign .btn-action,
  .desktop-table .actions-redesign .btn-more {
    width: clamp(23px, 2.05vw, 32px) !important;
    min-width: clamp(23px, 2.05vw, 32px) !important;
    max-width: clamp(23px, 2.05vw, 32px) !important;
    height: clamp(23px, 2.05vw, 32px) !important;
    min-height: clamp(23px, 2.05vw, 32px) !important;
    flex: 0 0 clamp(23px, 2.05vw, 32px) !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .desktop-table .actions-redesign .action-app-svg,
  .desktop-table .actions-redesign svg,
  .desktop-table .actions-redesign img {
    width: clamp(15px, 1.25vw, 18px) !important;
    height: clamp(15px, 1.25vw, 18px) !important;
    min-width: 0 !important;
  }
}

/* Compact desktop/laptop widths: reduce table text slightly, but keep every
   action button visible and clickable. */
@media (min-width: 1051px) and (max-width: 1320px) {
  .desktop-table thead th,
  .desktop-table tbody td:not(:nth-child(12)),
  .desktop-table tbody td:not(:nth-child(12)) * {
    font-size: 10.5px !important;
  }

  .desktop-table th:nth-child(1),  .desktop-table td:nth-child(1)  { width: 6.0% !important; }
  .desktop-table th:nth-child(2),  .desktop-table td:nth-child(2)  { width: 8.0% !important; }
  .desktop-table th:nth-child(3),  .desktop-table td:nth-child(3)  { width: 7.0% !important; }
  .desktop-table th:nth-child(4),  .desktop-table td:nth-child(4)  { width: 7.0% !important; }
  .desktop-table th:nth-child(5),  .desktop-table td:nth-child(5)  { width: 7.5% !important; }
  .desktop-table th:nth-child(6),  .desktop-table td:nth-child(6)  { width: 10.0% !important; }
  .desktop-table th:nth-child(7),  .desktop-table td:nth-child(7)  { width: 5.5% !important; }
  .desktop-table th:nth-child(8),  .desktop-table td:nth-child(8)  { width: 5.5% !important; }
  .desktop-table th:nth-child(9),  .desktop-table td:nth-child(9)  { width: 5.5% !important; }
  .desktop-table th:nth-child(10), .desktop-table td:nth-child(10) { width: 6.5% !important; }
  .desktop-table th:nth-child(11), .desktop-table td:nth-child(11) { width: 8.0% !important; }
  .desktop-table th:nth-child(12), .desktop-table td:nth-child(12) { width: 23.5% !important; }
}

/* Below laptop width use the existing card layout rather than cutting the
   right side of the desktop table. */
@media (min-width: 761px) and (max-width: 1050px) {
  .desktop-table {
    display: none !important;
  }
  .mobile-cards {
    display: block !important;
  }
  .site-section,
  .site-card,
  .table-wrap,
  .mobile-cards {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
}

.action-flamerobin-icon{display:inline-flex;align-items:center;justify-content:center;min-width:18px;font-size:9px;font-weight:700;letter-spacing:-.2px}

/* ===== WEBDESK RESPONSIVE TABLE RIGHT-CUT FIX BEGIN =====
   2026-09: 12-column layout.
   Important: target semantic/end columns instead of legacy nth-child(10).
   Goal: keep the complete ACTIONS toolbar inside every device card.
*/
@media (min-width: 1100px) {
  /* The card must own the whole table width. */
  .group-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .desktop-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
  }

  .desktop-table th,
  .desktop-table td {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /*
   * Current columns:
   * status, hostname, rustdesk, anydesk, depot, version,
   * cpu, ram, disk, last seen, tags, actions
   *
   * Use proportions that total 100%. Text columns may ellipsize;
   * ACTIONS receives enough space and is never clipped by the TD.
   */
  .desktop-table th:nth-child(1),
  .desktop-table td:nth-child(1)  { width: 6.0% !important; }

  .desktop-table th:nth-child(2),
  .desktop-table td:nth-child(2)  { width: 8.5% !important; }

  .desktop-table th:nth-child(3),
  .desktop-table td:nth-child(3)  { width: 7.0% !important; }

  .desktop-table th:nth-child(4),
  .desktop-table td:nth-child(4)  { width: 7.0% !important; }

  .desktop-table th:nth-child(5),
  .desktop-table td:nth-child(5)  { width: 8.0% !important; }

  .desktop-table th:nth-child(6),
  .desktop-table td:nth-child(6)  { width: 9.5% !important; }

  .desktop-table th:nth-child(7),
  .desktop-table td:nth-child(7),
  .desktop-table th:nth-child(8),
  .desktop-table td:nth-child(8),
  .desktop-table th:nth-child(9),
  .desktop-table td:nth-child(9)  { width: 6.5% !important; }

  .desktop-table th:nth-child(10),
  .desktop-table td:nth-child(10) { width: 7.0% !important; }

  .desktop-table th:nth-child(11),
  .desktop-table td:nth-child(11) { width: 8.5% !important; }

  .desktop-table th:nth-child(12),
  .desktop-table td:nth-child(12),
  .desktop-table th:last-child,
  .desktop-table td:last-child {
    width: 21.5% !important;
  }

  /* Long values must not force the fixed table wider than the card. */
  .desktop-table td:not(:last-child),
  .desktop-table th:not(:last-child) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .desktop-table .version-cell,
  .desktop-table .depot-cell {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Tags may wrap inside their own cell, but may never grow the table. */
  .desktop-table th:nth-child(11),
  .desktop-table td:nth-child(11) {
    min-width: 0 !important;
    max-width: none !important;
  }

  .desktop-table td:nth-child(11) {
    overflow: hidden !important;
    white-space: normal !important;
  }

  .desktop-table td:nth-child(11) .tag {
    max-width: 100% !important;
  }

  /* ACTIONS: keep all buttons inside the final cell. */
  .desktop-table th:last-child,
  .desktop-table td:last-child {
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .desktop-table td:last-child {
    padding-left: 5px !important;
    padding-right: 8px !important;
  }

  .desktop-table td:last-child .actions,
  .desktop-table .actions {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  .desktop-table .actions > .btn,
  .desktop-table .actions > button,
  .desktop-table .actions > .action-more {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .desktop-table .actions .btn,
  .desktop-table .actions button {
    min-width: 0 !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  /* On tighter desktop widths the toolbar becomes icon-first/compact. */
  @media (max-width: 1550px) {
    .desktop-table th,
    .desktop-table td {
      padding-left: 5px !important;
      padding-right: 5px !important;
    }

    .desktop-table th:nth-child(12),
    .desktop-table td:nth-child(12),
    .desktop-table th:last-child,
    .desktop-table td:last-child {
      width: 23.5% !important;
    }

    .desktop-table th:nth-child(2),
    .desktop-table td:nth-child(2) { width: 8.0% !important; }

    .desktop-table th:nth-child(5),
    .desktop-table td:nth-child(5) { width: 7.0% !important; }

    .desktop-table th:nth-child(6),
    .desktop-table td:nth-child(6) { width: 8.5% !important; }

    .desktop-table th:nth-child(7),
    .desktop-table td:nth-child(7),
    .desktop-table th:nth-child(8),
    .desktop-table td:nth-child(8),
    .desktop-table th:nth-child(9),
    .desktop-table td:nth-child(9) { width: 6.0% !important; }

    .desktop-table th:nth-child(10),
    .desktop-table td:nth-child(10) { width: 6.5% !important; }

    .desktop-table th:nth-child(11),
    .desktop-table td:nth-child(11) { width: 7.5% !important; }

    .desktop-table .actions {
      gap: 4px !important;
    }

    .desktop-table .actions .btn,
    .desktop-table .actions button {
      padding-left: 6px !important;
      padding-right: 6px !important;
    }
  }

  /*
   * If the browser is narrow enough that 12 columns cannot stay readable,
   * do not clip the right edge. Allow a controlled horizontal scroll.
   */
  @media (max-width: 1250px) {
    .group-body {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    .desktop-table {
      min-width: 1180px !important;
    }
  }
}
/* ===== WEBDESK RESPONSIVE TABLE RIGHT-CUT FIX END ===== */

/* ===== WEBDESK TABLE BALANCE FIX BEGIN =====
   Better desktop balance:
   - ACTIONS always fully visible
   - less aggressive truncation of hostname/version/headers
   - CPU/RAM/DISK compact but readable
   - uses available width more efficiently
*/
@media (min-width: 1251px) {

  .desktop-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  .desktop-table th,
  .desktop-table td {
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  /*
   * 12 columns:
   * 1 status
   * 2 hostname
   * 3 rustdesk
   * 4 anydesk
   * 5 depot
   * 6 version
   * 7 cpu
   * 8 ram
   * 9 disk
   * 10 last seen
   * 11 tags
   * 12 actions
   *
   * Total = 100%
   */
  .desktop-table th:nth-child(1),
  .desktop-table td:nth-child(1)  { width: 5.0% !important; }

  .desktop-table th:nth-child(2),
  .desktop-table td:nth-child(2)  { width: 9.0% !important; }

  .desktop-table th:nth-child(3),
  .desktop-table td:nth-child(3)  { width: 6.5% !important; }

  .desktop-table th:nth-child(4),
  .desktop-table td:nth-child(4)  { width: 7.0% !important; }

  .desktop-table th:nth-child(5),
  .desktop-table td:nth-child(5)  { width: 8.5% !important; }

  .desktop-table th:nth-child(6),
  .desktop-table td:nth-child(6)  { width: 11.0% !important; }

  .desktop-table th:nth-child(7),
  .desktop-table td:nth-child(7),
  .desktop-table th:nth-child(8),
  .desktop-table td:nth-child(8),
  .desktop-table th:nth-child(9),
  .desktop-table td:nth-child(9)  { width: 6.0% !important; }

  .desktop-table th:nth-child(10),
  .desktop-table td:nth-child(10) { width: 7.0% !important; }

  .desktop-table th:nth-child(11),
  .desktop-table td:nth-child(11) { width: 8.0% !important; }

  .desktop-table th:nth-child(12),
  .desktop-table td:nth-child(12),
  .desktop-table th:last-child,
  .desktop-table td:last-child {
    width: 21.0% !important;
  }

  /* Default truncation for text-only cells */
  .desktop-table th:not(:last-child),
  .desktop-table td:not(:last-child) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Headers: slightly smaller so labels fit better */
  .desktop-table thead th {
    font-size: 12px !important;
    letter-spacing: 0 !important;
  }

  /* Allow the important value columns more usable space */
  .desktop-table .hostname-cell,
  .desktop-table .version-cell,
  .desktop-table .depot-cell {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Resource columns stay compact */
  .desktop-table th:nth-child(7),
  .desktop-table th:nth-child(8),
  .desktop-table th:nth-child(9),
  .desktop-table td:nth-child(7),
  .desktop-table td:nth-child(8),
  .desktop-table td:nth-child(9) {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* Tags can use two compact lines if necessary */
  .desktop-table td:nth-child(11) {
    white-space: normal !important;
    overflow: hidden !important;
    line-height: 1.15 !important;
  }

  .desktop-table td:nth-child(11) .tags,
  .desktop-table td:nth-child(11) .tag-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    max-height: 38px !important;
    overflow: hidden !important;
  }

  /* ACTIONS must never be clipped */
  .desktop-table th:last-child,
  .desktop-table td:last-child {
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  .desktop-table td:last-child {
    padding-left: 6px !important;
    padding-right: 8px !important;
  }

  .desktop-table td:last-child .actions,
  .desktop-table .actions {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    overflow: visible !important;
  }

  .desktop-table .actions > * {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  .desktop-table .actions .btn,
  .desktop-table .actions button,
  .desktop-table .action-more {
    min-width: 30px !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
  }
}

/* Fine tuning for common laptop/desktop widths */
@media (min-width: 1251px) and (max-width: 1500px) {

  .desktop-table th,
  .desktop-table td {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .desktop-table thead th {
    font-size: 11.5px !important;
  }

  .desktop-table th:nth-child(1),
  .desktop-table td:nth-child(1)  { width: 5.0% !important; }

  .desktop-table th:nth-child(2),
  .desktop-table td:nth-child(2)  { width: 8.5% !important; }

  .desktop-table th:nth-child(3),
  .desktop-table td:nth-child(3)  { width: 6.0% !important; }

  .desktop-table th:nth-child(4),
  .desktop-table td:nth-child(4)  { width: 6.5% !important; }

  .desktop-table th:nth-child(5),
  .desktop-table td:nth-child(5)  { width: 8.0% !important; }

  .desktop-table th:nth-child(6),
  .desktop-table td:nth-child(6)  { width: 10.5% !important; }

  .desktop-table th:nth-child(7),
  .desktop-table td:nth-child(7),
  .desktop-table th:nth-child(8),
  .desktop-table td:nth-child(8),
  .desktop-table th:nth-child(9),
  .desktop-table td:nth-child(9)  { width: 6.0% !important; }

  .desktop-table th:nth-child(10),
  .desktop-table td:nth-child(10) { width: 6.5% !important; }

  .desktop-table th:nth-child(11),
  .desktop-table td:nth-child(11) { width: 7.0% !important; }

  .desktop-table th:nth-child(12),
  .desktop-table td:nth-child(12),
  .desktop-table th:last-child,
  .desktop-table td:last-child {
    width: 24.0% !important;
  }

  .desktop-table .actions {
    gap: 4px !important;
  }

  .desktop-table .actions .btn,
  .desktop-table .actions button,
  .desktop-table .action-more {
    min-width: 29px !important;
    width: 29px !important;
    height: 29px !important;
  }
}
/* ===== WEBDESK TABLE BALANCE FIX END ===== */


/* WEBDESK STATUS PUNCTUATION FIX */
/* Hide punctuation supplied through pseudo-elements after status labels. */
.status-online::after,
.status-offline::after,
.status.online::after,
.status.offline::after,
.online-status::after,
.offline-status::after {
  content: none !important;
}

/* ===== WEBDESK STATUS ELLIPSIS FIX BEGIN =====
   OFFLINE did not contain a real period.
   The first STATUS cell was being truncated by text-overflow: ellipsis,
   which visually produced "OFFLINE." / "OFFLINE...".
*/
@media (min-width: 1251px) {
  /* Give STATUS enough room for the longer OFFLINE label. */
  .desktop-table th:nth-child(1),
  .desktop-table td:nth-child(1) {
    width: 6.5% !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .desktop-table td:nth-child(1) .status {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* Rebalance the space so the complete table still remains at 100%. */
  .desktop-table th:nth-child(2),
  .desktop-table td:nth-child(2) {
    width: 8.5% !important;
  }

  .desktop-table th:nth-child(11),
  .desktop-table td:nth-child(11) {
    width: 7.0% !important;
  }

  .desktop-table th:nth-child(12),
  .desktop-table td:nth-child(12),
  .desktop-table th:last-child,
  .desktop-table td:last-child {
    width: 20.5% !important;
  }
}

/* At narrower widths do not ellipsize STATUS either. */
@media (max-width: 1250px) {
  .desktop-table th:first-child,
  .desktop-table td:first-child,
  .desktop-table td:first-child .status {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .desktop-table th:first-child,
  .desktop-table td:first-child {
    min-width: 92px !important;
    width: 92px !important;
  }
}
/* ===== WEBDESK STATUS ELLIPSIS FIX END ===== */


/* =========================================================
   WEBDESK DEVICE EDIT LAYOUT FIX
   ========================================================= */

.edit-row > td {
  padding:0 !important;
  overflow:visible !important;
}

.edit-panel {
  width:100%;
  box-sizing:border-box;
  padding:18px 22px 20px;
}

.meta-form {
  width:100%;
  min-width:0;
}

.meta-form .edit-grid {
  display:grid;
  grid-template-columns:
    minmax(180px, 1fr)
    minmax(220px, 1.15fr)
    minmax(220px, 1.15fr)
    minmax(260px, 1.5fr);
  gap:12px;
  width:100%;
  margin-bottom:12px;
}

.meta-form .edit-grid > * {
  min-width:0;
  width:100%;
  box-sizing:border-box;
}

.meta-form .edit-grid-full {
  display:block;
  width:100%;
}

.meta-form .edit-grid-full textarea {
  display:block;
  width:100%;
  min-width:0;
  min-height:100px;
  box-sizing:border-box;
}

.meta-form .edit-actions {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  margin-top:12px;
  min-height:40px;
}

.meta-form .edit-actions .btn,
.meta-form .edit-actions button {
  width:auto !important;
  min-width:100px;
  min-height:38px;
  flex:0 0 auto;
  box-sizing:border-box;
  white-space:nowrap;
}

.meta-form .edit-actions .edit-save-btn {
  min-width:110px;
}

.meta-form .edit-actions .edit-clear-btn {
  min-width:150px;
}


/* Medium desktop/table widths */
@media (max-width: 1400px) {

  .meta-form .edit-grid {
    grid-template-columns:
      repeat(2, minmax(240px, 1fr));
  }

}


/* Narrow layout */
@media (max-width: 800px) {

  .edit-panel {
    padding:14px;
  }

  .meta-form .edit-grid {
    grid-template-columns:1fr;
  }

  .meta-form .edit-actions {
    flex-wrap:wrap;
  }

  .meta-form .edit-actions .btn,
  .meta-form .edit-actions button {
    min-width:130px;
  }

}


/* =========================================================
   WEBDESK DEVICE EDIT COMPACT PASS
   ========================================================= */

.edit-panel {
  padding:14px 18px 16px;
}

.meta-form .edit-grid {
  gap:9px;
  margin-bottom:9px;
}

.meta-form .edit-grid-full textarea {
  min-height:74px;
  max-height:140px;
  padding-top:9px;
  padding-bottom:9px;
}

.meta-form .edit-actions {
  margin-top:9px;
  gap:8px;
  min-height:36px;
}

.meta-form .edit-actions .btn,
.meta-form .edit-actions button {
  min-height:34px;
  padding:7px 12px;
}

.meta-form .edit-actions .edit-save-btn {
  min-width:90px;
}

.meta-form .edit-actions .edit-clear-btn {
  min-width:135px;
}

@media (max-width: 800px) {
  .edit-panel {
    padding:12px;
  }

  .meta-form .edit-grid-full textarea {
    min-height:82px;
  }
}

/* ========================================================================
   WebDesk - Saved script full name visibility
   Long script names may use up to two lines instead of being truncated.
   Description and command preview remain compact.
   ======================================================================== */

.script-library-item {
  grid-template-columns: minmax(190px, 42%) minmax(0, 1fr) !important;
  min-height: 48px !important;
  max-height: 68px !important;
}

.script-library-name {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;

  line-height: 1.25 !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.script-library-name strong {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.script-library-desc,
.script-library-command {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Short laptop screens */
@media (min-width: 901px) and (max-height: 820px) {
  .script-library-item {
    grid-template-columns: minmax(175px, 42%) minmax(0, 1fr) !important;
    min-height: 46px !important;
    max-height: 64px !important;
  }

  .script-library-name {
    max-width: none !important;
    font-size: 11px !important;
  }
}

/* Narrow/mobile view: give script name the full row width */
@media (max-width: 900px) {
  .script-library-item {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    max-height: none !important;
  }

  .script-library-name {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .script-library-desc {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .script-library-command {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
}


/* ============================================================
   WEBDESK DEVICE DETAILS MODAL
   ============================================================ */

.wd-device-hostname {
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:none;
  color:#f4f7ff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  text-align:left;
  white-space:nowrap;
  transition:color .15s ease, text-shadow .15s ease;
}

.wd-device-hostname:hover {
  color:#ffffff;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
  text-shadow:0 0 18px rgba(var(--accent-rgb), .45);
}

body.wd-device-modal-open {
  overflow:hidden;
}

.wd-device-modal[hidden] {
  display:none !important;
}

.wd-device-modal {
  position:fixed;
  inset:0;
  z-index:100000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}

.wd-device-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(1,4,12,.78);
  backdrop-filter:blur(8px);
}

.wd-device-dialog {
  position:relative;
  z-index:1;
  width:min(1180px, calc(100vw - 48px));
  max-height:calc(100vh - 56px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  background:
    radial-gradient(circle at 80% 0%, rgba(var(--accent-rgb),.13), transparent 32%),
    linear-gradient(180deg, rgba(20,24,34,.98), rgba(7,10,17,.99));
  box-shadow:
    0 40px 120px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.wd-device-dialog-header {
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:20px 24px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.wd-device-heading {
  display:flex;
  align-items:center;
  min-width:0;
  gap:15px;
}

.wd-device-heading-text {
  min-width:0;
}

.wd-device-title-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.wd-device-title-row h2 {
  margin:0;
  color:#f7f9ff;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-.02em;
}

.wd-device-subtitle {
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
}

.wd-device-status-dot {
  width:15px;
  height:15px;
  border-radius:999px;
  flex:0 0 auto;
  background:var(--red);
  box-shadow:0 0 18px currentColor;
}

.wd-device-status-dot.online {
  background:var(--green);
  color:var(--green);
}

.wd-device-status-dot.offline {
  background:var(--red);
  color:var(--red);
}

.wd-device-status-badge {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.10);
}

.wd-device-status-badge.online {
  color:var(--green);
  background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.20);
}

.wd-device-status-badge.offline {
  color:var(--red);
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.20);
}

.wd-device-close {
  appearance:none;
  width:42px;
  height:42px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:#dce5f5;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}

.wd-device-close:hover {
  background:rgba(255,255,255,.07);
  color:#fff;
}

.wd-device-tabs {
  display:flex;
  gap:6px;
  overflow-x:auto;
  padding:12px 20px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.wd-device-tab {
  appearance:none;
  position:relative;
  flex:0 0 auto;
  min-height:43px;
  padding:0 16px;
  border:0;
  background:transparent;
  color:#8fa1ba;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}

.wd-device-tab:hover {
  color:#dce7f7;
}

.wd-device-tab.active {
  color:#fff;
}

.wd-device-tab.active:after {
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:-1px;
  height:2px;
  border-radius:999px 999px 0 0;
  background:var(--accent);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.5);
}

.wd-device-loading {
  padding:50px 24px;
  text-align:center;
  color:#9eb0c7;
}

.wd-device-content {
  overflow:auto;
  padding:20px;
}

.wd-device-panel {
  display:none;
}

.wd-device-panel.active {
  display:block;
}

.wd-device-section-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.wd-device-history-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}

.wd-device-card {
  min-width:0;
  border:1px solid rgba(255,255,255,.075);
  border-radius:17px;
  padding:17px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.018));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 12px 35px rgba(0,0,0,.10);
}

.wd-device-card-wide {
  grid-column:1 / -1;
}

.wd-device-card-title {
  margin-bottom:14px;
  color:#f1f5ff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.wd-device-kv-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px 20px;
}

.wd-device-kv-grid > div {
  min-width:0;
}

.wd-device-kv-grid span {
  display:block;
  margin-bottom:3px;
  color:#8293ac;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.wd-device-kv-grid strong {
  display:block;
  overflow-wrap:anywhere;
  color:#e7edf8;
  font-size:13px;
  font-weight:750;
}

.wd-device-metric + .wd-device-metric {
  margin-top:15px;
}

.wd-device-metric-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
  color:#9eafc5;
  font-size:12px;
  font-weight:800;
}

.wd-device-metric-head strong {
  color:#e9eef8;
}

.wd-device-meter {
  height:9px;
  overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
}

.wd-device-meter span {
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  transition:width .28s ease;
}

.wd-device-meter.cpu span {
  background:linear-gradient(90deg, rgba(34,197,94,.95), rgba(245,158,11,.95), rgba(239,68,68,.98));
}

.wd-device-meter.ram span {
  background:linear-gradient(90deg, rgba(212,175,55,.88), rgba(255,255,255,.82));
}

.wd-device-meter.disk span {
  background:linear-gradient(90deg, rgba(91,140,255,.88), rgba(255,255,255,.82));
}

.wd-device-tags {
  min-height:25px;
}

.wd-device-notes,
.wd-device-detail-block,
.wd-device-empty-info {
  color:#c7d2e3;
  font-size:13px;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.wd-device-empty-info {
  color:#7f91a9;
}

.wd-device-service-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.wd-device-service-row:last-child {
  border-bottom:0;
}

.wd-device-service-row span {
  color:#8fa0b8;
  font-size:12px;
}

.wd-device-service-row strong {
  color:#e9eef7;
  font-size:12px;
}

.wd-device-history-chart {
  height:125px;
  display:flex;
  align-items:flex-end;
  gap:5px;
  padding:8px 2px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.wd-device-history-chart > span {
  flex:1 1 0;
  min-width:3px;
  max-width:24px;
  border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),.95), rgba(var(--accent-rgb),.28));
  box-shadow:0 0 12px rgba(var(--accent-rgb),.14);
}

.wd-device-history-empty {
  margin:auto;
  align-self:center;
  color:#71849d;
  font-size:12px;
}

.wd-device-history-meta {
  padding-top:11px;
  color:#7f91aa;
  font-size:11px;
  line-height:1.5;
}

.wd-device-dialog-footer {
  padding:15px 20px 20px;
  border-top:1px solid rgba(255,255,255,.075);
  background:rgba(0,0,0,.10);
}

.wd-device-footer-label {
  margin-bottom:9px;
  color:#8294ad;
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.wd-device-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.wd-device-action {
  appearance:none;
  min-height:37px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  color:#dfe8f6;
  text-decoration:none;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.wd-device-action:hover {
  color:#fff;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
}

.wd-device-action.web {
  border-color:rgba(91,140,255,.28);
}

.wd-device-action.rustdesk {
  border-color:rgba(34,197,94,.24);
}

.wd-device-action.anydesk {
  border-color:rgba(239,68,68,.28);
}

.wd-device-action.disabled {
  opacity:.35;
  cursor:not-allowed;
  pointer-events:none;
}

@media (max-width:900px) {
  .wd-device-modal {
    padding:10px;
  }

  .wd-device-dialog {
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
    border-radius:18px;
  }

  .wd-device-dialog-header {
    padding:16px;
  }

  .wd-device-section-grid,
  .wd-device-history-grid {
    grid-template-columns:1fr;
  }

  .wd-device-card-wide {
    grid-column:auto;
  }

  .wd-device-kv-grid {
    grid-template-columns:1fr;
  }

  .wd-device-content {
    padding:13px;
  }

  .wd-device-dialog-footer {
    padding:13px;
  }

  .wd-device-action {
    flex:1 1 calc(50% - 8px);
  }
}



/* ============================================================
   WEBDESK DEVICE DETAILS MODAL V2
   ============================================================ */

.wd-device-dialog {
  width:min(1120px, calc(100vw - 56px));
  max-height:min(850px, calc(100vh - 54px));
}

.wd-device-dialog-header {
  min-height:76px;
  padding:15px 18px;
}

.wd-device-title-row h2 {
  font-size:23px;
}

.wd-device-subtitle {
  margin-top:3px;
}

.wd-device-position {
  margin-top:3px;
  color:#657991;
  font-size:10px;
  font-weight:700;
  letter-spacing:.03em;
}

.wd-device-header-actions {
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

.wd-device-header-btn {
  appearance:none;
  width:36px;
  height:36px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  color:#b9c7da;
  font-family:inherit;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    opacity .15s ease;
}

.wd-device-header-btn:hover:not(:disabled) {
  color:#fff;
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.14);
}

.wd-device-header-btn:disabled {
  opacity:.24;
  cursor:default;
}

.wd-device-refresh {
  font-size:18px;
}

.wd-device-close {
  width:36px;
  height:36px;
  border-radius:11px;
  font-size:23px;
}

.wd-device-tabs {
  padding:7px 16px 0;
}

.wd-device-tab {
  min-height:37px;
  padding:0 14px;
  font-size:12px;
}

.wd-device-content {
  padding:14px 16px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}

.wd-device-content::-webkit-scrollbar {
  width:8px;
}

.wd-device-content::-webkit-scrollbar-track {
  background:transparent;
}

.wd-device-content::-webkit-scrollbar-thumb {
  border-radius:999px;
  background:rgba(255,255,255,.16);
}

.wd-device-section-grid {
  gap:11px;
}

.wd-device-history-grid {
  gap:11px;
}

.wd-device-card {
  padding:13px 14px;
  border-radius:14px;
}

.wd-device-card-title {
  margin-bottom:10px;
  font-size:11px;
}

.wd-device-kv-grid {
  gap:9px 18px;
}

.wd-device-kv-grid span {
  margin-bottom:2px;
  font-size:9px;
}

.wd-device-kv-grid strong {
  font-size:12px;
}

.wd-device-metric + .wd-device-metric {
  margin-top:10px;
}

.wd-device-metric-head {
  margin-bottom:5px;
  font-size:11px;
}

.wd-device-meter {
  height:7px;
}

.wd-device-notes,
.wd-device-detail-block,
.wd-device-empty-info {
  font-size:12px;
  line-height:1.42;
}

.wd-device-dialog-footer {
  flex:0 0 auto;
  padding:10px 16px 12px;
  border-top:1px solid rgba(255,255,255,.07);
}

.wd-device-footer-label {
  margin-bottom:6px;
  font-size:9px;
}

.wd-device-actions {
  gap:6px;
}

.wd-device-action {
  min-height:32px;
  padding:0 11px;
  border-radius:9px;
  font-size:10px;
}

.wd-device-history-chart {
  height:105px;
}

.device-card-title.wd-device-hostname {
  display:block;
  width:auto;
}

@media (min-width:901px) and (min-height:760px) {
  .wd-device-panel[data-device-panel="overview"].active .wd-device-section-grid {
    grid-template-columns:1fr 1fr;
  }

  .wd-device-panel[data-device-panel="overview"] .wd-device-card:nth-child(3) {
    padding-top:12px;
    padding-bottom:12px;
  }

  .wd-device-panel[data-device-panel="overview"] .wd-device-card:nth-child(4),
  .wd-device-panel[data-device-panel="overview"] .wd-device-card:nth-child(5) {
    padding-top:11px;
    padding-bottom:11px;
  }
}

@media (max-width:900px) {
  .wd-device-dialog {
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
  }

  .wd-device-dialog-header {
    padding:13px;
  }

  .wd-device-title-row h2 {
    font-size:19px;
  }

  .wd-device-header-actions {
    gap:4px;
  }

  .wd-device-header-btn,
  .wd-device-close {
    width:34px;
    height:34px;
  }

  .wd-device-content {
    padding:10px;
  }

  .wd-device-dialog-footer {
    padding:9px 10px 10px;
  }
}



/* ==========================================================
   WEBDESK CONNECTED DEVICES
   ========================================================== */

.wd-connected-wrap {
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:300px;
}

.wd-connected-toolbar {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.018);
}

.wd-connected-summary {
  margin-top:5px;
  color:#7f91aa;
  font-size:11px;
}

.wd-connected-controls {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.wd-connected-filters {
  display:flex;
  gap:3px;
  padding:3px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:#0b0f16;
}

.wd-connected-filter {
  border:0;
  min-height:28px;
  padding:0 10px;
  border-radius:6px;
  background:transparent;
  color:#8290a4;
  cursor:pointer;
  font-size:11px;
  font-weight:700;
}

.wd-connected-filter:hover {
  color:#fff;
}

.wd-connected-filter.active {
  background:#1a2432;
  color:#fff;
}

.wd-connected-search {
  width:220px;
  height:34px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  outline:none;
  background:#090d13;
  color:#e7edf7;
  font-size:12px;
}

.wd-connected-search:focus {
  border-color:rgba(70,140,255,.55);
  box-shadow:0 0 0 2px rgba(70,140,255,.08);
}

.wd-connected-refresh {
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px;
  background:#0b0f16;
  color:#c0cbda;
  cursor:pointer;
  font-size:16px;
}

.wd-connected-refresh:hover {
  background:#161e29;
  color:#fff;
}

.wd-connected-loading {
  padding:2px 4px;
  color:#89a3c6;
  font-size:12px;
}

.wd-connected-error {
  padding:10px 12px;
  border:1px solid rgba(255,80,80,.18);
  border-radius:8px;
  background:rgba(255,70,70,.07);
  color:#ff9696;
  font-size:12px;
  white-space:pre-wrap;
}

.wd-connected-table-wrap {
  max-height:430px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:#0a0e14;
}

.wd-connected-table {
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}

.wd-connected-table th {
  position:sticky;
  top:0;
  z-index:2;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#111720;
  color:#7f91aa;
  text-align:left;
  white-space:nowrap;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.wd-connected-table td {
  padding:9px 12px;
  border-bottom:1px solid rgba(255,255,255,.045);
  color:#cbd5e3;
  white-space:nowrap;
}

.wd-connected-table tbody tr:last-child td {
  border-bottom:0;
}

.wd-connected-table tbody tr:hover td {
  background:rgba(255,255,255,.024);
}

.wd-connected-type {
  color:#edf3fb;
  font-weight:800;
}

.wd-connected-number {
  color:#9baabc;
}

.wd-connected-mono {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  font-size:11px;
}

.wd-connected-status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.035em;
}

.wd-connected-status i {
  display:block;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#707c8e;
}

.wd-connected-status.online {
  color:#51d488;
}

.wd-connected-status.online i {
  background:#31d376;
  box-shadow:0 0 8px rgba(49,211,118,.5);
}

.wd-connected-status.offline {
  color:#ff7777;
}

.wd-connected-status.offline i {
  background:#ff5757;
  box-shadow:0 0 8px rgba(255,87,87,.35);
}

.wd-connected-status.unknown {
  color:#9aa7b8;
}

.wd-connected-empty {
  padding:28px 14px !important;
  color:#71839a !important;
  text-align:center !important;
}

@media (max-width:900px) {

  .wd-connected-toolbar {
    flex-direction:column;
    align-items:stretch;
  }

  .wd-connected-controls {
    justify-content:flex-start;
  }

  .wd-connected-search {
    width:100%;
    flex:1 1 180px;
  }
}



/* ==========================================================
   WEBDESK CONNECTED DEVICES SORT
   ========================================================== */

.wd-connected-sort {
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
  white-space:nowrap;
}

.wd-connected-sort:hover {
  color:#ffffff;
}

.wd-connected-sort span {
  min-width:9px;
  color:#56667a;
  font-size:10px;
  line-height:1;
}

.wd-connected-sort:hover span {
  color:#94a6bd;
}

.wd-connected-sort.active {
  color:#ffffff;
}

.wd-connected-sort.active span {
  color:#d8b95d;
}


/* Reverse SSH actual tunnel health */
.wd-tunnel-health-card {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

.wd-tunnel-health-card.healthy {
  border-color: rgba(51,214,127,.35);
}

.wd-tunnel-health-card.warning {
  border-color: rgba(255,184,77,.35);
}

.wd-tunnel-health-card.danger {
  border-color: rgba(255,86,86,.42);
}

.wd-tunnel-health-card.muted {
  opacity: .86;
}

.wd-tunnel-health-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.wd-tunnel-health-title {
  font-weight: 800;
  font-size: 15px;
}

.wd-tunnel-health-subtitle {
  margin-top: 4px;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  line-height: 1.4;
}

.wd-tunnel-health-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
  background: rgba(255,255,255,.08);
}

.wd-tunnel-health-badge.healthy {
  color: #61e39a;
  background: rgba(51,214,127,.10);
}

.wd-tunnel-health-badge.false_active,
.wd-tunnel-health-badge.closed,
.wd-tunnel-health-badge.error {
  color: #ff7373;
  background: rgba(255,86,86,.11);
}

.wd-tunnel-health-badge.unverified {
  color: #ffc56e;
  background: rgba(255,184,77,.11);
}

.wd-tunnel-health-badge.not_configured {
  color: rgba(255,255,255,.65);
}

.wd-tunnel-health-badge.checking {
  color: #7eb7ff;
  background: rgba(64,145,255,.10);
}

.wd-tunnel-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.wd-tunnel-health-grid > div {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}

.wd-tunnel-health-grid span {
  display: block;
  margin-bottom: 5px;
  color: rgba(255,255,255,.48);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.wd-tunnel-health-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.wd-tunnel-health-detail {
  margin-top: 12px;
  color: rgba(255,255,255,.52);
  font-size: 11px;
  line-height: 1.45;
  word-break: break-word;
}

@media (max-width: 900px) {
  .wd-tunnel-health-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 560px) {
  .wd-tunnel-health-grid {
    grid-template-columns: 1fr;
  }

  .wd-tunnel-health-head {
    flex-direction: column;
  }
}

/* ============================================================
   WEBDESK DEVICE DETAILS POLISH 2026-09
   Visual-only refinement.
   No backend / API / device logic changes.
   ============================================================ */

/* ---------- MODAL SHELL ---------- */

.wd-device-modal {
  --wd-modal-border: rgba(255,255,255,.085);
  --wd-modal-border-soft: rgba(255,255,255,.055);
  --wd-modal-surface: rgba(17,19,23,.96);
  --wd-modal-card: rgba(255,255,255,.027);
  --wd-modal-card-hover: rgba(255,255,255,.038);
  --wd-modal-muted: rgba(255,255,255,.52);
  --wd-modal-soft: rgba(255,255,255,.72);
  --wd-modal-shadow:
    0 32px 90px rgba(0,0,0,.55),
    0 4px 18px rgba(0,0,0,.28);
}

.wd-device-dialog,
.wd-device-modal-dialog,
.wd-device-modal > .wd-device-shell {
  width: min(1180px, calc(100vw - 42px));
  max-height: min(900px, calc(100vh - 42px));
  border: 1px solid var(--wd-modal-border);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(64,140,255,.065),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(20,22,27,.985),
      rgba(13,15,18,.985)
    );
  box-shadow: var(--wd-modal-shadow);
  overflow: hidden;
}


/* ---------- HEADER ---------- */

.wd-device-head,
.wd-device-header {
  padding: 19px 22px 16px;
  border-bottom: 1px solid var(--wd-modal-border-soft);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.006)
    );
}

#wdDeviceTitle {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -.025em;
  color: rgba(255,255,255,.96);
}

#wdDeviceSubtitle {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--wd-modal-muted);
  letter-spacing: .015em;
}


/* ---------- HEADER CONTROLS ---------- */

.wd-device-head .btn,
.wd-device-header .btn,
.wd-device-nav button,
.wd-device-nav .btn {
  min-height: 34px;
  border-radius: 10px;
  border-color: rgba(255,255,255,.085);
  background: rgba(255,255,255,.035);
  box-shadow: none;
}

.wd-device-head .btn:hover,
.wd-device-header .btn:hover,
.wd-device-nav button:hover,
.wd-device-nav .btn:hover {
  background: rgba(255,255,255,.065);
  border-color: rgba(255,255,255,.13);
  transform: none;
}


/* ---------- TABS ---------- */

.wd-device-tabs {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--wd-modal-border-soft);
  background: rgba(8,10,13,.62);
  scrollbar-width: none;
}

.wd-device-tabs::-webkit-scrollbar {
  display: none;
}

.wd-device-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .015em;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.wd-device-tab:hover {
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.035);
}

.wd-device-tab.active {
  color: #fff;
  border-color: rgba(74,150,255,.24);
  background:
    linear-gradient(
      180deg,
      rgba(55,135,255,.17),
      rgba(55,135,255,.085)
    );
  box-shadow:
    inset 0 0 0 1px rgba(80,155,255,.035);
}

.wd-device-tab.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -9px;
  height: 2px;
  border-radius: 99px;
  background: #3b8cff;
  box-shadow: 0 0 11px rgba(59,140,255,.65);
}


/* ---------- CONTENT ---------- */

#wdDeviceContent {
  padding: 17px 18px 18px;
}

.wd-device-panel {
  animation: wdDevicePanelIn .13s ease-out;
}

@keyframes wdDevicePanelIn {
  from {
    opacity: .72;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}


/* ---------- CARD GRID ---------- */

.wd-device-section-grid {
  display: grid;
  gap: 13px;
}

.wd-device-card {
  position: relative;
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid var(--wd-modal-border-soft);
  border-radius: 16px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.027),
      rgba(255,255,255,.016)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018);
  transition:
    border-color .16s ease,
    background .16s ease;
}

.wd-device-card:hover {
  transform: none;
  border-color: rgba(255,255,255,.09);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.021)
    );
}

.wd-device-card-title {
  margin-bottom: 13px;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 850;
  letter-spacing: .065em;
  text-transform: uppercase;
}


/* ---------- INFO ROWS ---------- */

.wd-device-service-row,
.wd-device-info-row {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.045);
}

.wd-device-service-row:last-child,
.wd-device-info-row:last-child {
  border-bottom: 0;
}

.wd-device-service-row > span,
.wd-device-info-row > span {
  min-width: 0;
  color: rgba(255,255,255,.50);
  font-size: 12px;
  font-weight: 550;
}

.wd-device-service-row > strong,
.wd-device-info-row > strong {
  min-width: 0;
  max-width: 68%;
  overflow-wrap: anywhere;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 750;
  text-align: right;
}


/* ---------- METRICS ---------- */

.wd-device-metric,
.wd-device-progress {
  margin-top: 12px;
}

.wd-device-meter,
.wd-device-progress-track,
.wd-device-metric-track {
  height: 6px !important;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255,255,255,.065);
}

.wd-device-meter > span,
.wd-device-progress-track > span,
.wd-device-metric-track > span {
  border-radius: inherit;
}


/* ---------- REVERSE SSH HEALTH ---------- */

.wd-tunnel-health-card {
  overflow: hidden;
}

.wd-tunnel-health-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 17px;
  right: 17px;
  height: 1px;
  opacity: .7;
}

.wd-tunnel-health-card.healthy::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(47,211,121,.7),
      transparent
    );
}

.wd-tunnel-health-card.warning::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(247,183,49,.75),
      transparent
    );
}

.wd-tunnel-health-card.danger::before {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,79,92,.78),
      transparent
    );
}

.wd-tunnel-health-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.wd-tunnel-health-subtitle {
  max-width: 610px;
  margin-top: 4px;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  line-height: 1.45;
}

.wd-tunnel-health-badge {
  flex: 0 0 auto;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 7px;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .055em;
  box-shadow: none;
}

.wd-tunnel-health-badge.healthy {
  border: 1px solid rgba(47,211,121,.27);
  background: rgba(47,211,121,.095);
}

.wd-tunnel-health-badge.false_active,
.wd-tunnel-health-badge.closed,
.wd-tunnel-health-badge.error {
  border: 1px solid rgba(255,75,92,.28);
  background: rgba(255,75,92,.095);
}

.wd-tunnel-health-badge.unverified {
  border: 1px solid rgba(245,179,44,.27);
  background: rgba(245,179,44,.09);
}

.wd-tunnel-health-badge.not_configured,
.wd-tunnel-health-badge.checking {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
}

.wd-tunnel-health-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.045);
  color: rgba(255,255,255,.42);
  font-size: 10.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}


/* ---------- CONNECTED DEVICES ---------- */

.wd-connected-toolbar,
.wd-device-connected-toolbar {
  gap: 9px;
  margin-bottom: 12px;
}

.wd-connected-toolbar input,
.wd-connected-toolbar select,
.wd-device-connected-toolbar input,
.wd-device-connected-toolbar select {
  min-height: 35px;
  border-radius: 9px;
  border-color: rgba(255,255,255,.075);
  background: rgba(255,255,255,.028);
}

.wd-connected-table-wrap,
.wd-device-table-wrap {
  overflow: auto;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 13px;
  background: rgba(0,0,0,.11);
}

.wd-connected-table,
.wd-device-table {
  border-collapse: separate;
  border-spacing: 0;
}

.wd-connected-table th,
.wd-device-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgba(17,19,23,.98);
  color: rgba(255,255,255,.47);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.wd-connected-table td,
.wd-device-table td {
  border-top-color: rgba(255,255,255,.04);
}

.wd-connected-table tbody tr:hover td,
.wd-device-table tbody tr:hover td {
  background: rgba(255,255,255,.024);
}


/* ---------- HISTORY ---------- */

.wd-device-history-card,
.wd-history-card {
  border-radius: 16px;
}

.wd-device-history-grid,
.wd-history-grid {
  gap: 13px;
}


/* ---------- QUICK ACTIONS ---------- */

.wd-device-actions,
.wd-device-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.wd-device-actions .btn,
.wd-device-quick-actions .btn {
  min-height: 35px;
  padding: 7px 12px;
  border-radius: 9px;
  box-shadow: none;
  font-size: 11px;
  font-weight: 750;
}

.wd-device-actions .btn:hover,
.wd-device-quick-actions .btn:hover {
  transform: none;
}


/* ---------- LOADING ---------- */

#wdDeviceLoading {
  padding: 48px 22px;
  color: rgba(255,255,255,.48);
  font-size: 12px;
  text-align: center;
}


/* ---------- SCROLLBAR ---------- */

.wd-device-modal * {
  scrollbar-width: thin;
  scrollbar-color:
    rgba(255,255,255,.15)
    rgba(255,255,255,.025);
}

.wd-device-modal *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.wd-device-modal *::-webkit-scrollbar-track {
  background: rgba(255,255,255,.02);
}

.wd-device-modal *::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 99px;
  background:
    rgba(255,255,255,.14)
    padding-box;
}

.wd-device-modal *::-webkit-scrollbar-thumb:hover {
  background:
    rgba(255,255,255,.22)
    padding-box;
}


/* ---------- RESPONSIVE ---------- */

@media (min-width: 1050px) {
  .wd-device-section-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .wd-tunnel-health-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1049px) {
  .wd-device-section-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .wd-device-dialog,
  .wd-device-modal-dialog,
  .wd-device-modal > .wd-device-shell {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    border-radius: 16px;
  }

  .wd-device-head,
  .wd-device-header {
    padding: 15px 15px 13px;
  }

  #wdDeviceTitle {
    font-size: 20px;
  }

  .wd-device-tabs {
    padding-left: 8px;
    padding-right: 8px;
  }

  #wdDeviceContent {
    padding: 11px;
  }

  .wd-device-card {
    padding: 14px;
    border-radius: 13px;
  }

  .wd-device-service-row,
  .wd-device-info-row {
    gap: 12px;
  }

  .wd-device-service-row > strong,
  .wd-device-info-row > strong {
    max-width: 58%;
  }

  .wd-tunnel-health-head {
    flex-direction: column;
  }
}



/* ============================================================
   WEBDESK ATTENDANT MENU 2026-09
   ============================================================ */

.wd-connected-action-head {
  width: 112px;
  text-align: right;
}

.wd-connected-action {
  width: 112px;
  text-align: right;
  white-space: nowrap;
}

.wd-attendant-open-btn,
.wd-attendant-all-btn {
  border: 1px solid rgba(65,145,255,.28);
  background: rgba(65,145,255,.085);
  color: rgba(220,235,255,.96);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 750;
  cursor: pointer;
  transition:
    background .15s ease,
    border-color .15s ease;
}

.wd-attendant-open-btn {
  min-height: 29px;
  padding: 5px 9px;
}

.wd-attendant-all-btn {
  min-height: 35px;
  padding: 6px 11px;
}

.wd-attendant-open-btn:hover,
.wd-attendant-all-btn:hover {
  background: rgba(65,145,255,.15);
  border-color: rgba(65,145,255,.45);
}

.wd-connected-no-action {
  color: rgba(255,255,255,.25);
}

@media (max-width: 800px) {

  .wd-attendant-all-btn {
    min-height: 33px;
    padding: 5px 8px;
  }

}



/* ============================================================
   WEBDESK ATTENDANT MODAL 2026-09
   ============================================================ */

.wd-attendant-modal[hidden] {
  display: none !important;
}

.wd-attendant-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.wd-attendant-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(5px);
}

.wd-attendant-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(430px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      rgba(24,27,33,.99),
      rgba(15,17,21,.99)
    );
  box-shadow:
    0 30px 90px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.wd-attendant-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 21px 17px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.wd-attendant-modal-kicker {
  margin-bottom: 5px;
  color: rgba(81,157,255,.90);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.wd-attendant-modal-head h3 {
  margin: 0;
  color: rgba(255,255,255,.96);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.015em;
}

.wd-attendant-modal-target {
  margin-top: 6px;
  color: rgba(255,255,255,.48);
  font-size: 11px;
  line-height: 1.4;
}

.wd-attendant-modal-close {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.72);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.wd-attendant-modal-close:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}

.wd-attendant-modal-body {
  padding: 19px 21px 8px;
}

.wd-attendant-field {
  display: block;
  margin-bottom: 15px;
}

.wd-attendant-field > span {
  display: block;
  margin-bottom: 7px;
  color: rgba(255,255,255,.58);
  font-size: 11px;
  font-weight: 700;
}

.wd-attendant-field input {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  outline: none;
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.94);
  font-size: 13px;
}

.wd-attendant-field input:focus {
  border-color: rgba(68,145,255,.55);
  box-shadow:
    0 0 0 3px rgba(68,145,255,.09);
}

#wdAttendantPin {
  letter-spacing: .25em;
  font-size: 17px;
  font-weight: 800;
}

.wd-attendant-modal-error {
  margin-top: 3px;
  padding: 10px 11px;
  border: 1px solid rgba(255,83,96,.22);
  border-radius: 9px;
  background: rgba(255,83,96,.07);
  color: rgba(255,165,171,.96);
  font-size: 11px;
  line-height: 1.45;
}

.wd-attendant-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 15px 21px 20px;
}

.wd-attendant-modal-actions .btn {
  min-width: 92px;
  min-height: 36px;
}

.wd-attendant-modal-open {
  overflow: hidden;
}

@media (max-width: 520px) {

  .wd-attendant-modal {
    padding: 10px;
  }

  .wd-attendant-modal-dialog {
    width: 100%;
    border-radius: 14px;
  }

  .wd-attendant-modal-actions {
    flex-direction: column-reverse;
  }

  .wd-attendant-modal-actions .btn {
    width: 100%;
  }
}


/* ============================================================
   WEBDESK ATTENDANT INSIDE DEVICE MODAL FIX 2026-09
   ============================================================ */

#wdDeviceModal {
  position: fixed;
}

/*
 * Attendant dialog is dynamically moved inside #wdDeviceModal.
 * It therefore uses the same modal stacking context and sits
 * directly above Device Details.
 */
#wdDeviceModal > .wd-attendant-modal {
  position: absolute !important;
  inset: 0 !important;
  z-index: 999999 !important;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;
}

#wdDeviceModal > .wd-attendant-modal[hidden] {
  display: none !important;
}

#wdDeviceModal > .wd-attendant-modal
.wd-attendant-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;

  z-index: 0 !important;

  background: rgba(3, 5, 8, .70);
  backdrop-filter: blur(4px);
}

#wdDeviceModal > .wd-attendant-modal
.wd-attendant-modal-dialog {
  position: relative !important;
  z-index: 1 !important;

  transform: none !important;
}



/* ==========================================================
   WEBDESK INSTANCE REBOOT 2026-09
   ========================================================== */

.wd-instance-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.wd-instance-reboot-btn,
.wd-reboot-all-btn {
  border: 1px solid rgba(239,68,68,.38);
  background: rgba(239,68,68,.10);
  color: #fca5a5;
  border-radius: 8px;
  min-height: 30px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}

.wd-instance-reboot-btn:hover,
.wd-reboot-all-btn:hover {
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.62);
  color: #fecaca;
}

.wd-instance-reboot-btn:disabled,
.wd-reboot-all-btn:disabled {
  opacity: .5;
  cursor: default;
}


/* ==========================================================
   WEBDESK UNIFIED DEVICE ACTIONS 2026-09
   ========================================================== */

.wd-device-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wd-device-action.danger {
  border-color: rgba(239,68,68,.42) !important;
  background: rgba(239,68,68,.08) !important;
  color: #fda4af !important;
}

.wd-device-action.danger:hover:not(:disabled) {
  border-color: rgba(239,68,68,.70) !important;
  background: rgba(239,68,68,.16) !important;
  color: #fecdd3 !important;
}

.wd-device-action.rocketcloud {
  border-color: rgba(14,165,233,.32);
}

.wd-device-action:disabled {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}


/* ==========================================================
   DEVICE DETAILS ACTIONS - SINGLE ROW
   ========================================================== */

.wd-device-dialog-footer {
  overflow-x: auto;
  overflow-y: hidden;
}

.wd-device-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 6px !important;
  width: max-content;
  min-width: 100%;
}

.wd-device-actions .wd-device-action {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  font-size: 11px !important;
}

/* Dangerous actions always at the end visually */
.wd-device-actions .wd-device-action.danger {
  order: 100;
}


/* ==========================================================
   DEVICE DETAILS ACTIONS - FIT SINGLE ROW
   ========================================================== */

.wd-device-dialog-footer {
  overflow: hidden !important;
}

.wd-device-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.wd-device-actions .wd-device-action {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 30px !important;
  padding: 4px 7px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  justify-content: center !important;
}

/* Keep short utility buttons compact */
.wd-device-actions .wd-device-action.ssh,
.wd-device-actions .wd-device-action.epoptes,
.wd-device-actions .wd-device-action.web,
.wd-device-actions .wd-device-action.rustdesk,
.wd-device-actions .wd-device-action.anydesk {
  flex-grow: .7 !important;
}

/* Slightly more room for longer labels */
.wd-device-actions .wd-device-action.scripts {
  flex-grow: 1.35 !important;
}

.wd-device-actions .wd-device-action.rocketcloud {
  flex-grow: 1.05 !important;
}

/* Dangerous actions stay last */
.wd-device-actions .wd-device-action.danger {
  order: 100 !important;
  flex-grow: 1.05 !important;
}

@media (max-width: 1250px) {
  .wd-device-actions {
    gap: 3px !important;
  }

  .wd-device-actions .wd-device-action {
    padding: 4px 5px !important;
    font-size: 9px !important;
  }
}


/* ==========================================================
   DEVICE DETAILS ACTIONS - FIT SINGLE ROW
   ========================================================== */

.wd-device-dialog-footer {
  overflow: hidden !important;
}

.wd-device-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.wd-device-actions .wd-device-action {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 30px !important;
  padding: 4px 7px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  justify-content: center !important;
}

/* Keep short utility buttons compact */
.wd-device-actions .wd-device-action.ssh,
.wd-device-actions .wd-device-action.epoptes,
.wd-device-actions .wd-device-action.web,
.wd-device-actions .wd-device-action.rustdesk,
.wd-device-actions .wd-device-action.anydesk {
  flex-grow: .7 !important;
}

/* Slightly more room for longer labels */
.wd-device-actions .wd-device-action.scripts {
  flex-grow: 1.35 !important;
}

.wd-device-actions .wd-device-action.rocketcloud {
  flex-grow: 1.05 !important;
}

/* Dangerous actions stay last */
.wd-device-actions .wd-device-action.danger {
  order: 100 !important;
  flex-grow: 1.05 !important;
}

@media (max-width: 1250px) {
  .wd-device-actions {
    gap: 3px !important;
  }

  .wd-device-actions .wd-device-action {
    padding: 4px 5px !important;
    font-size: 9px !important;
  }
}


/* ==========================================================
   TERMINAL_HOME DISK USAGE
   ========================================================== */

.wd-terminal-home {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.wd-terminal-home-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.wd-terminal-home-head > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.wd-terminal-home-head > strong {
  font-size: 12px;
  font-weight: 600;
}

.wd-terminal-home-meter {
  height: 5px;
  width: 100%;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.wd-terminal-home-meter > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #4f83ff,
    #c7d2fe
  );
  transition: width .25s ease;
}

.wd-terminal-home-status {
  margin-top: 8px;
  font-size: 10px;
  color: var(--text-soft);
}

.wd-terminal-home-status.available {
  color: #6ee7a8;
}

.wd-terminal-home-status.unavailable {
  color: #8c99aa;
}

.wd-terminal-home-status.error {
  color: #fca5a5;
}


/* ==========================================================
   PHYSICAL MEMORY / DIMM INFO
   ========================================================== */

.wd-memory-physical {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.wd-memory-physical-title {
  margin-bottom: 11px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.wd-memory-part-number {
  grid-column: 1 / -1;
}

.wd-memory-modules {
  display: grid;
  grid-template-columns: repeat(
    2,
    minmax(0, 1fr)
  );
  gap: 7px;
  margin-top: 12px;
}

.wd-memory-module {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
}

.wd-memory-module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wd-memory-module-head span {
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.wd-memory-module-head strong {
  font-size: 10px;
  font-weight: 500;
  text-align: right;
}

.wd-memory-module-sub {
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.35;
  color: var(--text-soft);
}

.wd-memory-status {
  margin-top: 8px;
  font-size: 9px;
  color: var(--text-soft);
}

.wd-memory-status.available {
  color: #6ee7a8;
}

.wd-memory-status.unavailable {
  color: #8c99aa;
}

.wd-memory-status.error {
  color: #fca5a5;
}

@media (max-width: 800px) {
  .wd-memory-modules {
    grid-template-columns: 1fr;
  }
}



/* WEBDESK PLATFORM HARDWARE 2026-09 */

.wd-platform-hardware-btn {
  white-space: nowrap;
}

.wd-platform-hardware-btn.is-active {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
}

.wd-platform-hardware-row > td {
  padding: 0 !important;
  background: rgba(0,0,0,.14) !important;
}

.wd-platform-hardware-shell {
  padding: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.wd-platform-hardware-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.wd-platform-hardware-title {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}

.wd-platform-hardware-subtitle {
  margin-top: 4px;
  font-size: 12px;
  opacity: .62;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.wd-platform-hardware-temperature {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.wd-platform-hardware-temperature span {
  font-size: 11px;
  opacity: .55;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.wd-platform-hardware-temperature strong {
  font-size: 18px;
  font-weight: 600;
}

.wd-platform-hardware-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.wd-platform-hardware-card {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
  overflow: hidden;
}

.wd-platform-hardware-card-title {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 12px;
  font-weight: 600;
}

.wd-platform-hardware-card-body {
  padding: 5px 12px;
}

.wd-platform-hardware-kv {
  display: grid;
  grid-template-columns: minmax(90px, .85fr) minmax(0, 1.4fr);
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.045);
}

.wd-platform-hardware-kv:last-child {
  border-bottom: 0;
}

.wd-platform-hardware-key {
  font-size: 11px;
  opacity: .52;
}

.wd-platform-hardware-value {
  min-width: 0;
  text-align: right;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.wd-platform-hardware-memory {
  margin-top: 14px;
}

.wd-platform-hardware-section-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
}

.wd-platform-hardware-dimms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.wd-platform-hardware-dimm {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.018);
  overflow: hidden;
}

.wd-platform-hardware-dimm-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font-size: 11px;
  font-weight: 600;
}

.wd-platform-hardware-dimm-head span {
  opacity: .7;
}

.wd-platform-hardware-dimm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 5px 11px;
}

.wd-platform-hardware-dimm-grid > div {
  min-width: 0;
  padding: 6px 8px 6px 0;
}

.wd-platform-hardware-dimm-grid span {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  opacity: .48;
}

.wd-platform-hardware-dimm-grid strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.wd-platform-hardware-dimm-part {
  grid-column: 1 / -1;
}

.wd-platform-hardware-loading,
.wd-platform-hardware-empty,
.wd-platform-hardware-error {
  padding: 18px;
  font-size: 12px;
}

.wd-platform-hardware-loading,
.wd-platform-hardware-empty {
  opacity: .62;
}

.wd-platform-hardware-error {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wd-platform-hardware-error strong {
  font-weight: 600;
}

.wd-platform-hardware-error span {
  opacity: .68;
}

@media (max-width: 1100px) {
  .wd-platform-hardware-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .wd-platform-hardware-grid,
  .wd-platform-hardware-dimms {
    grid-template-columns: 1fr;
  }

  .wd-platform-hardware-header {
    flex-direction: column;
  }
}


/* WEBDESK PLATFORM ACCESS STATUS 2026-09 */

.wd-platform-access-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    border-color .15s ease,
    background .15s ease,
    color .15s ease;
}

.wd-platform-access-badge.is-checking {
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.08);
}

.wd-platform-access-badge.is-ready {
  color: #58df95;
  background: rgba(48,190,111,.08);
  border-color: rgba(48,190,111,.35);
}

.wd-platform-access-badge.is-unreachable {
  color: #ff7474;
  background: rgba(220,60,60,.08);
  border-color: rgba(220,60,60,.35);
}

.wd-platform-access-badge.is-key {
  color: #f0bd63;
  background: rgba(210,150,45,.08);
  border-color: rgba(210,150,45,.35);
}

.wd-platform-access-badge.is-tsm {
  color: #83b8ff;
  background: rgba(70,130,220,.08);
  border-color: rgba(70,130,220,.35);
}

.wd-platform-access-badge.is-error {
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.15);
}

.wd-platform-access-badge:hover {
  filter: brightness(1.15);
}

/* WEBDESK ACTION MENU TYPOGRAPHY UNIFIED */
.action-menu .action-menu-item,
.action-menu a.action-menu-item,
.action-menu button.action-menu-item,
.action-menu span.action-menu-item {
  font-family: var(--wd-ui-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Native button must use exactly the same menu geometry as links. */
.action-menu button.action-menu-item {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  width: 100% !important;
  border-radius: 9px !important;
  text-align: left !important;
}


/* WEBDESK DB_REPAIR2 FINAL ALIGNMENT */
.action-menu button.action-menu-item.db-repair2-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  width: 100% !important;
  min-height: 40px !important;
  box-sizing: border-box !important;

  margin: 0 !important;
  padding: 8px 10px !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;

  text-align: left !important;
}

/* WEBDESK DB REPAIR2 DANGEROUS ACTION */
.action-menu button.action-menu-item.db-repair2-menu-item.action-menu-danger {
  color: #ffb9c1 !important;
}

.action-menu button.action-menu-item.db-repair2-menu-item.action-menu-danger:hover,
.action-menu button.action-menu-item.db-repair2-menu-item.action-menu-danger:focus {
  color: #ffd4d9 !important;
  background: rgba(239,68,68,.12) !important;
}


/* ============================================================
   WEBDESK DEVICE DETAILS — COMPACT LAYOUT
   Keeps existing typography/functionality, reduces empty space.
   ============================================================ */

.wd-device-dialog {
    max-height: calc(100vh - 24px) !important;
}

/* Header */
.wd-device-dialog-header {
    padding-top: 12px !important;
    padding-bottom: 10px !important;
    min-height: 0 !important;
}

.wd-device-heading {
    min-height: 0 !important;
}

.wd-device-title-row {
    margin: 0 !important;
}

.wd-device-subtitle {
    margin-top: 3px !important;
}

.wd-device-position {
    margin-top: 2px !important;
}

.wd-device-header-actions {
    gap: 6px !important;
}

/* Tabs */
.wd-device-tabs {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.wd-device-tab {
    min-height: 42px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

/* Main scrollable content */
.wd-device-content {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Every normal tab grid */
.wd-device-section-grid,
.wd-device-history-grid {
    gap: 12px !important;
    align-items: start !important;
}

/* Cards must follow their actual content height */
.wd-device-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 16px !important;
}

.wd-device-card-title {
    margin-bottom: 10px !important;
}

/* Key/value content */
.wd-device-kv-grid {
    row-gap: 8px !important;
    column-gap: 18px !important;
}

.wd-device-kv-grid > div {
    min-height: 0 !important;
}

/* Metrics */
.wd-device-metric {
    min-height: 0 !important;
}

.wd-device-metric + .wd-device-metric {
    margin-top: 10px !important;
}

.wd-device-meter {
    margin-top: 5px !important;
}

/* Text/detail blocks */
.wd-device-notes,
.wd-device-detail-block,
.wd-device-empty-info {
    min-height: 0 !important;
    margin-top: 8px !important;
}

/* Hardware tab */
.wd-memory-physical,
.wd-terminal-home {
    margin-top: 10px !important;
}

.wd-memory-modules {
    margin-top: 8px !important;
}

.wd-memory-status,
.wd-terminal-home-status {
    margin-top: 8px !important;
}

/* Services */
.wd-device-service-row,
.wd-device-info-row {
    min-height: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* History */
.wd-device-history-chart {
    min-height: 150px !important;
    height: 150px !important;
}

.wd-device-history-meta {
    margin-top: 7px !important;
}

/* Instances */
.wd-connected-wrap {
    min-height: 0 !important;
}

.wd-connected-toolbar {
    padding-top: 0 !important;
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
}

.wd-connected-table-wrap {
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 330px) !important;
}

.wd-connected-table th,
.wd-connected-table td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Footer / Actions */
.wd-device-dialog-footer {
    min-height: 0 !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.wd-device-footer-label {
    margin-bottom: 6px !important;
}

.wd-device-actions {
    gap: 6px !important;
}

.wd-device-actions .wd-device-action {
    min-height: 34px !important;
}

/* Overview should pack naturally instead of stretching cards */
.wd-device-panel[data-device-panel="overview"].active
.wd-device-section-grid {
    align-items: start !important;
}

.wd-device-panel[data-device-panel="overview"]
.wd-device-card {
    align-self: start !important;
}

/* Network cards should not inherit artificial height */
.wd-device-panel[data-device-panel="network"]
.wd-device-card {
    min-height: 0 !important;
}

/* Services cards should fit their rows */
.wd-device-panel[data-device-panel="services"]
.wd-device-card {
    min-height: 0 !important;
}

/* Desktop: use available width efficiently */
@media (min-width: 901px) {
    .wd-device-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .wd-device-section-grid,
    .wd-device-history-grid {
        grid-auto-rows: max-content !important;
    }
}

/* Smaller displays */
@media (max-width: 900px) {
    .wd-device-dialog {
        max-height: 100vh !important;
    }

    .wd-device-content {
        padding: 10px !important;
    }

    .wd-device-section-grid,
    .wd-device-history-grid {
        gap: 10px !important;
    }

    .wd-device-card {
        padding: 12px 14px !important;
    }

    .wd-device-dialog-footer {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .wd-connected-table-wrap {
        max-height: calc(100vh - 300px) !important;
    }
}


/* ============================================================
   WEBDESK DEVICE DETAILS
   Hardware layout + compact Actions dropdown
   ============================================================ */


/* ------------------------------------------------------------
   HARDWARE DESKTOP LAYOUT

   | Processor/System | Memory |
   | Motherboard/BIOS | Memory |
   | Disk                      |
   ------------------------------------------------------------ */

@media (min-width: 901px) {

  .wd-device-panel[data-device-panel="hardware"].active
  .wd-device-section-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px !important;
    align-items: start !important;
  }

  /* Processor / System */
  .wd-device-panel[data-device-panel="hardware"]
  .wd-device-card:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  /* Memory */
  .wd-device-panel[data-device-panel="hardware"]
  .wd-device-card:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
  }

  /* Disk */
  .wd-device-panel[data-device-panel="hardware"]
  .wd-device-card:nth-child(3) {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }

  /* Motherboard / BIOS */
  .wd-device-panel[data-device-panel="hardware"]
  .wd-device-card:nth-child(4) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
  }

}


/* ------------------------------------------------------------
   DEVICE ACTIONS MENU
   ------------------------------------------------------------ */

.wd-device-dialog-footer {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  overflow: visible !important;

  padding: 8px 16px !important;
  min-height: 50px !important;
}

.wd-device-actions-menu-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}


/* Main Actions button */
.wd-device-actions-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  min-width: 112px !important;
  min-height: 34px !important;

  padding: 7px 12px !important;

  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 9px !important;

  background: rgba(255,255,255,.035) !important;
  color: var(--text) !important;

  font-family: var(--wd-ui-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;

  cursor: pointer !important;
}

.wd-device-actions-toggle:hover,
.wd-device-actions-toggle[aria-expanded="true"] {
  border-color: rgba(255,255,255,.30) !important;
  background: rgba(255,255,255,.075) !important;
}

.wd-device-actions-dots {
  opacity: .75;
  letter-spacing: 2px;
}


/* Dropdown opens UP because footer is at bottom */
.wd-device-actions-popover {
  position: absolute !important;

  right: 0 !important;
  bottom: calc(100% + 8px) !important;

  width: 270px !important;
  max-width: calc(100vw - 32px) !important;
  max-height: min(620px, calc(100vh - 150px)) !important;

  padding: 7px !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;

  background: #15161b !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;

  z-index: 100100 !important;
}

.wd-device-actions-popover[hidden] {
  display: none !important;
}


/* Existing generated actions become vertical menu items */
.wd-device-actions-popover .wd-device-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2px !important;

  width: 100% !important;
}


/* Existing links / disabled actions */
.wd-device-actions-popover
.wd-device-actions
.wd-device-action {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;

  margin: 0 !important;
  padding: 8px 10px !important;

  border: 0 !important;
  border-radius: 8px !important;

  background: transparent !important;

  text-align: left !important;
  white-space: nowrap !important;

  font-family: var(--wd-ui-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.wd-device-actions-popover
.wd-device-actions
.wd-device-action:hover:not(.disabled) {
  background: rgba(255,255,255,.065) !important;
}


/* Dangerous actions remain red */
.wd-device-actions-popover
.wd-device-action.danger {
  color: #ffb9c1 !important;
}

.wd-device-actions-popover
.wd-device-action.danger:hover:not(.disabled) {
  background: rgba(239,68,68,.12) !important;
  color: #ffd4d9 !important;
}


/* Disabled */
.wd-device-actions-popover
.wd-device-action.disabled {
  opacity: .38 !important;
  cursor: not-allowed !important;
}


/* Mobile */
@media (max-width: 900px) {

  .wd-device-dialog-footer {
    padding: 7px 10px !important;
  }

  .wd-device-actions-toggle {
    min-width: 100px !important;
  }

  .wd-device-actions-popover {
    right: 0 !important;
    width: min(270px, calc(100vw - 24px)) !important;
  }

}


/* ============================================================
   WEBDESK DEVICE DETAILS — ACTIONS NEXT TO HISTORY
   ============================================================ */

/* Old footer is no longer used. */
.wd-device-dialog-footer {
  display: none !important;
}


/* Wrapper behaves like another item in the tab row. */
.wd-device-top-actions-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
}


/* Actions visually matches the normal tabs. */
.wd-device-tabs .wd-device-actions-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 42px !important;

  margin: 0 !important;
  padding: 9px 14px !important;

  border: 0 !important;
  border-radius: 8px !important;

  background: transparent !important;
  color: inherit !important;

  font-family: var(--wd-ui-font) !important;
  font-size: inherit !important;
  font-weight: inherit !important;

  cursor: pointer !important;
}


/* Open state — subtle indication without turning it into a real tab. */
.wd-device-tabs
.wd-device-actions-tab[aria-expanded="true"] {
  background: rgba(255,255,255,.055) !important;
  color: var(--text) !important;
}


/* Popover now opens DOWN from the top Actions item. */
.wd-device-actions-popover.wd-device-actions-popover-top {
  position: absolute !important;

  top: calc(100% + 6px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;

  width: 270px !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 180px) !important;

  z-index: 100200 !important;
}


/* Make sure tabs don't clip the menu. */
.wd-device-tabs {
  overflow: visible !important;
}

.wd-device-top-actions-wrap {
  overflow: visible !important;
}


/* Mobile */
@media (max-width: 900px) {

  .wd-device-actions-popover.wd-device-actions-popover-top {
    left: auto !important;
    right: 0 !important;

    width: min(270px, calc(100vw - 24px)) !important;
  }

}


/* ============================================================
   WEBDESK DEVICE DETAILS — ACTIONS NEXT TO HISTORY
   ============================================================ */

/* Old footer is no longer used. */
.wd-device-dialog-footer {
  display: none !important;
}


/* Wrapper behaves like another item in the tab row. */
.wd-device-top-actions-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: stretch !important;
  flex: 0 0 auto !important;
}


/* Actions visually matches the normal tabs. */
.wd-device-tabs .wd-device-actions-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 42px !important;

  margin: 0 !important;
  padding: 9px 14px !important;

  border: 0 !important;
  border-radius: 8px !important;

  background: transparent !important;
  color: inherit !important;

  font-family: var(--wd-ui-font) !important;
  font-size: inherit !important;
  font-weight: inherit !important;

  cursor: pointer !important;
}


/* Open state — subtle indication without turning it into a real tab. */
.wd-device-tabs
.wd-device-actions-tab[aria-expanded="true"] {
  background: rgba(255,255,255,.055) !important;
  color: var(--text) !important;
}


/* Popover now opens DOWN from the top Actions item. */
.wd-device-actions-popover.wd-device-actions-popover-top {
  position: absolute !important;

  top: calc(100% + 6px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;

  width: 270px !important;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 180px) !important;

  z-index: 100200 !important;
}


/* Make sure tabs don't clip the menu. */
.wd-device-tabs {
  overflow: visible !important;
}

.wd-device-top-actions-wrap {
  overflow: visible !important;
}


/* Mobile */
@media (max-width: 900px) {

  .wd-device-actions-popover.wd-device-actions-popover-top {
    left: auto !important;
    right: 0 !important;

    width: min(270px, calc(100vw - 24px)) !important;
  }

}


/* ============================================================
   WEBDESK HARDWARE — INLINE HISTORY
   History graphs live inside CPU / RAM / Disk cards.
   ============================================================ */

.wd-hardware-history {
  margin-top: 12px !important;
  padding-top: 10px !important;

  border-top: 1px solid rgba(255,255,255,.08) !important;
}

.wd-hardware-history-title {
  margin-bottom: 7px !important;

  color: var(--text-soft) !important;

  font-family: var(--wd-ui-font) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;

  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}


/* Compact charts inside Hardware. */
.wd-hardware-history .wd-device-history-chart {
  height: 88px !important;
  min-height: 88px !important;

  margin: 0 !important;
  padding-top: 4px !important;
}


/* Smaller metadata line below graph. */
.wd-hardware-history .wd-device-history-meta {
  margin-top: 5px !important;

  font-size: 10px !important;
  line-height: 1.25 !important;
}


/* RAM graph should follow the physical RAM information naturally. */
.wd-device-panel[data-device-panel="hardware"]
.wd-device-card:nth-child(2)
.wd-hardware-history {
  margin-top: 10px !important;
}


/* Disk history stays above terminal_home. */
.wd-device-panel[data-device-panel="hardware"]
.wd-device-card:nth-child(3)
.wd-hardware-history {
  margin-bottom: 12px !important;
}


/* Actions now uses only the normal wd-device-tab appearance. */
.wd-device-tabs .wd-device-top-actions-wrap > .wd-device-tab {
  font-family: inherit !important;
}


/* Keep Actions wrapper geometry neutral. */
.wd-device-top-actions-wrap {
  display: inline-flex !important;
  align-items: stretch !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Mobile */
@media (max-width: 900px) {

  .wd-hardware-history .wd-device-history-chart {
    height: 78px !important;
    min-height: 78px !important;
  }

}


/* ============================================================
   WEBDESK DEVICE DETAILS — COMPACT V2
   Smaller hardware view + safe tab navigation width
   ============================================================ */


/* ------------------------------------------------------------
   DIALOG / HEADER
   ------------------------------------------------------------ */

.wd-device-dialog {
  max-height: calc(100vh - 12px) !important;
}

.wd-device-dialog-header {
  padding-top: 9px !important;
  padding-bottom: 8px !important;
}

.wd-device-title-row h2 {
  font-size: 22px !important;
  line-height: 1.05 !important;
}

.wd-device-subtitle {
  margin-top: 2px !important;
  font-size: 11px !important;
}

.wd-device-position {
  margin-top: 2px !important;
  font-size: 10px !important;
}

.wd-device-header-actions {
  gap: 5px !important;
}

.wd-device-header-btn,
.wd-device-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
}


/* ------------------------------------------------------------
   TOP TABS
   Never extend outside modal.
   ------------------------------------------------------------ */

.wd-device-tabs {
  display: flex !important;
  align-items: stretch !important;

  width: 100% !important;
  min-width: 0 !important;

  gap: 3px !important;

  padding-left: 14px !important;
  padding-right: 14px !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.wd-device-tabs::-webkit-scrollbar {
  display: none !important;
}

.wd-device-tab,
.wd-device-tabs .wd-device-actions-tab,
.wd-device-top-actions-wrap > .wd-device-tab {
  flex: 0 0 auto !important;

  min-width: 0 !important;
  min-height: 36px !important;

  padding: 7px 11px !important;

  font-size: 11px !important;
  line-height: 1.1 !important;

  border-radius: 7px !important;
}

.wd-device-top-actions-wrap {
  flex: 0 0 auto !important;
  min-width: max-content !important;
}


/* ------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------ */

.wd-device-content {
  padding:
    10px
    14px
    10px
    14px !important;
}

.wd-device-section-grid,
.wd-device-history-grid {
  gap: 10px !important;
}


/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */

.wd-device-card {
  padding: 11px 13px !important;
  border-radius: 13px !important;
}

.wd-device-card-title {
  margin-bottom: 8px !important;
  font-size: 11px !important;
}

.wd-device-kv-grid {
  row-gap: 6px !important;
  column-gap: 14px !important;
}

.wd-device-kv-grid span {
  font-size: 9px !important;
}

.wd-device-kv-grid strong {
  font-size: 11px !important;
  line-height: 1.25 !important;
}


/* ------------------------------------------------------------
   HARDWARE
   ------------------------------------------------------------ */

.wd-device-panel[data-device-panel="hardware"]
.wd-device-section-grid {
  gap: 10px !important;
}

/* Processor -> Motherboard tighter */
.wd-device-panel[data-device-panel="hardware"]
.wd-device-card:nth-child(1) {
  margin-bottom: 0 !important;
}

.wd-device-panel[data-device-panel="hardware"]
.wd-device-card:nth-child(4) {
  margin-top: 0 !important;
}


/* RAM module cards */
.wd-memory-modules {
  gap: 6px !important;
  margin-top: 6px !important;
}

.wd-memory-modules > * {
  padding: 7px 8px !important;
  min-height: 0 !important;
}

.wd-memory-physical {
  margin-top: 8px !important;
}

.wd-memory-status {
  margin-top: 5px !important;
  font-size: 9px !important;
}


/* ------------------------------------------------------------
   INLINE HISTORY GRAPHS
   ------------------------------------------------------------ */

.wd-hardware-history {
  margin-top: 8px !important;
  padding-top: 8px !important;
}

.wd-hardware-history-title {
  margin-bottom: 5px !important;
  font-size: 9px !important;
}

.wd-hardware-history .wd-device-history-chart {
  height: 62px !important;
  min-height: 62px !important;
  padding-top: 2px !important;
}

.wd-hardware-history .wd-device-history-meta {
  margin-top: 4px !important;
  font-size: 9px !important;
}


/* ------------------------------------------------------------
   DISK / TERMINAL_HOME
   ------------------------------------------------------------ */

.wd-terminal-home {
  margin-top: 8px !important;
  padding-top: 8px !important;
}

.wd-terminal-home-head {
  margin-bottom: 7px !important;
}

.wd-terminal-home-meter {
  margin-top: 6px !important;
}

.wd-terminal-home-status {
  margin-top: 5px !important;
  font-size: 9px !important;
}


/* ------------------------------------------------------------
   SERVICES
   ------------------------------------------------------------ */

.wd-device-service-row,
.wd-device-info-row {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}


/* ------------------------------------------------------------
   ACTIONS POPOVER
   Keep inside screen.
   ------------------------------------------------------------ */

.wd-device-actions-popover.wd-device-actions-popover-top {
  width: 250px !important;
  max-width: calc(100vw - 24px) !important;

  left: auto !important;
  right: 0 !important;

  max-height: calc(100vh - 140px) !important;
}


/* ------------------------------------------------------------
   MEDIUM WIDTH
   ------------------------------------------------------------ */

@media (max-width: 1200px) {

  .wd-device-tabs {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .wd-device-tab,
  .wd-device-tabs .wd-device-actions-tab,
  .wd-device-top-actions-wrap > .wd-device-tab {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 10px !important;
  }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 900px) {

  .wd-device-content {
    padding: 8px !important;
  }

  .wd-device-card {
    padding: 10px 11px !important;
  }

  .wd-hardware-history .wd-device-history-chart {
    height: 56px !important;
    min-height: 56px !important;
  }

  .wd-device-tabs {
    gap: 2px !important;
  }

  .wd-device-tab,
  .wd-device-tabs .wd-device-actions-tab,
  .wd-device-top-actions-wrap > .wd-device-tab {
    min-height: 34px !important;
    padding: 6px 9px !important;
  }

}


/* ============================================================
   WEBDESK DEVICE DETAILS — COMPACT V2
   Smaller hardware view + safe tab navigation width
   ============================================================ */


/* ------------------------------------------------------------
   DIALOG / HEADER
   ------------------------------------------------------------ */

.wd-device-dialog {
  max-height: calc(100vh - 12px) !important;
}

.wd-device-dialog-header {
  padding-top: 9px !important;
  padding-bottom: 8px !important;
}

.wd-device-title-row h2 {
  font-size: 22px !important;
  line-height: 1.05 !important;
}

.wd-device-subtitle {
  margin-top: 2px !important;
  font-size: 11px !important;
}

.wd-device-position {
  margin-top: 2px !important;
  font-size: 10px !important;
}

.wd-device-header-actions {
  gap: 5px !important;
}

.wd-device-header-btn,
.wd-device-close {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
}


/* ------------------------------------------------------------
   TOP TABS
   Never extend outside modal.
   ------------------------------------------------------------ */

.wd-device-tabs {
  display: flex !important;
  align-items: stretch !important;

  width: 100% !important;
  min-width: 0 !important;

  gap: 3px !important;

  padding-left: 14px !important;
  padding-right: 14px !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.wd-device-tabs::-webkit-scrollbar {
  display: none !important;
}

.wd-device-tab,
.wd-device-tabs .wd-device-actions-tab,
.wd-device-top-actions-wrap > .wd-device-tab {
  flex: 0 0 auto !important;

  min-width: 0 !important;
  min-height: 36px !important;

  padding: 7px 11px !important;

  font-size: 11px !important;
  line-height: 1.1 !important;

  border-radius: 7px !important;
}

.wd-device-top-actions-wrap {
  flex: 0 0 auto !important;
  min-width: max-content !important;
}


/* ------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------ */

.wd-device-content {
  padding:
    10px
    14px
    10px
    14px !important;
}

.wd-device-section-grid,
.wd-device-history-grid {
  gap: 10px !important;
}


/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */

.wd-device-card {
  padding: 11px 13px !important;
  border-radius: 13px !important;
}

.wd-device-card-title {
  margin-bottom: 8px !important;
  font-size: 11px !important;
}

.wd-device-kv-grid {
  row-gap: 6px !important;
  column-gap: 14px !important;
}

.wd-device-kv-grid span {
  font-size: 9px !important;
}

.wd-device-kv-grid strong {
  font-size: 11px !important;
  line-height: 1.25 !important;
}


/* ------------------------------------------------------------
   HARDWARE
   ------------------------------------------------------------ */

.wd-device-panel[data-device-panel="hardware"]
.wd-device-section-grid {
  gap: 10px !important;
}

/* Processor -> Motherboard tighter */
.wd-device-panel[data-device-panel="hardware"]
.wd-device-card:nth-child(1) {
  margin-bottom: 0 !important;
}

.wd-device-panel[data-device-panel="hardware"]
.wd-device-card:nth-child(4) {
  margin-top: 0 !important;
}


/* RAM module cards */
.wd-memory-modules {
  gap: 6px !important;
  margin-top: 6px !important;
}

.wd-memory-modules > * {
  padding: 7px 8px !important;
  min-height: 0 !important;
}

.wd-memory-physical {
  margin-top: 8px !important;
}

.wd-memory-status {
  margin-top: 5px !important;
  font-size: 9px !important;
}


/* ------------------------------------------------------------
   INLINE HISTORY GRAPHS
   ------------------------------------------------------------ */

.wd-hardware-history {
  margin-top: 8px !important;
  padding-top: 8px !important;
}

.wd-hardware-history-title {
  margin-bottom: 5px !important;
  font-size: 9px !important;
}

.wd-hardware-history .wd-device-history-chart {
  height: 62px !important;
  min-height: 62px !important;
  padding-top: 2px !important;
}

.wd-hardware-history .wd-device-history-meta {
  margin-top: 4px !important;
  font-size: 9px !important;
}


/* ------------------------------------------------------------
   DISK / TERMINAL_HOME
   ------------------------------------------------------------ */

.wd-terminal-home {
  margin-top: 8px !important;
  padding-top: 8px !important;
}

.wd-terminal-home-head {
  margin-bottom: 7px !important;
}

.wd-terminal-home-meter {
  margin-top: 6px !important;
}

.wd-terminal-home-status {
  margin-top: 5px !important;
  font-size: 9px !important;
}


/* ------------------------------------------------------------
   SERVICES
   ------------------------------------------------------------ */

.wd-device-service-row,
.wd-device-info-row {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}


/* ------------------------------------------------------------
   ACTIONS POPOVER
   Keep inside screen.
   ------------------------------------------------------------ */

.wd-device-actions-popover.wd-device-actions-popover-top {
  width: 250px !important;
  max-width: calc(100vw - 24px) !important;

  left: auto !important;
  right: 0 !important;

  max-height: calc(100vh - 140px) !important;
}


/* ------------------------------------------------------------
   MEDIUM WIDTH
   ------------------------------------------------------------ */

@media (max-width: 1200px) {

  .wd-device-tabs {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .wd-device-tab,
  .wd-device-tabs .wd-device-actions-tab,
  .wd-device-top-actions-wrap > .wd-device-tab {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 10px !important;
  }

}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 900px) {

  .wd-device-content {
    padding: 8px !important;
  }

  .wd-device-card {
    padding: 10px 11px !important;
  }

  .wd-hardware-history .wd-device-history-chart {
    height: 56px !important;
    min-height: 56px !important;
  }

  .wd-device-tabs {
    gap: 2px !important;
  }

  .wd-device-tab,
  .wd-device-tabs .wd-device-actions-tab,
  .wd-device-top-actions-wrap > .wd-device-tab {
    min-height: 34px !important;
    padding: 6px 9px !important;
  }

}


/* ============================================================
   DEVICE ACTIONS POPOVER — FIXED VIEWPORT POSITION
   Prevent tab overflow from clipping the dropdown.
   ============================================================ */

#wdDeviceActionsPopover.wd-device-actions-popover-top {
  position: fixed !important;

  width: 250px !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100vh - 120px) !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  z-index: 100500 !important;
}

#wdDeviceActionsPopover[hidden] {
  display: none !important;
}


/* ============================================================
   WEBDESK DEVICE ACTIONS — FINAL PORTAL FIX
   Popover is mounted directly under BODY.
   ============================================================ */

body > #wdDeviceActionsPopover {
  position: fixed !important;
  width: 250px !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100vh - 120px) !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  z-index: 100500 !important;
}

body > #wdDeviceActionsPopover[hidden] {
  display: none !important;
}


/* ============================================================
   DEVICE DETAILS ACTIONS = MAIN WEBDESK ACTION MENU
   ============================================================ */

body > #wdDeviceActionsPopover {
  width: 205px !important;
  padding: 7px !important;

  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;

  background: #17171c !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.55) !important;
}


/* Container */
#wdDeviceActions.wd-device-actions-main-menu {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;

  gap: 0 !important;
}


/* Every action = same geometry as main Actions dropdown */
#wdDeviceActions.wd-device-actions-main-menu
.wd-device-action {
  -webkit-appearance: none !important;
  appearance: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 10px !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;

  margin: 0 !important;
  padding: 8px 10px !important;

  border: 0 !important;
  border-radius: 9px !important;

  outline: 0 !important;
  box-shadow: none !important;

  background: transparent !important;
  color: var(--text) !important;

  font-family: var(--wd-ui-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.2 !important;

  text-align: left !important;
  text-decoration: none !important;

  cursor: pointer !important;
}


/* Hover */
#wdDeviceActions.wd-device-actions-main-menu
.wd-device-action:hover:not(.disabled) {
  background: rgba(255,255,255,.055) !important;
}


/* Existing icons */
#wdDeviceActions.wd-device-actions-main-menu
.wd-device-action > :first-child {
  flex: 0 0 18px !important;

  width: 18px !important;

  text-align: center !important;
}


/* DB Repair2 DB icon */
.wd-device-action-menu-icon {
  display: inline-block !important;

  width: 18px !important;

  color: #ffb9c1 !important;

  font-size: 9px !important;
  line-height: 1 !important;

  text-align: center !important;
}


/* Group separator exactly like main menu */
.wd-device-actions-separator {
  width: calc(100% - 12px) !important;
  height: 1px !important;

  margin: 4px 6px !important;

  background: rgba(255,255,255,.14) !important;
}


/* Dangerous actions */
#wdDeviceActions.wd-device-actions-main-menu
.wd-device-action.danger {
  color: #ffb9c1 !important;
}

#wdDeviceActions.wd-device-actions-main-menu
.wd-device-action.danger:hover:not(.disabled) {
  color: #ffd4d9 !important;
  background: rgba(239,68,68,.12) !important;
}


/* Disabled */
#wdDeviceActions.wd-device-actions-main-menu
.wd-device-action.disabled {
  opacity: .38 !important;
  cursor: not-allowed !important;
}


/* Keep menu usable on a smaller screen */
@media (max-width: 900px) {
  body > #wdDeviceActionsPopover {
    width: 205px !important;
    max-width: calc(100vw - 16px) !important;
  }
}


/* ============================================================
   WEBDESK DEVICE DETAILS — MOBILE TECHNICIAN MODE V1
   Desktop remains unchanged.
   ============================================================ */

@media (max-width: 900px) {

  /* ----------------------------------------------------------
     FULL-SCREEN MOBILE DEVICE WINDOW
     ---------------------------------------------------------- */

  .wd-device-modal {
    padding: 0 !important;
  }

  .wd-device-dialog {
    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;

    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }


  /* ----------------------------------------------------------
     HEADER
     ---------------------------------------------------------- */

  .wd-device-dialog-header {
    min-height: 64px !important;

    padding:
      8px
      10px
      7px
      12px !important;
  }

  .wd-device-heading {
    gap: 9px !important;
  }

  .wd-device-status-dot {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
  }

  .wd-device-title-row {
    gap: 7px !important;
  }

  .wd-device-title-row h2 {
    font-size: 18px !important;
    line-height: 1.05 !important;
  }

  .wd-device-status-badge {
    padding: 3px 7px !important;

    font-size: 9px !important;
  }

  .wd-device-subtitle {
    max-width: 54vw !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    font-size: 10px !important;
  }

  .wd-device-position {
    font-size: 9px !important;
  }

  .wd-device-header-actions {
    gap: 4px !important;
  }

  .wd-device-header-btn,
  .wd-device-close {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;

    padding: 0 !important;
  }


  /* ----------------------------------------------------------
     TOP NAVIGATION
     ---------------------------------------------------------- */

  .wd-device-tabs {
    position: relative !important;

    display: flex !important;
    align-items: stretch !important;

    width: 100% !important;

    gap: 2px !important;

    padding:
      3px
      6px
      3px
      6px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none !important;
  }

  .wd-device-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .wd-device-tab,
  .wd-device-top-actions-wrap > .wd-device-tab {
    min-height: 32px !important;

    padding: 6px 9px !important;

    border-radius: 7px !important;

    font-size: 10px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }


  /* Actions always stays reachable at right side. */
  .wd-device-top-actions-wrap {
    position: sticky !important;
    right: 0 !important;

    z-index: 15 !important;

    padding-left: 4px !important;

    background:
      linear-gradient(
        90deg,
        rgba(10,12,16,0),
        rgba(10,12,16,.96) 24%
      ) !important;
  }

  #wdDeviceActionsToggle {
    background: rgba(18,20,26,.98) !important;
  }


  /* ----------------------------------------------------------
     CONTENT
     ---------------------------------------------------------- */

  .wd-device-content {
    padding: 8px !important;

    overflow-x: hidden !important;
  }

  .wd-device-section-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 7px !important;
  }

  .wd-device-card,
  .wd-device-card-wide {
    grid-column: 1 !important;

    width: 100% !important;

    padding: 10px 11px !important;

    border-radius: 11px !important;
  }

  .wd-device-card-title {
    margin-bottom: 7px !important;

    font-size: 10px !important;
  }


  /* ----------------------------------------------------------
     COMMON INFO
     ---------------------------------------------------------- */

  .wd-device-kv-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    column-gap: 12px !important;
    row-gap: 6px !important;
  }

  .wd-device-kv-grid span {
    font-size: 8px !important;
  }

  .wd-device-kv-grid strong {
    font-size: 10px !important;
  }


  /* ----------------------------------------------------------
     OVERVIEW — technician only
     Hide information that is low value on phone.
     ---------------------------------------------------------- */

  .wd-device-panel[data-device-panel="overview"]
  .wd-device-card:nth-child(4),

  .wd-device-panel[data-device-panel="overview"]
  .wd-device-card:nth-child(5) {
    display: none !important;
  }


  /* Hide Depot field on mobile Overview. */
  .wd-device-panel[data-device-panel="overview"]
  .wd-device-kv-grid > div:has(> #wdvDepot) {
    display: none !important;
  }


  /* System usage more compact */
  .wd-device-metric + .wd-device-metric {
    margin-top: 7px !important;
  }

  .wd-device-meter {
    height: 5px !important;
  }


  /* ----------------------------------------------------------
     HARDWARE — technician version
     ---------------------------------------------------------- */

  /*
   Hide verbose physical RAM module inventory.
   Total/used RAM remains visible.
  */

  .wd-memory-physical {
    display: none !important;
  }

  #wdvRamInfo {
    display: none !important;
  }


  /*
   Motherboard / BIOS details are diagnostic desktop data.
   Hide entire card on phone.
  */

  .wd-device-panel[data-device-panel="hardware"]
  .wd-device-card:nth-child(4) {
    display: none !important;
  }


  /*
   Historical graphs are available on desktop.
   Mobile keeps current CPU/RAM/Disk information only.
  */

  .wd-device-panel[data-device-panel="hardware"]
  .wd-hardware-history {
    display: none !important;
  }


  /*
   Keep Disk but simplify terminal_home.
  */

  .wd-terminal-home {
    margin-top: 7px !important;
    padding-top: 7px !important;
  }

  .wd-terminal-home
  .wd-device-kv-grid > div:has(> #wdvTerminalHomePath),

  .wd-terminal-home
  .wd-device-kv-grid > div:has(> #wdvTerminalHomeFilesystem) {
    display: none !important;
  }


  /* ----------------------------------------------------------
     NETWORK
     ---------------------------------------------------------- */

  .wd-device-panel[data-device-panel="network"]
  .wd-device-section-grid {
    grid-template-columns: 1fr !important;
  }

  .wd-device-panel[data-device-panel="network"]
  .wd-device-card {
    min-height: 0 !important;
  }


  /* ----------------------------------------------------------
     SERVICES
     ---------------------------------------------------------- */

  .wd-device-panel[data-device-panel="services"]
  .wd-device-section-grid {
    grid-template-columns: 1fr !important;
  }

  .wd-device-service-row,
  .wd-device-info-row {
    min-height: 0 !important;

    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  .wd-device-service-row span,
  .wd-device-info-row span {
    font-size: 9px !important;
  }

  .wd-device-service-row strong,
  .wd-device-info-row strong {
    font-size: 10px !important;
  }


  /* Reverse SSH health stays useful but compact */
  .wd-tunnel-health-card {
    padding: 10px !important;
  }

  .wd-tunnel-health-detail {
    font-size: 9px !important;
  }


  /* ----------------------------------------------------------
     INSTANCES
     Keep full functionality; make table phone-friendly.
     ---------------------------------------------------------- */

  .wd-connected-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }

  .wd-connected-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 7px !important;

    padding: 8px !important;
  }

  .wd-connected-controls {
    display: flex !important;
    flex-wrap: wrap !important;

    gap: 6px !important;
  }

  .wd-connected-search {
    flex: 1 1 150px !important;

    min-width: 120px !important;
  }

  .wd-connected-table-wrap {
    width: 100% !important;

    max-height: calc(100dvh - 215px) !important;

    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  .wd-connected-table {
    min-width: 760px !important;
  }

  .wd-connected-table th,
  .wd-connected-table td {
    padding:
      6px
      7px !important;

    font-size: 9px !important;
  }


  /* ----------------------------------------------------------
     ACTIONS POPOVER
     ---------------------------------------------------------- */

  body > #wdDeviceActionsPopover {
    width: min(215px, calc(100vw - 16px)) !important;

    max-height: calc(100dvh - 115px) !important;

    padding: 5px !important;

    border-radius: 10px !important;
  }

  #wdDeviceActions.wd-device-actions-main-menu
  .wd-device-action {
    min-height: 36px !important;

    padding:
      7px
      9px !important;

    font-size: 11px !important;

    border-radius: 7px !important;
  }

  .wd-device-actions-separator {
    margin:
      3px
      6px !important;
  }

}


/* ============================================================
   EXTRA SMALL PHONES
   ============================================================ */

@media (max-width: 430px) {

  .wd-device-title-row h2 {
    font-size: 17px !important;
  }

  .wd-device-subtitle {
    max-width: 48vw !important;
  }

  .wd-device-header-btn,
  .wd-device-close {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
  }

  .wd-device-content {
    padding: 6px !important;
  }

  .wd-device-card {
    padding: 9px !important;
  }

  .wd-device-kv-grid {
    column-gap: 8px !important;
  }

}


/* ============================================================
   WEBDESK DEVICE DETAILS — MOBILE TECHNICIAN MODE V2
   Instances + Services refinement
   Desktop untouched.
   ============================================================ */

@media (max-width: 900px) {

  /* ==========================================================
     INSTANCES
     Show only useful field-tech columns:
     TYPE | STATUS | IP/ADDRESS | ACTION
     ========================================================== */

  .wd-device-panel[data-device-panel="connected"] {
    padding: 0 !important;
  }

  .wd-connected-wrap {
    padding: 7px !important;
  }


  /* Toolbar */
  .wd-connected-toolbar {
    padding: 9px !important;
    gap: 8px !important;

    border-radius: 11px !important;
  }

  .wd-connected-summary {
    margin-top: 3px !important;
    font-size: 10px !important;
  }


  /* Controls: filters + search first row */
  .wd-connected-controls {
    display: grid !important;
    grid-template-columns:
      minmax(0, auto)
      minmax(120px, 1fr)
      auto !important;

    gap: 6px !important;
    align-items: center !important;
  }

  .wd-connected-filters {
    display: flex !important;
    min-width: 0 !important;
  }

  .wd-connected-filter {
    min-height: 32px !important;
    padding: 5px 9px !important;

    font-size: 10px !important;
  }

  .wd-connected-search {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;

    padding: 6px 9px !important;

    font-size: 10px !important;
  }


  /* Refresh = compact icon */
  .wd-connected-refresh {
    grid-column: 3 !important;
    grid-row: 1 !important;

    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;

    padding: 0 !important;
  }


  /* Reboot button below toolbar controls */
  .wd-reboot-all-btn {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    min-height: 34px !important;

    margin-top: 0 !important;
    padding: 6px 10px !important;

    font-size: 10px !important;
  }


  /* ----------------------------------------------------------
     TABLE — no desktop-width table on mobile
     ---------------------------------------------------------- */

  .wd-connected-table-wrap {
    width: 100% !important;
    max-height: none !important;

    margin-top: 7px !important;

    overflow-x: hidden !important;
    overflow-y: visible !important;

    border-radius: 11px !important;
  }

  .wd-connected-table {
    width: 100% !important;
    min-width: 0 !important;

    table-layout: fixed !important;
  }


  /*
   Desktop columns:
   1 Type
   2 #
   3 Status
   4 IP
   5 MAC
   6 Port
   7 SSH
   8 Action

   Mobile:
   1 Type
   3 Status
   4 IP
   8 Action
  */

  .wd-connected-table th:nth-child(2),
  .wd-connected-table td:nth-child(2),

  .wd-connected-table th:nth-child(5),
  .wd-connected-table td:nth-child(5),

  .wd-connected-table th:nth-child(6),
  .wd-connected-table td:nth-child(6),

  .wd-connected-table th:nth-child(7),
  .wd-connected-table td:nth-child(7) {
    display: none !important;
  }


  /* Useful mobile widths */
  .wd-connected-table th:nth-child(1),
  .wd-connected-table td:nth-child(1) {
    width: 24% !important;
  }

  .wd-connected-table th:nth-child(3),
  .wd-connected-table td:nth-child(3) {
    width: 24% !important;
  }

  .wd-connected-table th:nth-child(4),
  .wd-connected-table td:nth-child(4) {
    width: 36% !important;
  }

  .wd-connected-table th:nth-child(8),
  .wd-connected-table td:nth-child(8) {
    width: 16% !important;
  }


  .wd-connected-table th,
  .wd-connected-table td {
    padding: 8px 6px !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;

    font-size: 9px !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
  }

  .wd-connected-sort {
    padding: 0 !important;
    font-size: 9px !important;
  }

  .wd-connected-action-head {
    text-align: center !important;
  }


  /* ==========================================================
     SERVICES — remove redundant mobile information
     ========================================================== */


  /*
   Cards:
   1 WebDesk
   2 Remote tunnel services
   3 Remote access
   4 Epoptes
   5 Reverse SSH Health

   Remote access / Epoptes are redundant on phone because
   Actions already provides access and tunnel health is below.
  */

  .wd-device-panel[data-device-panel="services"]
  .wd-device-card:nth-child(3),

  .wd-device-panel[data-device-panel="services"]
  .wd-device-card:nth-child(4) {
    display: none !important;
  }


  /* WebDesk card very compact */
  .wd-device-panel[data-device-panel="services"]
  .wd-device-card:nth-child(1) {
    padding: 9px 11px !important;
  }


  /*
   Remote Tunnel:
   hide "enabled" rows, keep only current ACTIVE state.
  */

  .wd-device-panel[data-device-panel="services"]
  .wd-device-card:nth-child(2)
  .wd-device-service-row:nth-of-type(2),

  .wd-device-panel[data-device-panel="services"]
  .wd-device-card:nth-child(2)
  .wd-device-service-row:nth-of-type(4) {
    display: none !important;
  }


  /* Service rows */
  .wd-device-panel[data-device-panel="services"]
  .wd-device-service-row {
    min-height: 29px !important;

    padding: 5px 0 !important;
  }


  /* ==========================================================
     REVERSE SSH HEALTH
     Keep it because it is operationally important.
     ========================================================== */

  .wd-tunnel-health-card {
    padding: 10px 11px !important;
  }

  .wd-tunnel-health-head {
    margin-bottom: 5px !important;
  }

  .wd-tunnel-health-subtitle {
    display: none !important;
  }

  .wd-tunnel-health-badge {
    padding: 4px 7px !important;
    font-size: 9px !important;
  }


  /*
   For technician mobile screen only listener + SSH validation
   are really useful.

   Rows:
   Reverse port
   Actual listener
   SSH verification
   Reported service
  */

  .wd-tunnel-health-card
  .wd-device-service-row:nth-of-type(2),

  .wd-tunnel-health-card
  .wd-device-service-row:nth-of-type(5) {
    display: none !important;
  }

  .wd-tunnel-health-detail {
    display: none !important;
  }


  /* ==========================================================
     ACTIONS — smaller phone menu
     ========================================================== */

  body > #wdDeviceActionsPopover {
    width: min(245px, calc(100vw - 20px)) !important;

    padding: 5px !important;
  }

  #wdDeviceActions.wd-device-actions-main-menu
  .wd-device-action {
    min-height: 34px !important;

    padding: 6px 8px !important;

    font-size: 10px !important;
  }

  #wdDeviceActions.wd-device-actions-main-menu
  .wd-device-action > :first-child {
    flex-basis: 16px !important;
    width: 16px !important;
  }


  /* ==========================================================
     OVERALL VERTICAL DENSITY
     ========================================================== */

  .wd-device-section-grid {
    gap: 6px !important;
  }

  .wd-device-card {
    padding: 9px 10px !important;
  }

}


/* ============================================================
   EXTRA SMALL PHONE
   ============================================================ */

@media (max-width: 430px) {

  .wd-connected-controls {
    grid-template-columns:
      1fr
      34px !important;
  }

  .wd-connected-filters {
    grid-column: 1 / -1 !important;
  }

  .wd-connected-search {
    grid-column: 1 !important;
  }

  .wd-connected-refresh {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .wd-reboot-all-btn {
    grid-column: 1 / -1 !important;
  }


  .wd-connected-table th,
  .wd-connected-table td {
    padding-left: 4px !important;
    padding-right: 4px !important;

    font-size: 8.5px !important;
  }

}


/* ============================================================
   WEBDESK MAIN PAGE — MOBILE DEVICE CARDS
   Remove graphs / large metric grid on phone only.
   Desktop unchanged.
   ============================================================ */

@media (max-width: 900px) {

  /* Main device card */
  .device-card {
    min-height: 0 !important;
    height: auto !important;

    padding: 12px !important;
    margin-bottom: 8px !important;

    border-radius: 14px !important;
  }

  /*
   Main mobile CPU / RAM / DISK graph area.
   Keep these metrics in Device Details instead.
  */
  .device-card .device-card-grid {
    display: none !important;
  }

  /* Remove empty space previously reserved for graphs */
  .device-card-top {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Compact device headline */
  .device-card-headline {
    min-height: 0 !important;
    gap: 8px !important;
  }

  .device-card-title {
    margin: 0 !important;
  }

  /*
   Actions remain available directly on the card.
   Keep them compact and inside viewport.
  */
  .device-card .actions.actions-redesign {
    margin-top: 10px !important;

    gap: 5px !important;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none !important;
  }

  .device-card .actions.actions-redesign::-webkit-scrollbar {
    display: none !important;
  }

  .device-card .actions.actions-redesign .btn-action,
  .device-card .actions.actions-redesign .btn-more {
    flex: 0 0 auto !important;

    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;

    padding: 0 !important;
  }

}


/* Extra-small phones */
@media (max-width: 430px) {

  .device-card {
    padding: 10px !important;
  }

  .device-card .actions.actions-redesign .btn-action,
  .device-card .actions.actions-redesign .btn-more {
    min-width: 34px !important;
    width: 34px !important;
    height: 34px !important;
  }

}


/* ============================================================
   WEBDESK MAIN PAGE — MOBILE DEVICE CARDS
   Remove graphs / large metric grid on phone only.
   Desktop unchanged.
   ============================================================ */

@media (max-width: 900px) {

  /* Main device card */
  .device-card {
    min-height: 0 !important;
    height: auto !important;

    padding: 12px !important;
    margin-bottom: 8px !important;

    border-radius: 14px !important;
  }

  /*
   Main mobile CPU / RAM / DISK graph area.
   Keep these metrics in Device Details instead.
  */
  .device-card .device-card-grid {
    display: none !important;
  }

  /* Remove empty space previously reserved for graphs */
  .device-card-top {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Compact device headline */
  .device-card-headline {
    min-height: 0 !important;
    gap: 8px !important;
  }

  .device-card-title {
    margin: 0 !important;
  }

  /*
   Actions remain available directly on the card.
   Keep them compact and inside viewport.
  */
  .device-card .actions.actions-redesign {
    margin-top: 10px !important;

    gap: 5px !important;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none !important;
  }

  .device-card .actions.actions-redesign::-webkit-scrollbar {
    display: none !important;
  }

  .device-card .actions.actions-redesign .btn-action,
  .device-card .actions.actions-redesign .btn-more {
    flex: 0 0 auto !important;

    min-width: 36px !important;
    width: 36px !important;
    height: 36px !important;

    padding: 0 !important;
  }

}


/* Extra-small phones */
@media (max-width: 430px) {

  .device-card {
    padding: 10px !important;
  }

  .device-card .actions.actions-redesign .btn-action,
  .device-card .actions.actions-redesign .btn-more {
    min-width: 34px !important;
    width: 34px !important;
    height: 34px !important;
  }

}


/* ============================================================
   WEBDESK MAIN PAGE — MOBILE FINAL COMPACT CARDS
   Hide CPU/RAM/DISK graphs and fix action buttons.
   Desktop unchanged.
   ============================================================ */

@media (max-width: 900px) {

  /* ----------------------------------------------------------
     REMOVE MOBILE CPU / RAM / DISK GRAPH BLOCKS
     ---------------------------------------------------------- */

  .device-card .mini-metrics {
    display: none !important;
  }

  .device-card .mini-chart-card {
    display: none !important;
  }


  /* ----------------------------------------------------------
     COMPACT MAIN DEVICE CARD
     ---------------------------------------------------------- */

  .device-card {
    min-height: 0 !important;
    height: auto !important;

    padding: 10px 11px !important;

    margin-bottom: 7px !important;

    border-radius: 13px !important;
  }

  .device-card-top {
    margin-bottom: 7px !important;
  }

  .device-card-headline {
    gap: 8px !important;
  }

  .device-card-title {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  .device-subtitle {
    margin-top: 2px !important;
    font-size: 10px !important;
  }


  /* ----------------------------------------------------------
     TAGS
     ---------------------------------------------------------- */

  .device-tags {
    margin-top: 6px !important;
    margin-bottom: 7px !important;
  }

  .device-tags .tag,
  .device-tags span {
    font-size: 9px !important;
    padding: 4px 7px !important;
  }


  /* ----------------------------------------------------------
     ACTIONS
     Icon-only on mobile.
     Prevent text overlap completely.
     ---------------------------------------------------------- */

  .device-card .actions.actions-redesign {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    gap: 5px !important;

    margin-top: 7px !important;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none !important;
  }

  .device-card .actions.actions-redesign::-webkit-scrollbar {
    display: none !important;
  }


  .device-card .actions.actions-redesign .btn-action,
  .device-card .actions.actions-redesign .btn-more {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    font-size: 0 !important;
    line-height: 0 !important;

    white-space: nowrap !important;
  }


  /* Keep icons visible despite font-size:0 on button */
  .device-card .actions.actions-redesign
  .btn-action > svg,

  .device-card .actions.actions-redesign
  .btn-action > img,

  .device-card .actions.actions-redesign
  .btn-action > span,

  .device-card .actions.actions-redesign
  .btn-more > svg,

  .device-card .actions.actions-redesign
  .btn-more > span {
    font-size: 14px !important;
    line-height: 1 !important;
  }


  .device-card .actions.actions-redesign
  .action-app-svg,

  .device-card .actions.actions-redesign
  .action-rustdesk-svg,

  .device-card .actions.actions-redesign
  .action-anydesk-svg {
    width: 16px !important;
    height: 16px !important;
  }


  .device-card .actions.actions-redesign
  .action-terminal-icon,

  .device-card .actions.actions-redesign
  .action-globe,

  .device-card .actions.actions-redesign
  .action-edit-icon,

  .device-card .actions.actions-redesign
  .epoptes-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 16px !important;
    height: 16px !important;

    font-size: 14px !important;
    line-height: 1 !important;
  }


  /* ----------------------------------------------------------
     OFFLINE CARDS
     ---------------------------------------------------------- */

  .device-card.offline,
  .device-card[data-status="offline"] {
    opacity: 1 !important;
  }


  /* ----------------------------------------------------------
     GROUP / SITE CARDS
     ---------------------------------------------------------- */

  .site-card,
  .group-card {
    min-height: 0 !important;
  }

}


/* ============================================================
   EXTRA SMALL PHONE
   ============================================================ */

@media (max-width: 430px) {

  .device-card {
    padding: 9px !important;
  }

  .device-card .actions.actions-redesign {
    gap: 4px !important;
  }

  .device-card .actions.actions-redesign .btn-action,
  .device-card .actions.actions-redesign .btn-more {
    flex-basis: 32px !important;

    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;
  }

}


/* ============================================================
   WEBDESK MAIN PAGE — MOBILE ACTIONS ICON ONLY
   Fix text clipping/overlap on device cards.
   Desktop unchanged.
   ============================================================ */

@media (max-width: 900px) {

  /* Slightly tighter card after removing graphs */
  .device-card {
    padding: 9px 10px !important;
  }

  .device-card-top {
    margin-bottom: 5px !important;
  }

  .device-tags {
    margin-top: 5px !important;
    margin-bottom: 6px !important;
  }


  /* ----------------------------------------------------------
     ACTION ROW
     ---------------------------------------------------------- */

  .device-card .actions.actions-redesign {
    display: flex !important;
    align-items: center !important;

    gap: 5px !important;

    width: 100% !important;

    margin-top: 6px !important;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none !important;
  }

  .device-card .actions.actions-redesign::-webkit-scrollbar {
    display: none !important;
  }


  /* All action buttons fixed square size */
  .device-card .actions.actions-redesign .btn-action,
  .device-card .actions.actions-redesign .btn-more {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    font-size: 0 !important;
    line-height: 0 !important;
  }


  /* ----------------------------------------------------------
     HIDE ALL TEXT LABELS INSIDE ACTION BUTTONS
     ---------------------------------------------------------- */

  .device-card .actions.actions-redesign
  .btn-action > span:not(
    .action-terminal-icon
  ):not(
    .action-globe
  ):not(
    .action-edit-icon
  ):not(
    .epoptes-btn-icon
  ):not(
    .action-app-svg
  ):not(
    .action-rustdesk-svg
  ):not(
    .action-anydesk-svg
  ) {
    display: none !important;
  }


  /* ----------------------------------------------------------
     ICON GEOMETRY
     ---------------------------------------------------------- */

  .device-card .actions.actions-redesign
  .action-terminal-icon,

  .device-card .actions.actions-redesign
  .action-globe,

  .device-card .actions.actions-redesign
  .action-edit-icon,

  .device-card .actions.actions-redesign
  .epoptes-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;

    margin: 0 !important;

    font-size: 14px !important;
    line-height: 1 !important;
  }


  .device-card .actions.actions-redesign
  .action-app-svg,

  .device-card .actions.actions-redesign
  .action-rustdesk-svg,

  .device-card .actions.actions-redesign
  .action-anydesk-svg {
    display: block !important;

    width: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;

    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;

    margin: 0 !important;
  }


  /* Generic nested SVG */
  .device-card .actions.actions-redesign
  .btn-action svg,

  .device-card .actions.actions-redesign
  .btn-more svg {
    width: 16px !important;
    height: 16px !important;

    margin: 0 !important;
  }


  /* More button */
  .device-card .actions.actions-redesign
  .btn-more {
    font-size: 0 !important;
  }

  .device-card .actions.actions-redesign
  .btn-more::after {
    content: "•••" !important;

    display: block !important;

    font-size: 14px !important;
    line-height: 1 !important;

    letter-spacing: 2px !important;
  }


  /* ----------------------------------------------------------
     DISABLED / OFFLINE
     Keep icons visible, just dimmed.
     ---------------------------------------------------------- */

  .device-card .actions.actions-redesign
  .btn-action:disabled,

  .device-card .actions.actions-redesign
  .btn-action.disabled {
    opacity: .38 !important;
  }

}


/* Extra-small phones */
@media (max-width: 430px) {

  .device-card .actions.actions-redesign {
    gap: 4px !important;
  }

  .device-card .actions.actions-redesign .btn-action,
  .device-card .actions.actions-redesign .btn-more {
    flex-basis: 32px !important;

    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

}


/* ============================================================
   WEBDESK MAIN PAGE — REAL IPHONE ACTION ROW FIX
   Force action buttons into one horizontal icon row.
   Desktop unchanged.
   ============================================================ */

@media (max-width: 900px) {

  .device-card .actions.actions-redesign {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 5px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 7px 0 0 0 !important;
    padding: 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    white-space: nowrap !important;

    scrollbar-width: none !important;
  }

  .device-card .actions.actions-redesign::-webkit-scrollbar {
    display: none !important;
  }


  .device-card .actions.actions-redesign > * {
    position: relative !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
  }


  .device-card .actions.actions-redesign .btn-action,
  .device-card .actions.actions-redesign .btn-more,
  .device-card .actions.actions-redesign .action-more {
    display: inline-flex !important;

    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

    float: none !important;

    position: relative !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* Prevent wrapper around More from becoming full-width/column */
  .device-card .actions.actions-redesign .action-more {
    flex: 0 0 34px !important;

    align-self: auto !important;
  }


  /* More button itself */
  .device-card .actions.actions-redesign
  .action-more > .btn-more {
    position: relative !important;

    inset: auto !important;

    display: inline-flex !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;
  }


  /* Card should follow actual content height */
  .device-card {
    min-height: 0 !important;
    height: auto !important;
  }

}


/* Actual narrow iPhones */
@media (max-width: 430px) {

  .device-card .actions.actions-redesign {
    gap: 4px !important;
  }

  .device-card .actions.actions-redesign > *,
  .device-card .actions.actions-redesign .btn-action,
  .device-card .actions.actions-redesign .btn-more,
  .device-card .actions.actions-redesign .action-more,
  .device-card .actions.actions-redesign
  .action-more > .btn-more {
    flex-basis: 32px !important;

    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

}


/* ============================================================
   WEBDESK ACTION ICONS — HOVER CLIPPING FIX
   Prevent buttons from moving/cutting at top edge.
   ============================================================ */

.device-card .actions.actions-redesign {
  overflow-y: visible !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}


/* Buttons must never move on hover/focus/active */
.device-card .actions.actions-redesign .btn-action,
.device-card .actions.actions-redesign .btn-more,
.device-card .actions.actions-redesign .action-more {
  transform: none !important;
}


/* Same position in every state */
.device-card .actions.actions-redesign .btn-action:hover,
.device-card .actions.actions-redesign .btn-action:focus,
.device-card .actions.actions-redesign .btn-action:active,

.device-card .actions.actions-redesign .btn-more:hover,
.device-card .actions.actions-redesign .btn-more:focus,
.device-card .actions.actions-redesign .btn-more:active {
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
}


/* Keep hover highlight inside the existing geometry */
.device-card .actions.actions-redesign .btn-action:hover,
.device-card .actions.actions-redesign .btn-more:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 12px rgba(255,255,255,.05) !important;
}


/* Mobile row must still stay horizontal */
@media (max-width: 900px) {

  .device-card .actions.actions-redesign {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

}

/* WEBDESK MOBILE MORE BUTTON — PERFECT CENTER */

@media (max-width: 900px) {

  .device-card .actions.actions-redesign .btn-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    text-align: center !important;
  }

  .device-card .actions.actions-redesign .btn-more::after {
    content: "•••" !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: 13px !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;

    transform: translateY(-1px) !important;
  }

}


/* ============================================================
   WEBDESK MOBILE MORE BUTTON — FINAL ABSOLUTE CENTER
   ============================================================ */

@media (max-width: 900px) {

  .device-card .actions.actions-redesign .action-more {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .device-card .actions.actions-redesign .btn-more {
    position: relative !important;

    display: block !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    font-size: 0 !important;
    line-height: 0 !important;

    overflow: hidden !important;
  }

  /* Hide every existing icon/text inside More button */
  .device-card .actions.actions-redesign .btn-more > * {
    visibility: hidden !important;
  }

  /* Remove any older pseudo content */
  .device-card .actions.actions-redesign .btn-more::before {
    content: none !important;
  }

  /* Create one absolutely centered dots icon */
  .device-card .actions.actions-redesign .btn-more::after {
    content: "•••" !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: auto !important;
    height: auto !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translate(-50%, -50%) !important;

    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    letter-spacing: 1px !important;
    white-space: nowrap !important;

    color: var(--text-soft) !important;
  }

}


@media (max-width: 430px) {

  .device-card .actions.actions-redesign .btn-more {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

}


/* ============================================================
   WEBDESK MAIN MOBILE DEVICE HEADER — CLEAN VERSION
   Remove avatar + duplicate subtitle + black hostname button.
   Desktop unchanged.
   ============================================================ */

@media (max-width: 900px) {

  /* Remove left square with initials / first 2 hostname chars */
  .mobile-cards .device-card .device-avatar {
    display: none !important;
  }

  /* Remove duplicate alias/hostname line below title */
  .mobile-cards .device-card .device-subtitle {
    display: none !important;
  }

  /* Headline no longer reserves space for avatar */
  .mobile-cards .device-card .device-card-headline {
    display: flex !important;
    align-items: center !important;

    gap: 0 !important;

    min-width: 0 !important;
  }

  .mobile-cards .device-card .device-card-headline > div {
    min-width: 0 !important;
  }

  /* Hostname becomes plain clickable text */
  .mobile-cards .device-card
  .device-card-title.wd-device-hostname {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: inline-block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;

    background: transparent !important;

    color: var(--text) !important;

    font-family: var(--wd-ui-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;

    text-align: left !important;
    text-decoration: none !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    cursor: pointer !important;
  }

  /* Hover: no black background / no movement */
  .mobile-cards .device-card
  .device-card-title.wd-device-hostname:hover,

  .mobile-cards .device-card
  .device-card-title.wd-device-hostname:focus,

  .mobile-cards .device-card
  .device-card-title.wd-device-hostname:active {
    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    transform: none !important;

    color: var(--text) !important;
  }

  /* Compact top row after removing avatar/subtitle */
  .mobile-cards .device-card .device-card-top {
    align-items: center !important;

    margin-bottom: 7px !important;
  }

}


/* Extra-small iPhones */
@media (max-width: 430px) {

  .mobile-cards .device-card
  .device-card-title.wd-device-hostname {
    font-size: 15px !important;
  }

}


/* ============================================================
   WEBDESK MOBILE DEVICE HEADER — CLICKABLE OPEN ZONE
   ============================================================ */

@media (max-width: 900px) {

  .mobile-cards .device-card .mobile-device-open-zone {
    position: relative !important;

    cursor: pointer !important;

    border-radius: 10px !important;

    padding: 4px 5px !important;
    margin: -4px -5px 7px -5px !important;

    transition:
      background .15s ease,
      box-shadow .15s ease !important;
  }

  .mobile-cards .device-card .mobile-device-open-zone:hover,
  .mobile-cards .device-card .mobile-device-open-zone:focus-visible {
    background: rgba(255,255,255,.035) !important;

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.07) !important;

    outline: none !important;
  }

  .mobile-cards .device-card
  .device-card-title.wd-device-hostname {
    display: inline-flex !important;
    align-items: center !important;

    gap: 6px !important;
  }

  .mobile-cards .device-card
  .mobile-device-open-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 16px !important;
    height: 16px !important;

    color: var(--muted) !important;

    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    opacity: .75 !important;

    transform: translateY(-1px) !important;
  }

  .mobile-cards .device-card
  .mobile-device-open-zone:hover
  .mobile-device-open-chevron,

  .mobile-cards .device-card
  .mobile-device-open-zone:focus-visible
  .mobile-device-open-chevron {
    opacity: 1 !important;
    color: var(--text-soft) !important;
  }

}


/* Touch-first hint:
   keep chevron visible even without hover */
@media (hover: none) and (pointer: coarse) {

  .mobile-cards .device-card
  .mobile-device-open-chevron {
    opacity: .9 !important;
  }

}


/* ==========================================================
   WEBDESK PROFIT CENTER COUNTERS V1
   ========================================================== */

.wd-counters-wrap {
  width: 100%;
  min-width: 0;
}

.wd-counters-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.wd-counters-summary {
  margin-top: 4px;
  font-size: 12px;
  opacity: .72;
}

.wd-counters-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.wd-counters-mode {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  font-size: 12px;
  white-space: nowrap;
}

.wd-counters-refresh {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: inherit;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
}

.wd-counters-refresh:hover {
  background: rgba(255,255,255,.07);
}

.wd-counters-loading,
.wd-counters-error {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
}

.wd-counters-loading {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}

.wd-counters-error {
  border: 1px solid rgba(255,100,100,.24);
  background: rgba(255,80,80,.06);
}

.wd-counters-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}

.wd-counters-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 12px;
}

.wd-counters-table th,
.wd-counters-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
  white-space: nowrap;
}

.wd-counters-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(20,23,27,.98);
  font-weight: 500;
}

.wd-counters-table tbody tr:last-child td {
  border-bottom: 0;
}

.wd-counters-table tbody tr:hover td {
  background: rgba(255,255,255,.025);
}

.wd-counters-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.wd-counters-game {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wd-counters-table td.positive {
  font-weight: 500;
}

.wd-counters-table td.negative {
  font-weight: 500;
}

.wd-counters-empty {
  text-align: center !important;
  padding: 24px 12px !important;
  opacity: .62;
}

@media (max-width: 760px) {

  .wd-counters-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .wd-counters-controls {
    width: 100%;
    justify-content: space-between;
  }

  .wd-counters-table {
    min-width: 760px;
  }
}


/* WEBDESK PROFIT CENTER COUNTERS TOTAL ROW */
.wd-counters-total-row td {
  border-top: 1px solid rgba(255,255,255,.18);
  font-weight: 600;
  background: rgba(255,255,255,.03);
}


/* ==========================================================
   WEBDESK JACKPOT COUNTERS V1
   ========================================================== */

.wd-jackpot-section {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.wd-jackpot-toolbar {
  margin-bottom: 14px;
}

.wd-jackpot-table {
  min-width: 800px;
}

.wd-jackpot-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  font-size: 11px;
  line-height: 1;
}

.wd-jackpot-status.counting::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: .75;
}

@media (max-width: 760px) {
  .wd-jackpot-table {
    min-width: 760px;
  }
}




/* ==========================================================
   WEBDESK LIVE TABLE COUNTERS V1
   ========================================================== */

.wd-live-table-section {
  margin-top: 26px;
}

.wd-live-table-table {
  min-width: 1220px;
}

.wd-live-table-table th,
.wd-live-table-table td {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .wd-live-table-table {
    min-width: 1220px;
  }
}


/* ============================================================
   WEBDESK DEVICE DETAILS — DESKTOP LAYOUT FIX 2026-09-13
   Wider modal + Services containment + Counters width
   ============================================================ */

@media (min-width: 901px) {

  /* Use available desktop width.
     1480px fits the Live Table counters without making
     normal tabs unnecessarily oversized. */
  .wd-device-dialog {
    width: min(1480px, calc(100vw - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
  }


  /* Content must always stay inside modal geometry. */
  .wd-device-content,
  #wdDeviceContent {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }


  /* Every active panel occupies the modal content area,
     never an intrinsic / oversized grid width. */
  .wd-device-panel.active {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;

    box-sizing: border-box !important;
  }


  /* ----------------------------------------------------------
     SERVICES
     Keep complete Services layout inside modal.
     ---------------------------------------------------------- */

  .wd-device-panel[data-device-panel="services"].active {
    overflow: visible !important;
  }

  .wd-device-panel[data-device-panel="services"]
  .wd-device-section-grid {
    display: grid !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    grid-auto-rows: max-content !important;

    gap: 12px !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }

  .wd-device-panel[data-device-panel="services"]
  .wd-device-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }

  /* Reverse SSH Health stays full width below the two columns. */
  .wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-card {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }


  /* ----------------------------------------------------------
     COUNTERS
     Let Counters use full modal width.
     ---------------------------------------------------------- */

  .wd-device-panel[data-device-panel="counters"].active {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .wd-device-panel[data-device-panel="counters"]
  .wd-counters-table-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    box-sizing: border-box !important;
  }

  /* Normal counters and Jackpot normally fit without scroll. */
  .wd-device-panel[data-device-panel="counters"]
  .wd-counters-table:not(.wd-live-table-table) {
    width: 100% !important;
  }

  /* Live Table table may still scroll on smaller desktop windows,
     but fits naturally on a 1440/1536 class display. */
  .wd-live-table-table {
    width: 100% !important;
    min-width: 1220px !important;
  }
}


/* Medium desktop / small laptop */
@media (min-width: 901px) and (max-width: 1250px) {

  .wd-device-dialog {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  .wd-device-panel[data-device-panel="services"]
  .wd-device-section-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* Phone behaviour remains the existing full-screen/mobile layout. */



/* ============================================================
   WEBDESK DEVICE DETAILS — DESKTOP HEADER FIX 2026-09-13
   Prevent subtitle / device position from being clipped by tabs
   ============================================================ */

@media (min-width: 901px) {

  .wd-device-dialog-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    min-height: 92px !important;
    height: auto !important;

    padding: 12px 18px !important;

    box-sizing: border-box !important;

    overflow: visible !important;
  }


  .wd-device-heading {
    display: flex !important;
    align-items: center !important;

    min-width: 0 !important;

    gap: 14px !important;
  }


  .wd-device-heading-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    min-width: 0 !important;

    overflow: visible !important;
  }


  .wd-device-title-row {
    display: flex !important;
    align-items: center !important;

    min-height: 28px !important;

    gap: 10px !important;
  }


  .wd-device-title-row h2 {
    margin: 0 !important;
    padding: 0 !important;

    line-height: 1.1 !important;
  }


  .wd-device-subtitle {
    display: block !important;

    margin-top: 4px !important;

    min-height: 17px !important;

    line-height: 1.3 !important;

    overflow: visible !important;
  }


  .wd-device-position {
    display: block !important;

    margin-top: 2px !important;

    min-height: 16px !important;

    line-height: 1.3 !important;

    overflow: visible !important;
  }


  .wd-device-header-actions {
    align-self: center !important;

    flex: 0 0 auto !important;

    margin-left: 18px !important;
  }


  /* Tabs must always start below the complete header. */
  .wd-device-tabs {
    position: relative !important;

    top: auto !important;
    bottom: auto !important;

    margin-top: 0 !important;

    clear: both !important;
  }
}


/* ============================================================
   WEBDESK DEVICE DETAILS — DESKTOP TABS FIX 2026-09-13
   Keep tabs fully visible between header and content
   ============================================================ */

@media (min-width: 901px) {

  .wd-device-tabs {
    position: relative !important;

    display: flex !important;
    align-items: stretch !important;

    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;

    padding: 0 18px !important;
    margin: 0 !important;

    gap: 4px !important;

    flex: 0 0 48px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    box-sizing: border-box !important;

    z-index: 20 !important;
  }

  .wd-device-tab,
  .wd-device-tabs .wd-device-actions-tab,
  .wd-device-top-actions-wrap > .wd-device-tab {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 47px !important;
    min-height: 47px !important;

    padding: 0 16px !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;
  }

  .wd-device-content,
  #wdDeviceContent {
    position: relative !important;

    flex: 1 1 auto !important;

    margin-top: 0 !important;

    z-index: 1 !important;
  }

}


/* ============================================================
   WEBDESK DEVICE TABS — HOVER BORDER CLIPPING FIX
   ============================================================ */

@media (min-width: 901px) {

  .wd-device-tabs {
    height: 52px !important;
    min-height: 52px !important;
    flex-basis: 52px !important;

    padding: 2px 18px !important;

    box-sizing: border-box !important;
  }

  .wd-device-tab,
  .wd-device-tabs .wd-device-actions-tab,
  .wd-device-top-actions-wrap > .wd-device-tab {
    height: 47px !important;
    min-height: 47px !important;
  }

}



/* ==========================================================
   WEBDESK_DEVICE_LICENSING_CSS_MARKER
   Device Overview - Licensing
   ========================================================== */

.wd-license-card {
  overflow:hidden;
}

.wd-license-card[hidden] {
  display:none !important;
}

.wd-license-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.wd-license-subtitle {
  margin-top:5px;
  font-size:12px;
  color:var(--muted);
}

.wd-license-overall {
  flex:0 0 auto;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
}

.wd-license-overall.valid {
  color:#55e69d;
  border-color:rgba(52,211,153,.34);
  background:rgba(52,211,153,.10);
  box-shadow:
    0 0 18px rgba(52,211,153,.08);
}

.wd-license-overall.warning {
  color:#f8c55c;
  border-color:rgba(245,158,11,.38);
  background:rgba(245,158,11,.10);
  box-shadow:
    0 0 18px rgba(245,158,11,.08);
}

.wd-license-overall.expired {
  color:#ff7474;
  border-color:rgba(239,68,68,.38);
  background:rgba(239,68,68,.10);
  box-shadow:
    0 0 18px rgba(239,68,68,.08);
}

.wd-license-overall.unknown {
  color:var(--muted);
  background:rgba(255,255,255,.04);
}


.wd-license-summary {
  display:grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-bottom:14px;
}

.wd-license-summary-item {
  min-width:0;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}

.wd-license-summary-item span {
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.wd-license-summary-item strong {
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}


.wd-license-rows {
  display:flex;
  flex-direction:column;
  gap:7px;
}

.wd-license-row {
  display:grid;
  grid-template-columns:
    minmax(240px, 1fr)
    140px
    minmax(130px, auto);
  align-items:center;
  gap:14px;
  min-height:51px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      rgba(255,255,255,.012)
    );
}

.wd-license-row-main {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.wd-license-dot {
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:50%;
  background:#818896;
}

.wd-license-dot.valid {
  background:#36d98b;
  box-shadow:
    0 0 11px rgba(54,217,139,.65);
}

.wd-license-dot.warning {
  background:#f5b942;
  box-shadow:
    0 0 11px rgba(245,185,66,.58);
}

.wd-license-dot.expired {
  background:#ef5350;
  box-shadow:
    0 0 11px rgba(239,83,80,.62);
}

.wd-license-name-wrap {
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:3px;
}

.wd-license-name {
  overflow:hidden;
  color:var(--text);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.wd-license-game-id {
  color:var(--muted);
  font-size:9px;
}

.wd-license-date {
  min-width:0;
}

.wd-license-date span {
  display:block;
  margin-bottom:3px;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.wd-license-date strong {
  color:var(--text);
  font-size:11px;
}

.wd-license-badge {
  justify-self:end;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}

.wd-license-badge.valid {
  color:#55e69d;
  border-color:rgba(52,211,153,.25);
  background:rgba(52,211,153,.08);
}

.wd-license-badge.warning {
  color:#f8c55c;
  border-color:rgba(245,158,11,.28);
  background:rgba(245,158,11,.08);
}

.wd-license-badge.expired {
  color:#ff7474;
  border-color:rgba(239,68,68,.28);
  background:rgba(239,68,68,.08);
}

.wd-license-badge.unknown {
  color:var(--muted);
  background:rgba(255,255,255,.03);
}


@media (max-width: 900px) {

  .wd-license-summary {
    grid-template-columns:1fr;
  }

  .wd-license-row {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }

  .wd-license-date {
    grid-column:1;
    padding-left:19px;
  }

  .wd-license-badge {
    grid-column:2;
    grid-row:1 / span 2;
  }
}


@media (max-width: 600px) {

  .wd-license-head {
    align-items:flex-start;
  }

  .wd-license-row {
    grid-template-columns:1fr;
  }

  .wd-license-date {
    grid-column:auto;
    padding-left:19px;
  }

  .wd-license-badge {
    grid-column:auto;
    grid-row:auto;
    justify-self:start;
    margin-left:19px;
  }
}



/* WEBDESK_DEVICE_LOADING_SPINNER_CSS_MARKER */

@keyframes wdLoadingSpinner {
  to {
    transform: rotate(360deg);
  }
}

.wd-loading-spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;
  border: 2px solid rgba(126, 156, 196, .28);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: wdLoadingSpinner .72s linear infinite;
}

.wd-loading-text {
  min-width: 0;
}

.wd-device-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 160px;
}

.wd-device-loading[hidden] {
  display: none !important;
}

.wd-device-loading.error {
  color: #ff8f8f;
}

.wd-loading-error-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}

.wd-inline-loading {
  align-items: center;
  gap: 9px;
}

.wd-inline-loading:not([hidden]) {
  display: flex;
}

.wd-inline-loading .wd-loading-spinner {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .wd-loading-spinner {
    animation-duration: 1.8s;
  }
}


/* WEBDESK_TAB_LOADING_CSS_MARKER */

.wd-tab-loading {
  min-height: 150px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #9eb0c7;
  font-size: 13px;
}

.wd-tab-loading[hidden] {
  display: none !important;
}

.wd-tab-loading .wd-loading-spinner {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}


/* WEBDESK_UNIFIED_TAB_LOADERS_FINAL_MARKER */

/*
 * Instances and Counters use exactly the same loading row.
 * It is part of normal document flow.
 * No top/left/absolute positioning.
 */
.wd-unified-tab-loader {
  box-sizing: border-box;

  width: 100%;
  height: 58px;
  min-height: 58px;

  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  color: #9eb0c7;
  font-size: 13px;
  line-height: 1;

  white-space: nowrap;
}

.wd-unified-tab-loader[hidden] {
  display: none !important;
}

.wd-unified-tab-loader .wd-loading-spinner {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}


/*
 * During initial Counters loading we only want:
 *
 *     Loading Counters...
 *
 * Do not simultaneously show the internal Profit Center,
 * Jackpot or Live Table loaders.
 */
[data-device-panel="counters"].wd-main-loading
  #wdCountersLoading,

[data-device-panel="counters"].wd-main-loading
  #wdJackpotLoading,

[data-device-panel="counters"].wd-main-loading
  #wdLiveTableLoading {
  display: none !important;
}


/*
 * Keep the Counters panel from collapsing while all
 * counter sections are still waiting for availability.
 */
[data-device-panel="counters"].wd-main-loading {
  min-height: 170px;
}

/* ============================================================
   WEBDESK HARDWARE CLEAN FINAL V5
   WEBDESK_HARDWARE_CLEAN_FINAL_V5_MARKER

   Desktop:
   SYSTEM | MEMORY | DISK | MOTHERBOARD / BIOS | TERMINAL HOME

   This is the ONLY final Hardware layout override.
   ============================================================ */


/* ------------------------------------------------------------
   PANEL
   ------------------------------------------------------------ */

[data-device-panel="hardware"] {
  min-width: 0 !important;
}


/* ------------------------------------------------------------
   BASE CARD APPEARANCE
   ------------------------------------------------------------ */

[data-device-panel="hardware"] .wd-hw-card {
  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 11px !important;

  box-sizing: border-box !important;

  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 10px !important;

  background: rgba(255,255,255,.018) !important;

  box-shadow: none !important;

  overflow: hidden !important;
}

[data-device-panel="hardware"] .wd-hw-card:hover {
  transform: none !important;
  box-shadow: none !important;
}


/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */

[data-device-panel="hardware"] .wd-hw-card-head {
  display: flex !important;

  align-items: flex-start !important;
  justify-content: space-between !important;

  gap: 6px !important;

  min-height: 42px !important;

  margin: 0 0 8px 0 !important;
  padding: 0 0 8px 0 !important;

  box-sizing: border-box !important;

  border-bottom:
    1px solid rgba(255,255,255,.07) !important;
}

[data-device-panel="hardware"]
.wd-hw-card-head .wd-device-card-title {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;

  letter-spacing: .045em !important;
  text-transform: uppercase !important;

  white-space: normal !important;
}

[data-device-panel="hardware"] .wd-hw-card-subtitle {
  margin-top: 2px !important;

  font-size: 8px !important;
  line-height: 1.25 !important;

  color: rgba(255,255,255,.38) !important;
}


/* ------------------------------------------------------------
   KEY / VALUE
   ------------------------------------------------------------ */

[data-device-panel="hardware"] .wd-hw-kv {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  column-gap: 9px !important;
  row-gap: 0 !important;

  width: 100% !important;
  min-width: 0 !important;
}

[data-device-panel="hardware"] .wd-hw-kv > div {
  min-width: 0 !important;

  padding: 4px 0 !important;

  border-bottom:
    1px solid rgba(255,255,255,.035) !important;
}

[data-device-panel="hardware"] .wd-hw-kv span {
  display: block !important;

  margin-bottom: 2px !important;

  color: rgba(255,255,255,.43) !important;

  font-size: 8px !important;
  line-height: 1.15 !important;
  font-weight: 500 !important;

  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}

[data-device-panel="hardware"] .wd-hw-kv strong {
  display: block !important;

  min-width: 0 !important;

  color: rgba(255,255,255,.88) !important;

  font-size: 9px !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;

  overflow-wrap: anywhere !important;
}

[data-device-panel="hardware"] .wd-hw-full {
  grid-column: 1 / -1 !important;
}


/* ------------------------------------------------------------
   INFO BLOCKS
   ------------------------------------------------------------ */

[data-device-panel="hardware"] .wd-hw-info-block {
  margin: 6px 0 0 0 !important;

  padding: 7px 0 6px 0 !important;

  min-height: 0 !important;

  border-top:
    1px solid rgba(255,255,255,.045) !important;

  border-bottom: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color: rgba(255,255,255,.82) !important;

  font-size: 9px !important;
  line-height: 1.35 !important;
}


/* ------------------------------------------------------------
   MEMORY
   ------------------------------------------------------------ */

[data-device-panel="hardware"] .wd-hw-memory-physical {
  margin: 7px 0 0 0 !important;
  padding: 7px 0 0 0 !important;

  border-top:
    1px solid rgba(255,255,255,.055) !important;

  background: transparent !important;
}

[data-device-panel="hardware"] .wd-memory-physical-title {
  margin: 0 0 4px 0 !important;
  padding: 0 !important;

  color: rgba(255,255,255,.48) !important;

  font-size: 8px !important;
  font-weight: 600 !important;

  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

[data-device-panel="hardware"] .wd-hw-memory-modules {
  display: grid !important;

  grid-template-columns: 1fr !important;

  gap: 5px !important;

  margin: 6px 0 0 0 !important;
}

[data-device-panel="hardware"] .wd-memory-module {
  min-width: 0 !important;

  padding: 5px 6px !important;

  border:
    1px solid rgba(255,255,255,.065) !important;

  border-radius: 6px !important;

  background:
    rgba(255,255,255,.014) !important;
}

[data-device-panel="hardware"] .wd-memory-module-head {
  gap: 5px !important;

  font-size: 8px !important;
}

[data-device-panel="hardware"] .wd-memory-module-sub {
  margin-top: 3px !important;

  font-size: 7px !important;
  line-height: 1.3 !important;
}

[data-device-panel="hardware"] .wd-memory-status {
  margin: 5px 0 0 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;

  font-size: 8px !important;
}


/* ------------------------------------------------------------
   HISTORY
   ------------------------------------------------------------ */

[data-device-panel="hardware"] .wd-hw-history {
  margin-top: auto !important;

  padding: 8px 0 0 0 !important;

  border-top:
    1px solid rgba(255,255,255,.055) !important;
}

[data-device-panel="hardware"] .wd-hardware-history-title {
  margin: 0 0 4px 0 !important;

  color: rgba(255,255,255,.48) !important;

  font-size: 8px !important;
  font-weight: 600 !important;

  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

[data-device-panel="hardware"]
.wd-hardware-history
.wd-device-history-chart {
  height: 34px !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}

[data-device-panel="hardware"]
.wd-hardware-history
.wd-device-history-meta {
  margin-top: 3px !important;

  color: rgba(255,255,255,.38) !important;

  font-size: 7px !important;
  line-height: 1.2 !important;

  white-space: nowrap !important;
}


/* ------------------------------------------------------------
   TERMINAL HOME
   ------------------------------------------------------------ */

[data-device-panel="hardware"] .wd-hw-terminal-percent {
  flex: 0 0 auto !important;

  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

[data-device-panel="hardware"] .wd-hw-terminal-body {
  margin-top: auto !important;

  padding: 8px 0 0 0 !important;

  border-top:
    1px solid rgba(255,255,255,.055) !important;

  background: transparent !important;
}

[data-device-panel="hardware"] .wd-terminal-home {
  border: 0 !important;
  background: transparent !important;
}

[data-device-panel="hardware"] .wd-terminal-home-meter {
  height: 5px !important;

  margin: 0 !important;
}

[data-device-panel="hardware"] .wd-terminal-home-status {
  margin: 5px 0 0 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;

  font-size: 8px !important;
}


/* ============================================================
   DESKTOP — EXACTLY FIVE COLUMNS / ONE ROW
   ============================================================ */

@media (min-width: 1181px) {

  [data-device-panel="hardware"] .wd-hw-five-row {
    display: grid !important;

    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    grid-template-rows:
      minmax(0, auto) !important;

    gap: 10px !important;

    align-items: stretch !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /*
   * IMPORTANT:
   * direct children only.
   * Old generic .wd-device-card positioning cannot win.
   */

  [data-device-panel="hardware"]
  .wd-hw-five-row > .wd-hw-card {

    display: flex !important;
    flex-direction: column !important;

    position: relative !important;

    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  /* Exact order */

  [data-device-panel="hardware"]
  .wd-hw-five-row > .wd-hw-system {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  [data-device-panel="hardware"]
  .wd-hw-five-row > .wd-hw-memory {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  [data-device-panel="hardware"]
  .wd-hw-five-row > .wd-hw-disk {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  [data-device-panel="hardware"]
  .wd-hw-five-row > .wd-hw-board {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  [data-device-panel="hardware"]
  .wd-hw-five-row > .wd-hw-terminal {
    grid-column: 5 !important;
    grid-row: 1 !important;
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1180px) and (min-width: 721px) {

  [data-device-panel="hardware"] .wd-hw-five-row {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;
  }

  [data-device-panel="hardware"]
  .wd-hw-five-row > .wd-hw-card {

    display: flex !important;
    flex-direction: column !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;

    margin: 0 !important;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px) {

  [data-device-panel="hardware"] .wd-hw-five-row {
    display: flex !important;
    flex-direction: column !important;

    gap: 10px !important;

    width: 100% !important;
  }

  [data-device-panel="hardware"]
  .wd-hw-five-row > .wd-hw-card {

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;

    margin: 0 !important;
  }

}


/* ============================================================
   WEBDESK HARDWARE ABSOLUTE FINAL V7
   WEBDESK_HARDWARE_ABSOLUTE_FINAL_V7_MARKER

   Desktop:
   SYSTEM | MEMORY | DISK | MOTHERBOARD / BIOS | TERMINAL HOME
   ============================================================ */

@media screen and (min-width: 1181px) {

  /*
   * HARD RESET OF THE CONTAINER.
   * Five direct cards = five columns = one row.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row {

    display: grid !important;

    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    grid-template-rows:
      minmax(0, auto) !important;

    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;

    column-gap: 10px !important;
    row-gap: 0 !important;

    align-items: stretch !important;
    justify-items: stretch !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * HARD RESET OF ALL FIVE DIRECT CARDS.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row
  > div.wd-device-card.wd-hw-card {

    position: static !important;

    float: none !important;
    clear: none !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    align-self: stretch !important;
    justify-self: stretch !important;

    grid-row-start: 1 !important;
    grid-row-end: 2 !important;

    transform: none !important;
  }


  /*
   * EXACT POSITION.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row
  > div.wd-hw-system {

    grid-column-start: 1 !important;
    grid-column-end: 2 !important;

    grid-row-start: 1 !important;
    grid-row-end: 2 !important;
  }


  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row
  > div.wd-hw-memory {

    grid-column-start: 2 !important;
    grid-column-end: 3 !important;

    grid-row-start: 1 !important;
    grid-row-end: 2 !important;
  }


  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row
  > div.wd-hw-disk {

    grid-column-start: 3 !important;
    grid-column-end: 4 !important;

    grid-row-start: 1 !important;
    grid-row-end: 2 !important;
  }


  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row
  > div.wd-hw-board {

    grid-column-start: 4 !important;
    grid-column-end: 5 !important;

    grid-row-start: 1 !important;
    grid-row-end: 2 !important;
  }


  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row
  > div.wd-hw-terminal {

    grid-column-start: 5 !important;
    grid-column-end: 6 !important;

    grid-row-start: 1 !important;
    grid-row-end: 2 !important;
  }


  /*
   * Equal card appearance.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row
  > div.wd-device-card.wd-hw-card {

    padding: 11px !important;

    border:
      1px solid rgba(255,255,255,.085) !important;

    border-radius: 10px !important;

    background:
      rgba(255,255,255,.018) !important;

    overflow: hidden !important;
  }


  /*
   * Same header baseline.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-card-head {

    min-height: 42px !important;

    margin: 0 0 8px 0 !important;
    padding: 0 0 8px 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * Histories remain at the bottom of their cards.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-system
  .wd-hw-history,

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-memory
  .wd-hw-history,

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-disk
  .wd-hw-history {

    margin-top: auto !important;
  }


  /*
   * Terminal meter remains at bottom.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-terminal
  .wd-hw-terminal-body {

    margin-top: auto !important;
  }

}


/* ============================================================
   TABLET
   ============================================================ */

@media screen and (max-width: 1180px) and (min-width: 721px) {

  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row {

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;

    width: 100% !important;
  }


  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row
  > div.wd-device-card.wd-hw-card {

    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 720px) {

  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row {

    display: flex !important;
    flex-direction: column !important;

    gap: 10px !important;

    width: 100% !important;
  }


  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row
  > div.wd-device-card.wd-hw-card {

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
  }

}



/* ============================================================
   WEBDESK HARDWARE CONTENT ALIGN V8
   Keep V7 five-column layout untouched.
   Improve vertical distribution inside all five cards.
   WEBDESK_HARDWARE_CONTENT_ALIGN_V8_MARKER
   ============================================================ */

@media (min-width: 1181px) {

  /*
   * IMPORTANT:
   * We do NOT change the V7 grid.
   * Only content distribution inside the existing cards.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row
  > div.wd-device-card.wd-hw-card {
    display: flex !important;
    flex-direction: column !important;
  }


  /* ----------------------------------------------------------
     SYSTEM / CPU
     History stays aligned at the bottom.
     ---------------------------------------------------------- */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-system
  .wd-hw-history {
    margin-top: auto !important;
  }


  /* ----------------------------------------------------------
     MEMORY
     Memory has the most information.
     Keep natural content flow, history at bottom.
     ---------------------------------------------------------- */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-memory
  .wd-hw-history {
    margin-top: auto !important;
  }


  /* ----------------------------------------------------------
     DISK
     Put history at the same bottom baseline as CPU/RAM.
     ---------------------------------------------------------- */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-disk
  .wd-hw-history {
    margin-top: auto !important;
  }


  /* ----------------------------------------------------------
     MOTHERBOARD / BIOS

     This card has no graph, so distribute its information
     vertically instead of leaving one large empty block.
     ---------------------------------------------------------- */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-board
  > .wd-hw-kv {
    flex: 1 1 auto !important;

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
      repeat(3, minmax(0, 1fr)) !important;

    column-gap: 9px !important;
    row-gap: 0 !important;

    align-items: center !important;
    align-content: stretch !important;
  }


  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-board
  > .wd-hw-kv
  > div {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    height: 100% !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    padding: 7px 0 !important;
  }


  /* ----------------------------------------------------------
     TERMINAL HOME

     Keep filesystem data in upper area and put storage meter
     firmly at bottom, matching the history position.
     ---------------------------------------------------------- */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-terminal
  > .wd-hw-kv {
    flex: 0 0 auto !important;
  }


  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-terminal
  .wd-hw-terminal-body {
    margin-top: auto !important;

    padding-top: 10px !important;
  }


  /*
   * Common bottom visual baseline:
   * CPU history / RAM history / Disk history / Terminal meter.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-system
  .wd-hw-history,

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-memory
  .wd-hw-history,

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-disk
  .wd-hw-history,

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-terminal
  .wd-hw-terminal-body {
    flex-shrink: 0 !important;
  }

}



/* ============================================================
   WEBDESK HARDWARE CONTENT ALIGN V9
   Compact top content + aligned bottom widgets.
   V7 five-column layout remains unchanged.
   WEBDESK_HARDWARE_CONTENT_ALIGN_V9_MARKER
   ============================================================ */

@media (min-width: 1181px) {

  /*
   * All five cards remain equal-height flex columns.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row
  > div.wd-device-card.wd-hw-card {
    display: flex !important;
    flex-direction: column !important;
  }


  /*
   * IMPORTANT:
   * Undo V8 Motherboard vertical stretching.
   * Motherboard information stays compact at the top.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-board
  > .wd-hw-kv {
    flex: 0 0 auto !important;

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows: none !important;

    column-gap: 9px !important;
    row-gap: 0 !important;

    align-items: start !important;
    align-content: start !important;
  }


  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-board
  > .wd-hw-kv
  > div {
    display: block !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 4px 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * CPU / RAM / DISK histories all sit at bottom.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-system
  .wd-hw-history,

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-memory
  .wd-hw-history,

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-disk
  .wd-hw-history {
    margin-top: auto !important;
    flex-shrink: 0 !important;
  }


  /*
   * Terminal Home storage meter sits at bottom.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-terminal
  .wd-hw-terminal-body {
    margin-top: auto !important;
    flex-shrink: 0 !important;
  }


  /*
   * Keep normal content compact.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-board .wd-hw-kv,

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-terminal .wd-hw-kv {
    margin-bottom: 0 !important;
  }

}



/* ============================================================
   WEBDESK HARDWARE MOBILE V10
   Mobile-only Hardware layout.
   Desktop V7/V9 remains untouched.
   WEBDESK_HARDWARE_MOBILE_V10_MARKER
   ============================================================ */

@media (max-width: 720px) {

  section.wd-device-panel[data-device-panel="hardware"] {
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
  }


  /*
   * One clean vertical column.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row {

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /*
   * Reset every desktop positioning rule.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  > .wd-hw-five-row
  > div.wd-device-card.wd-hw-card {

    display: flex !important;
    flex-direction: column !important;

    position: relative !important;

    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 12px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
  }


  /*
   * Exact mobile order.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-system {
    order: 1 !important;
  }

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-memory {
    order: 2 !important;
  }

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-disk {
    order: 3 !important;
  }

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-board {
    order: 4 !important;

    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    height: auto !important;
    min-height: 0 !important;
  }

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-terminal {
    order: 5 !important;
  }


  /*
   * Normal compact headers.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-card-head {

    min-height: 0 !important;

    margin: 0 0 10px 0 !important;
    padding: 0 0 10px 0 !important;
  }


  /*
   * Two value columns still fit well on mobile.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-kv {

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    column-gap: 12px !important;
    row-gap: 0 !important;

    width: 100% !important;
  }


  /*
   * Motherboard must use normal compact flow.
   * This also overrides the old V8 stretching.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-board
  > .wd-hw-kv {

    flex: none !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows: none !important;

    align-items: start !important;
    align-content: start !important;
  }


  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-board
  > .wd-hw-kv
  > div {

    display: block !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 6px 0 !important;
  }


  /*
   * Memory modules:
   * full width on narrow display.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-memory-modules {

    display: grid !important;
    grid-template-columns: 1fr !important;

    gap: 6px !important;
  }


  /*
   * Histories are part of normal flow.
   * No desktop bottom-alignment stretching.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-history {

    margin-top: 10px !important;
    padding-top: 9px !important;

    flex: none !important;
  }


  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hardware-history
  .wd-device-history-chart {

    width: 100% !important;

    height: 34px !important;
    min-height: 34px !important;
  }


  /*
   * Terminal meter normal mobile flow.
   */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-terminal
  .wd-hw-terminal-body {

    margin-top: 10px !important;
    padding-top: 9px !important;

    flex: none !important;
  }

}



/* ============================================================
   WEBDESK SERVICES FIVE COLUMN LAYOUT V1
   Match Hardware five-card desktop presentation.
   WEBDESK_SERVICES_FIVE_COLUMN_V1_MARKER
   ============================================================ */

@media (min-width: 1181px) {

  section.wd-device-panel[data-device-panel="services"]
  > .wd-device-section-grid {
    display: grid !important;

    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    grid-template-rows: 1fr !important;
    grid-auto-rows: 1fr !important;

    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    align-items: stretch !important;
  }


  section.wd-device-panel[data-device-panel="services"]
  > .wd-device-section-grid
  > .wd-device-card {

    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    align-self: stretch !important;
  }


  /*
   * Old rule makes Reverse SSH Health span both columns.
   * Reset it so it becomes the fifth normal card.
   */
  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-card {
    grid-column: auto !important;
    grid-row: auto !important;
  }


  /*
   * Keep service rows compact so the five-column layout
   * matches the visual density of Hardware.
   */
  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row {
    min-width: 0 !important;
  }


  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row > span,
  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row > strong {
    min-width: 0 !important;
  }


  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row > strong {
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

}


/*
 * Medium desktop / laptop:
 * retain two columns so content does not become too narrow.
 */
@media (min-width: 901px) and (max-width: 1180px) {

  section.wd-device-panel[data-device-panel="services"]
  > .wd-device-section-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-card {
    grid-column: 1 / -1 !important;
  }

}


/* ============================================================
   WEBDESK SERVICES HEALTH CARD V2
   Compact Reverse SSH Health inside five-column Services layout.
   WEBDESK_SERVICES_HEALTH_V2_MARKER
   ============================================================ */

@media (min-width: 1181px) {

  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 11px 13px !important;
  }


  /* Header: title left, status badge right */
  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    column-gap: 8px !important;

    width: 100% !important;
    min-width: 0 !important;

    margin-bottom: 7px !important;
  }


  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-head > div {
    min-width: 0 !important;
  }


  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-head .wd-device-card-title {
    margin: 0 0 4px 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }


  /* Smaller badge so it fits naturally in the fifth card */
  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-badge {
    flex: 0 0 auto !important;

    min-width: 0 !important;
    height: auto !important;

    padding: 4px 8px !important;

    font-size: 9px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }


  /* Compact health description */
  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-subtitle {
    margin: 0 !important;

    font-size: 9px !important;
    line-height: 1.35 !important;

    overflow-wrap: anywhere !important;
  }


  /* Keep health rows visually identical to other Services cards */
  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-card
  .wd-device-service-row {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }


  /*
   * Technical detail stays at the bottom of the card,
   * similar to bottom information in Hardware cards.
   */
  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-detail {
    margin-top: auto !important;
    padding-top: 9px !important;

    font-size: 8px !important;
    line-height: 1.35 !important;

    overflow-wrap: anywhere !important;
  }

}


/* ============================================================
   WEBDESK OVERVIEW CARD ROW V1
   Compact desktop Overview matching Hardware / Services.
   WEBDESK_OVERVIEW_CARD_ROW_V1_MARKER
   ============================================================ */

@media (min-width: 1181px) {

  section.wd-device-panel[data-device-panel="overview"]
  > .wd-device-section-grid {

    display: grid !important;

    grid-template-columns:
      repeat(6, minmax(0, 1fr)) !important;

    grid-template-rows: 1fr !important;
    grid-auto-rows: 1fr !important;

    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    align-items: stretch !important;
  }


  /*
   * Every Overview block becomes a normal card.
   * This resets the old wd-device-card-wide behaviour.
   */
  section.wd-device-panel[data-device-panel="overview"]
  > .wd-device-section-grid
  > .wd-device-card {

    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    align-self: stretch !important;

    overflow: hidden !important;
  }


  section.wd-device-panel[data-device-panel="overview"]
  > .wd-device-section-grid
  > .wd-device-card-wide {

    grid-column: auto !important;
    grid-row: auto !important;
  }


  /* ----------------------------------------------------------
     GENERAL
     ---------------------------------------------------------- */

  section.wd-device-panel[data-device-panel="overview"]
  .wd-device-card:nth-child(1)
  .wd-device-kv-grid {

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    column-gap: 10px !important;
    row-gap: 6px !important;
  }


  /* ----------------------------------------------------------
     REMOTE ACCESS
     ---------------------------------------------------------- */

  section.wd-device-panel[data-device-panel="overview"]
  .wd-device-card:nth-child(2)
  .wd-device-kv-grid {

    display: grid !important;

    grid-template-columns: 1fr !important;

    row-gap: 8px !important;
  }


  /* ----------------------------------------------------------
     SYSTEM USAGE
     ---------------------------------------------------------- */

  section.wd-device-panel[data-device-panel="overview"]
  .wd-device-card:nth-child(3)
  .wd-device-metric {

    min-width: 0 !important;
  }


  section.wd-device-panel[data-device-panel="overview"]
  .wd-device-card:nth-child(3)
  .wd-device-metric + .wd-device-metric {

    margin-top: 12px !important;
  }


  section.wd-device-panel[data-device-panel="overview"]
  .wd-device-card:nth-child(3)
  .wd-device-meter {

    width: 100% !important;
    min-width: 0 !important;
  }


  /* ----------------------------------------------------------
     LICENSING
     ---------------------------------------------------------- */

  section.wd-device-panel[data-device-panel="overview"]
  .wd-license-card {

    display: flex;
    flex-direction: column !important;
  }


  /*
   * Respect the HTML hidden attribute.
   * Important: do not force an unavailable license card visible.
   */
  section.wd-device-panel[data-device-panel="overview"]
  .wd-license-card[hidden] {

    display: none !important;
  }


  section.wd-device-panel[data-device-panel="overview"]
  .wd-license-head {

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) auto !important;

    gap: 7px !important;

    align-items: start !important;
  }


  section.wd-device-panel[data-device-panel="overview"]
  .wd-license-overall {

    min-width: 0 !important;

    padding: 4px 7px !important;

    font-size: 8px !important;
    line-height: 1 !important;
  }


  section.wd-device-panel[data-device-panel="overview"]
  .wd-license-subtitle {

    font-size: 9px !important;
    line-height: 1.35 !important;
  }


  section.wd-device-panel[data-device-panel="overview"]
  .wd-license-summary {

    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 6px !important;

    margin-top: 10px !important;
  }


  section.wd-device-panel[data-device-panel="overview"]
  .wd-license-summary-item {

    min-width: 0 !important;

    padding: 8px !important;
  }


  /* ----------------------------------------------------------
     TAGS / NOTES
     ---------------------------------------------------------- */

  section.wd-device-panel[data-device-panel="overview"]
  .wd-device-tags,
  section.wd-device-panel[data-device-panel="overview"]
  .wd-device-notes {

    min-width: 0 !important;

    overflow-wrap: anywhere !important;
  }

}


/* ============================================================
   MEDIUM DESKTOP / SMALL LAPTOP
   ============================================================ */

@media (min-width: 901px) and (max-width: 1180px) {

  section.wd-device-panel[data-device-panel="overview"]
  > .wd-device-section-grid {

    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;
  }


  section.wd-device-panel[data-device-panel="overview"]
  > .wd-device-section-grid
  > .wd-device-card,
  section.wd-device-panel[data-device-panel="overview"]
  > .wd-device-section-grid
  > .wd-device-card-wide {

    grid-column: auto !important;
    grid-row: auto !important;

    width: 100% !important;
    min-width: 0 !important;
  }

}


/* ============================================================
   WEBDESK OVERVIEW CARD WIDTHS V2
   Balanced six-card desktop layout.
   WEBDESK_OVERVIEW_CARD_WIDTHS_V2_MARKER
   ============================================================ */

@media (min-width: 1181px) {

  section.wd-device-panel[data-device-panel="overview"]
  > .wd-device-section-grid {

    /*
     * General       1.20
     * Remote Access 1.05
     * System Usage  1.20
     * Licensing     1.20
     * Tags          0.80
     * Notes         0.80
     */

    grid-template-columns:
      minmax(0, 1.20fr)
      minmax(0, 1.05fr)
      minmax(0, 1.20fr)
      minmax(0, 1.20fr)
      minmax(0, 0.80fr)
      minmax(0, 0.80fr) !important;
  }


  /* General remains readable in two columns */
  section.wd-device-panel[data-device-panel="overview"]
  .wd-device-card:nth-child(1)
  .wd-device-kv-grid {
    column-gap: 12px !important;
  }


  /* Remote IDs must never overflow their card */
  section.wd-device-panel[data-device-panel="overview"]
  .wd-device-card:nth-child(2)
  strong {
    overflow-wrap: anywhere !important;
  }


  /* Keep System Usage meters using the complete card width */
  section.wd-device-panel[data-device-panel="overview"]
  .wd-device-card:nth-child(3)
  .wd-device-meter {
    width: 100% !important;
  }


  /* Tags can wrap naturally in the narrower card */
  section.wd-device-panel[data-device-panel="overview"]
  .wd-device-card:nth-child(5)
  .wd-device-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

}


/* ============================================================
   WEBDESK NETWORK CARD ROW V1
   Compact desktop cards matching Overview / Services.
   WEBDESK_NETWORK_CARD_ROW_V1_MARKER
   ============================================================ */

@media (min-width: 1181px) {

  section.wd-device-panel[data-device-panel="network"]
  > .wd-device-section-grid {

    display: grid !important;

    /*
     * Same visual card width as the compact Overview layout.
     * Network currently contains two cards.
     */
    grid-template-columns:
      repeat(6, minmax(0, 1fr)) !important;

    grid-template-rows: 1fr !important;
    grid-auto-rows: 1fr !important;

    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    align-items: stretch !important;
  }


  /*
   * DEVICE IDENTITY
   * Slightly wider because it contains four values.
   */
  section.wd-device-panel[data-device-panel="network"]
  > .wd-device-section-grid
  > .wd-device-card:nth-child(1) {

    grid-column: span 2 !important;
    grid-row: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    align-self: stretch !important;
  }


  /*
   * NETWORK DETAILS
   * Three columns because DNS / addresses can be longer.
   */
  section.wd-device-panel[data-device-panel="network"]
  > .wd-device-section-grid
  > .wd-device-card:nth-child(2) {

    grid-column: span 3 !important;
    grid-row: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    align-self: stretch !important;

    overflow: hidden !important;
  }


  /*
   * Compact two-column information inside both cards.
   */
  section.wd-device-panel[data-device-panel="network"]
  .wd-device-kv-grid {

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    column-gap: 12px !important;
    row-gap: 7px !important;

    width: 100% !important;
    min-width: 0 !important;
  }


  section.wd-device-panel[data-device-panel="network"]
  .wd-device-kv-grid > div {

    min-width: 0 !important;
  }


  section.wd-device-panel[data-device-panel="network"]
  .wd-device-kv-grid strong {

    display: block !important;

    min-width: 0 !important;
    max-width: 100% !important;

    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

}


/*
 * Medium desktop / laptop.
 * Keep the existing two-card full-width arrangement.
 */
@media (min-width: 901px) and (max-width: 1180px) {

  section.wd-device-panel[data-device-panel="network"]
  > .wd-device-section-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}


/* ============================================================
   END WEBDESK NETWORK CARD ROW V1
   ============================================================ */



/* ============================================================
   WEBDESK NETWORK EQUAL CARDS V2
   Equal compact Network cards.
   WEBDESK_NETWORK_EQUAL_CARDS_V2_MARKER
   ============================================================ */

@media (min-width: 1181px) {

  section.wd-device-panel[data-device-panel="network"]
  > .wd-device-section-grid
  > .wd-device-card:nth-child(1),

  section.wd-device-panel[data-device-panel="network"]
  > .wd-device-section-grid
  > .wd-device-card:nth-child(2) {

    grid-column: span 2 !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 100% !important;

    align-self: stretch !important;
  }

}


/* ============================================================
   END WEBDESK NETWORK EQUAL CARDS V2
   ============================================================ */



/* ============================================================
   WEBDESK NETWORK TWO HALF CARDS V3
   Desktop: exactly two equal 50/50 cards.
   WEBDESK_NETWORK_TWO_HALF_CARDS_V3_MARKER
   ============================================================ */

@media (min-width: 1181px) {

  section.wd-device-panel[data-device-panel="network"]
  > .wd-device-section-grid {

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;

    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    align-items: stretch !important;
  }


  /* Both Network cards = one half of available width */

  section.wd-device-panel[data-device-panel="network"]
  > .wd-device-section-grid
  > .wd-device-card:nth-child(1),

  section.wd-device-panel[data-device-panel="network"]
  > .wd-device-section-grid
  > .wd-device-card:nth-child(2) {

    grid-column: auto !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    align-self: stretch !important;
  }


  /* Keep information arranged in two columns inside each card */

  section.wd-device-panel[data-device-panel="network"]
  .wd-device-kv-grid {

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    column-gap: 18px !important;
    row-gap: 7px !important;

    width: 100% !important;
    min-width: 0 !important;
  }


  section.wd-device-panel[data-device-panel="network"]
  .wd-device-kv-grid > div {

    min-width: 0 !important;
  }


  section.wd-device-panel[data-device-panel="network"]
  .wd-device-kv-grid strong {

    display: block !important;

    min-width: 0 !important;
    max-width: 100% !important;

    overflow-wrap: anywhere !important;
  }

}


/* ============================================================
   END WEBDESK NETWORK TWO HALF CARDS V3
   ============================================================ */


/* ============================================================
   WEBDESK PROFIT CENTER PERIOD UI V1
   WEBDESK_PROFIT_PERIOD_CSS_V1_MARKER
   ============================================================ */

.wd-profit-period-mode {
  display:flex;
  align-items:center;
  gap:5px;
}

.wd-profit-mode-button,
.wd-profit-show-button,
.wd-profit-graph-button {
  min-height:30px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  background:rgba(255,255,255,.045);
  color:inherit;
  padding:0 11px;
  font:inherit;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease;
}

.wd-profit-mode-button:hover,
.wd-profit-show-button:hover,
.wd-profit-graph-button:hover {
  background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.20);
}

.wd-profit-mode-button.active {
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.25);
}

.wd-profit-period-controls {
  width:100%;
  margin:12px 0 14px;
  padding:10px 12px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(255,255,255,.025);
}

.wd-profit-period-group {
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:9px;
}

.wd-profit-period-group[hidden],
.wd-profit-period-controls[hidden],
.wd-profit-summary-grid[hidden],
.wd-profit-graph-section[hidden],
.wd-profit-graph-wrap[hidden] {
  display:none !important;
}

.wd-profit-period-label {
  align-self:center;
  opacity:.68;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.wd-profit-period-select,
.wd-profit-date-input {
  min-height:31px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.12);
  border-radius:7px;
  background:rgba(0,0,0,.18);
  color:inherit;
  padding:0 9px;
  font:inherit;
  font-size:11px;
  outline:none;
}

.wd-profit-period-select {
  min-width:170px;
}

.wd-profit-date-field {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.wd-profit-date-field > span {
  opacity:.62;
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.wd-profit-date-input {
  min-width:145px;
}

.wd-profit-summary-grid {
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:8px;
  width:100%;
  margin:0 0 15px;
}

.wd-profit-summary-card {
  min-width:0;
  padding:10px 11px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.08);
  border-radius:9px;
  background:rgba(255,255,255,.025);
}

.wd-profit-summary-card > span {
  display:block;
  margin-bottom:5px;
  opacity:.58;
  font-size:9px;
  font-weight:600;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}

.wd-profit-summary-card > strong {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:13px;
  font-weight:650;
  line-height:1.25;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.wd-profit-graph-section {
  width:100%;
  margin:0 0 16px;
  padding:12px 14px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.02);
}

.wd-profit-graph-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.wd-profit-graph-wrap {
  width:100%;
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.07);
}

.wd-profit-graph-canvas {
  display:block;
  width:100%;
  height:330px;
}

.wd-profit-graph-legend {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  margin-top:8px;
  opacity:.78;
  font-size:10px;
}

.wd-profit-graph-legend span {
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.wd-profit-graph-legend i {
  width:18px;
  height:2px;
  border-radius:999px;
  display:inline-block;
}

:root {
  --wd-profit-graph-profit:#f4c542;
  --wd-profit-graph-bets:#4cc38a;
  --wd-profit-graph-wins:#ef6b73;
}

.wd-profit-graph-legend i.profit {
  background:var(--wd-profit-graph-profit);
}

.wd-profit-graph-legend i.bets {
  background:var(--wd-profit-graph-bets);
}

.wd-profit-graph-legend i.wins {
  background:var(--wd-profit-graph-wins);
}


/* Desktop */
@media (min-width:1181px) {

  section.wd-device-panel[data-device-panel="counters"]
  #wdProfitCenterCountersSection
  .wd-counters-toolbar {
    align-items:center !important;
  }

  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-summary-grid {
    grid-template-columns:
      repeat(8,minmax(0,1fr)) !important;
  }
}


/* Medium */
@media (min-width:761px) and (max-width:1180px) {

  .wd-profit-summary-grid {
    grid-template-columns:
      repeat(4,minmax(0,1fr));
  }
}


/* Mobile */
@media (max-width:760px) {

  .wd-profit-period-mode {
    width:100%;
  }

  .wd-profit-mode-button {
    flex:1 1 0;
  }

  .wd-profit-period-group {
    align-items:stretch;
  }

  .wd-profit-period-select,
  .wd-profit-date-field,
  .wd-profit-date-input,
  .wd-profit-show-button {
    width:100%;
  }

  .wd-profit-summary-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .wd-profit-graph-toolbar {
    align-items:flex-start;
    flex-direction:column;
  }

  .wd-profit-graph-button {
    width:100%;
  }

  .wd-profit-graph-canvas {
    min-width:500px;
  }

  .wd-profit-graph-wrap {
    overflow-x:auto;
  }
}

/* ============================================================
   END WEBDESK PROFIT CENTER PERIOD UI V1
   ============================================================ */

/* WEBDESK_SCRIPT_LIBRARY_RUN_BUTTON_V1_MARKER */
.script-library-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 7px;
  width: 100%;
  margin-bottom: 6px;
}

.script-library-row .script-library-item {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.script-library-run {
  flex: 0 0 66px;
  min-width: 66px;
  border: 1px solid rgba(255, 196, 64, .42);
  border-radius: 10px;
  background: rgba(255, 196, 64, .055);
  color: #ffd978;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.script-library-run:hover {
  border-color: rgba(255, 196, 64, .85);
  background: rgba(255, 196, 64, .12);
}

.script-library-run:active {
  background: rgba(255, 196, 64, .18);
}

@media (max-width: 700px) {
  .script-library-run {
    flex-basis: 58px;
    min-width: 58px;
  }
}

/* WEBDESK_DEVICE_STATUS_DOT_ONLY_V1_MARKER */
.desktop-table .wd-status-dot-cell {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  text-align: center;
}

.desktop-table .wd-status-dot-only {
  display: inline-flex;
  width: 10px;
  height: 10px;
  min-width: 10px;
  padding: 0;
  gap: 0;
  font-size: 0;
  vertical-align: middle;
}

/* Existing .status::before is the actual status dot. */
.desktop-table .wd-status-dot-only::before {
  margin: 0;
}

/* WEBDESK_NETWORK_IN_OVERVIEW_V1_MARKER */
.wd-overview-network-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.wd-overview-network-grid > .wd-device-card {
  min-width: 0;
}

@media (max-width: 900px) {
  .wd-overview-network-grid {
    grid-template-columns: 1fr;
  }
}

/* WEBDESK_OVERVIEW_REMOTE_ID_LINKS_V1_MARKER */
.wd-overview-remote-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.wd-overview-remote-link:hover {
  text-decoration: underline;
}

/* WEBDESK_OVERVIEW_FLUID_CARDS_V1_MARKER */
/* Overview cards always consume the complete available row width. */
.wd-device-panel[data-device-panel="overview"] > .wd-device-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  width: 100%;
}

.wd-device-panel[data-device-panel="overview"] > .wd-device-section-grid > .wd-device-card {
  width: auto;
  min-width: 0;
  max-width: none;
}

/* Desktop: five visible cards = five equal columns. */
@media (min-width: 1101px) {
  .wd-device-panel[data-device-panel="overview"] > .wd-device-section-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* Licensing is hidden on devices without licensing.
     In that case the remaining four cards fill the complete row. */
  .wd-device-panel[data-device-panel="overview"] > .wd-device-section-grid:not(:has(#wdvLicensingCard:not([hidden]))) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Smaller screens remain responsive. */
@media (max-width: 1100px) {
  .wd-device-panel[data-device-panel="overview"] > .wd-device-section-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* WEBDESK_OVERVIEW_FINAL_GRID_V2_MARKER */
/* Final override over the old Overview 2-column desktop layout. */

@media (min-width:1101px) {

  .wd-device-panel[data-device-panel="overview"].active
  > .wd-device-section-grid {
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    grid-auto-columns:minmax(0, 1fr) !important;
    width:100% !important;
    max-width:none !important;
    gap:10px !important;
  }

  .wd-device-panel[data-device-panel="overview"].active
  > .wd-device-section-grid
  > .wd-device-card {
    grid-column:auto !important;
    grid-row:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }

  /* No licensing -> four remaining cards use the whole row. */
  .wd-device-panel[data-device-panel="overview"].active
  > .wd-device-section-grid:not(:has(#wdvLicensingCard:not([hidden]))) {
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }

}


/* WEBDESK_OVERVIEW_LARGER_TEXT_V1_MARKER */

/* Card titles */
.wd-device-panel[data-device-panel="overview"]
.wd-device-card-title {
  font-size: 14px !important;
}

/* Labels: HOSTNAME, SITE, IPv4, CPU ... */
.wd-device-panel[data-device-panel="overview"]
.wd-device-kv-grid span {
  font-size: 12px !important;
}

/* Values */
.wd-device-panel[data-device-panel="overview"]
.wd-device-kv-grid strong {
  font-size: 14px !important;
}

/* System Usage labels and percentages */
.wd-device-panel[data-device-panel="overview"]
.wd-device-metric-head {
  font-size: 13px !important;
}

/* Licensing subtitle */
.wd-device-panel[data-device-panel="overview"]
.wd-license-subtitle {
  font-size: 11px !important;
}

/* Licensing VALID badge */
.wd-device-panel[data-device-panel="overview"]
.wd-license-overall {
  font-size: 10px !important;
}

/* Licensing labels */
.wd-device-panel[data-device-panel="overview"]
.wd-license-summary-item span {
  font-size: 11px !important;
}

/* Licensing values */
.wd-device-panel[data-device-panel="overview"]
.wd-license-summary-item strong {
  font-size: 14px !important;
}


/* WEBDESK_DEVICE_POPUP_4K_READABILITY_V1_MARKER */

/* Larger device popup on desktop */
@media (min-width:1101px) {

  .wd-device-dialog {
    width:min(1320px, calc(100vw - 56px)) !important;
  }

  /* Header */
  .wd-device-dialog-header {
    min-height:88px !important;
    padding:17px 20px !important;
  }

  .wd-device-title-row h2 {
    font-size:26px !important;
    line-height:1.15 !important;
  }

  .wd-device-status-badge {
    font-size:11px !important;
    padding:5px 9px !important;
  }

  .wd-device-subtitle {
    font-size:13px !important;
    line-height:1.4 !important;
  }

  .wd-device-position {
    font-size:12px !important;
    line-height:1.4 !important;
  }

  .wd-device-status-dot {
    width:14px !important;
    height:14px !important;
  }

  /* Top-right navigation buttons */
  .wd-device-header-btn,
  .wd-device-close {
    width:40px !important;
    height:40px !important;
    font-size:20px !important;
  }

  /* Tabs */
  .wd-device-tabs {
    padding:8px 16px 0 !important;
  }

  .wd-device-tab {
    min-height:42px !important;
    padding:0 17px !important;
    font-size:13px !important;
  }

  /* Main popup content */
  .wd-device-content {
    padding:16px !important;
  }

  /* Cards */
  .wd-device-card {
    padding:16px !important;
  }

  /* Overview card headings */
  .wd-device-panel[data-device-panel="overview"]
  .wd-device-card-title {
    font-size:15px !important;
  }

  /* Overview field labels */
  .wd-device-panel[data-device-panel="overview"]
  .wd-device-kv-grid span {
    font-size:12px !important;
  }

  /* Overview field values */
  .wd-device-panel[data-device-panel="overview"]
  .wd-device-kv-grid strong {
    font-size:14px !important;
    line-height:1.35 !important;
  }

  /* CPU / RAM / Disk */
  .wd-device-panel[data-device-panel="overview"]
  .wd-device-metric-head {
    font-size:13px !important;
  }

  .wd-device-panel[data-device-panel="overview"]
  .wd-device-meter {
    height:10px !important;
  }

  /* Licensing */
  .wd-device-panel[data-device-panel="overview"]
  .wd-license-subtitle {
    font-size:12px !important;
  }

  .wd-device-panel[data-device-panel="overview"]
  .wd-license-overall {
    font-size:10px !important;
  }

  .wd-device-panel[data-device-panel="overview"]
  .wd-license-summary-item span {
    font-size:11px !important;
  }

  .wd-device-panel[data-device-panel="overview"]
  .wd-license-summary-item strong {
    font-size:14px !important;
  }
}


/* WEBDESK_DEVICE_POPUP_ALL_PANELS_FONT_V1_MARKER */

@media (min-width:1101px) {

  /* All card titles in device popup */
  .wd-device-dialog .wd-device-card-title,
  .wd-device-dialog .wd-hw-card-head .wd-device-card-title {
    font-size:15px !important;
  }

  /* Card subtitles */
  .wd-device-dialog .wd-hw-card-subtitle {
    font-size:11px !important;
    line-height:1.4 !important;
  }

  /* Standard key/value labels */
  .wd-device-dialog .wd-device-kv-grid span {
    font-size:12px !important;
  }

  /* Standard key/value values */
  .wd-device-dialog .wd-device-kv-grid strong {
    font-size:14px !important;
    line-height:1.35 !important;
  }

  /* Hardware labels */
  .wd-device-dialog .wd-hw-label {
    font-size:11px !important;
  }

  /* Hardware values */
  .wd-device-dialog .wd-hw-value {
    font-size:13px !important;
    line-height:1.35 !important;
  }

  /* Hardware normal/detail text */
  .wd-device-dialog .wd-hw-card {
    font-size:13px !important;
  }

  /* Service rows */
  .wd-device-dialog .wd-device-service-row {
    font-size:13px !important;
  }

  .wd-device-dialog .wd-device-service-row span,
  .wd-device-dialog .wd-device-service-row strong {
    font-size:13px !important;
  }

  /* Generic tables inside popup */
  .wd-device-dialog table {
    font-size:13px !important;
  }

  .wd-device-dialog th {
    font-size:11px !important;
  }

  .wd-device-dialog td {
    font-size:13px !important;
  }

  /* Inputs / selects / buttons inside panels */
  .wd-device-dialog input,
  .wd-device-dialog select,
  .wd-device-dialog textarea,
  .wd-device-dialog button {
    font-size:13px;
  }

  /* Action buttons */
  .wd-device-dialog .wd-device-action {
    font-size:12px !important;
    min-height:36px !important;
  }

  /* Generic detail / empty text */
  .wd-device-dialog .wd-device-detail-block,
  .wd-device-dialog .wd-device-empty-info {
    font-size:13px !important;
  }

  /* Hardware cards get slightly more breathing room */
  .wd-device-panel[data-device-panel="hardware"] .wd-hw-card {
    padding:16px !important;
  }
}


/* ============================================================
   WEBDESK DEVICE POPUP ALL TABS FONT V2
   Larger readable fonts for Hardware / Instances / Counters /
   Services / Actions. Overview remains unchanged.
   WEBDESK_DEVICE_POPUP_ALL_TABS_FONT_V2_MARKER
   ============================================================ */

@media (min-width:1101px) {

  /* ==========================================================
     HARDWARE
     ========================================================== */

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-device-card-title {
    font-size:15px !important;
    line-height:1.25 !important;
  }

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-card-subtitle {
    font-size:11px !important;
    line-height:1.4 !important;
  }

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-kv span,
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-label {
    font-size:11px !important;
    line-height:1.3 !important;
  }

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-kv strong,
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-value {
    font-size:13px !important;
    line-height:1.35 !important;
  }

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-card,
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-card p,
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-card div {
    font-size:12px;
  }

  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-history,
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-history * {
    font-size:10px !important;
    line-height:1.35 !important;
  }


  /* ==========================================================
     INSTANCES
     ========================================================== */

  section.wd-device-panel[data-device-panel="connected"] {
    font-size:13px !important;
  }

  section.wd-device-panel[data-device-panel="connected"]
  .wd-device-card-title {
    font-size:15px !important;
  }

  section.wd-device-panel[data-device-panel="connected"]
  .wd-connected-summary {
    font-size:12px !important;
  }

  section.wd-device-panel[data-device-panel="connected"]
  .wd-connected-filter,
  section.wd-device-panel[data-device-panel="connected"]
  button,
  section.wd-device-panel[data-device-panel="connected"]
  input,
  section.wd-device-panel[data-device-panel="connected"]
  select {
    font-size:12px !important;
  }

  section.wd-device-panel[data-device-panel="connected"]
  table {
    font-size:13px !important;
  }

  section.wd-device-panel[data-device-panel="connected"]
  th {
    font-size:11px !important;
  }

  section.wd-device-panel[data-device-panel="connected"]
  td {
    font-size:13px !important;
  }


  /* ==========================================================
     COUNTERS
     ========================================================== */

  section.wd-device-panel[data-device-panel="counters"] {
    font-size:13px !important;
  }

  section.wd-device-panel[data-device-panel="counters"]
  .wd-device-card-title {
    font-size:15px !important;
  }

  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-period-label,
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-date-field > span {
    font-size:11px !important;
  }

  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-mode-button,
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-show-button,
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-graph-button,
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-period-select,
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-date-input {
    font-size:12px !important;
  }

  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-summary-card > span {
    font-size:11px !important;
  }

  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-summary-card > strong {
    font-size:14px !important;
  }

  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-graph-legend {
    font-size:11px !important;
  }

  section.wd-device-panel[data-device-panel="counters"]
  table {
    font-size:13px !important;
  }

  section.wd-device-panel[data-device-panel="counters"]
  th {
    font-size:11px !important;
  }

  section.wd-device-panel[data-device-panel="counters"]
  td {
    font-size:13px !important;
  }


  /* ==========================================================
     SERVICES
     ========================================================== */

  section.wd-device-panel[data-device-panel="services"] {
    font-size:13px !important;
  }

  section.wd-device-panel[data-device-panel="services"]
  .wd-device-card-title {
    font-size:15px !important;
    line-height:1.25 !important;
  }

  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row,
  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row span,
  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row strong {
    font-size:13px !important;
    line-height:1.35 !important;
  }

  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-badge {
    font-size:11px !important;
  }

  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-subtitle {
    font-size:11px !important;
    line-height:1.4 !important;
  }

  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-detail {
    font-size:11px !important;
    line-height:1.4 !important;
  }


  /* ==========================================================
     ACTIONS
     ========================================================== */

  section.wd-device-panel[data-device-panel="actions"] {
    font-size:13px !important;
  }

  section.wd-device-panel[data-device-panel="actions"]
  .wd-device-card-title {
    font-size:15px !important;
  }

  section.wd-device-panel[data-device-panel="actions"]
  .wd-device-action {
    font-size:13px !important;
    min-height:38px !important;
  }

  section.wd-device-panel[data-device-panel="actions"]
  .wd-device-detail-block,
  section.wd-device-panel[data-device-panel="actions"]
  .wd-device-empty-info {
    font-size:13px !important;
    line-height:1.45 !important;
  }

}


/* ============================================================
   WEBDESK DEVICE POPUP UNIFIED TYPOGRAPHY V1
   Final desktop typography override for ALL popup tabs.
   WEBDESK_DEVICE_POPUP_UNIFIED_TYPOGRAPHY_V1_MARKER
   ============================================================ */

@media (min-width: 1101px) {

  /* ----------------------------------------------------------
     TABS — all exactly identical
     ---------------------------------------------------------- */

  .wd-device-dialog .wd-device-tabs .wd-device-tab,
  .wd-device-dialog .wd-device-tabs button.wd-device-tab {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    min-height: 44px !important;
    padding: 0 18px !important;
  }


  /* ----------------------------------------------------------
     CARD TITLES — same everywhere
     ---------------------------------------------------------- */

  .wd-device-dialog section.wd-device-panel
  .wd-device-card-title,

  .wd-device-dialog section.wd-device-panel
  .wd-hw-card-head .wd-device-card-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }


  /* ----------------------------------------------------------
     HARDWARE
     ---------------------------------------------------------- */

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-card-subtitle {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-kv span,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-label {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-kv strong,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-value {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* Normal hardware descriptive text */
  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-card {
    font-size: 13px !important;
  }

  /* Memory module cards */
  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-memory-modules,
  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-memory-modules * {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* CPU / RAM / DISK history text */
  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-history,
  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-history * {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* Terminal Home */
  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-terminal-body,
  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-terminal-body * {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }


  /* ----------------------------------------------------------
     INSTANCES
     ---------------------------------------------------------- */

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"] {
    font-size: 13px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  .wd-connected-summary {
    font-size: 12px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  button,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  input,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  select {
    font-size: 13px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  table {
    font-size: 13px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  th {
    font-size: 11px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  td {
    font-size: 13px !important;
  }


  /* ----------------------------------------------------------
     COUNTERS
     ---------------------------------------------------------- */

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"] {
    font-size: 13px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-period-label,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-date-field > span {
    font-size: 11px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  button,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  input,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  select {
    font-size: 13px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-summary-card > span {
    font-size: 11px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-summary-card > strong {
    font-size: 14px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-graph-legend {
    font-size: 11px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  table {
    font-size: 13px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  th {
    font-size: 11px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  td {
    font-size: 13px !important;
  }


  /* ----------------------------------------------------------
     SERVICES
     Override old 8px / 9px !important rules
     ---------------------------------------------------------- */

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"] {
    font-size: 13px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row span,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row strong {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-badge {
    font-size: 11px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-subtitle {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-detail {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }


  /* ----------------------------------------------------------
     ACTIONS
     ---------------------------------------------------------- */

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="actions"] {
    font-size: 13px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="actions"]
  .wd-device-action,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="actions"]
  button {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="actions"]
  .wd-device-detail-block,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="actions"]
  .wd-device-empty-info {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
}


/* ============================================================
   WEBDESK MAIN DESKTOP READABILITY V1
   Larger main dashboard typography without changing layout.
   WEBDESK_MAIN_DESKTOP_READABILITY_V1_MARKER
   ============================================================ */

@media (min-width: 1101px) {

  /* ----------------------------------------------------------
     TOP TOOLBAR / FILTERS
     ---------------------------------------------------------- */

  .topbar,
  .toolbar {
    font-size: 13px !important;
  }

  .toolbar input,
  .toolbar select,
  .toolbar button,
  .toolbar .btn,
  .theme-box input,
  .theme-box select,
  .theme-box button,
  .auth-box,
  .auth-box button,
  .auth-box .btn {
    font-size: 13px !important;
  }

  .toolbar input,
  .toolbar select,
  .toolbar button,
  .toolbar .btn {
    min-height: 38px;
  }


  /* ----------------------------------------------------------
     SUMMARY CARDS
     TOTAL DEVICES / ONLINE / OFFLINE
     ---------------------------------------------------------- */

  .summary-box {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .summary-label,
  .summary-box .small {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .summary-value {
    font-size: 34px !important;
    line-height: 1.05 !important;
  }


  /* ----------------------------------------------------------
     SITE / GROUP HEADERS
     ---------------------------------------------------------- */

  .group-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .group-header .small,
  .group-header small {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }


  /* ----------------------------------------------------------
     MAIN DEVICE TABLE
     ---------------------------------------------------------- */

  .desktop-table th {
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: .075em !important;
  }

  .desktop-table td {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .desktop-table th,
  .desktop-table td {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }


  /* Hostname / normal table text */
  .desktop-table td strong,
  .desktop-table td a {
    font-size: 13px !important;
  }


  /* ----------------------------------------------------------
     RUSTDESK / ANYDESK
     ---------------------------------------------------------- */

  .desktop-table .rustdesk-id-link,
  .desktop-table .anydesk-id-link {
    font-size: 12px !important;
    line-height: 1 !important;
  }


  /* ----------------------------------------------------------
     DEPOT / VERSION
     Override old compact 10px rules
     ---------------------------------------------------------- */

  .desktop-table .depot-cell,
  .desktop-table .version-cell {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }


  /* ----------------------------------------------------------
     CPU / RAM / DISK
     ---------------------------------------------------------- */

  .desktop-table .metric,
  .desktop-table .metric span,
  .desktop-table .table-mini-graph,
  .desktop-table .table-mini-graph span {
    font-size: 12px !important;
  }


  /* ----------------------------------------------------------
     LAST SEEN
     ---------------------------------------------------------- */

  .desktop-table td:nth-last-child(3) {
    font-size: 12px !important;
  }


  /* ----------------------------------------------------------
     TAGS
     ---------------------------------------------------------- */

  .desktop-table .tag {
    font-size: 11px !important;
    line-height: 1.1 !important;
    padding: 4px 8px !important;
  }


  /* ----------------------------------------------------------
     STATUS DOT
     ---------------------------------------------------------- */

  .desktop-table .wd-status-dot-only {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
  }

  .desktop-table .wd-status-dot-only::before {
    width: 11px !important;
    height: 11px !important;
  }


  /* ----------------------------------------------------------
     ACTION BUTTONS
     Keep existing column/layout, slightly larger controls.
     ---------------------------------------------------------- */

  .desktop-table .actions-redesign {
    gap: 5px !important;
  }

  .desktop-table .actions-redesign .btn-action,
  .desktop-table .actions-redesign .btn-more {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    flex: 0 0 34px !important;
    padding: 0 !important;
  }

  .desktop-table .action-app-svg,
  .desktop-table .actions-redesign .epoptes-btn-icon {
    width: 19px !important;
    height: 19px !important;
  }

  .desktop-table .actions-redesign .action-terminal-icon,
  .desktop-table .actions-redesign .action-globe {
    font-size: 16px !important;
  }

  .desktop-table .actions-redesign .action-edit-icon {
    font-size: 18px !important;
  }

  .desktop-table .actions-redesign .btn-more {
    font-size: 16px !important;
  }
}


/* ============================================================
   WEBDESK_MAIN_DESKTOP_READABILITY_V2_MARKER
   Main dashboard only - larger desktop presentation
   ============================================================ */

@media (min-width: 1101px) {

  /* ===== TOP SUMMARY ===== */

  body > .summary-grid,
  .summary-grid {
    gap: 14px !important;
  }

  .summary-box {
    padding: 18px 20px !important;
    min-height: 100px !important;
  }

  .summary-label {
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: .08em !important;
  }

  .summary-value {
    font-size: 38px !important;
    line-height: 1 !important;
    margin-top: 8px !important;
  }

  .summary-indicator {
    width: 12px !important;
    height: 12px !important;
  }


  /* ===== SITE / LOCATION HEADER ===== */

  .group-card > .group-header {
    padding: 16px 18px !important;
    min-height: 68px !important;
  }

  .group-card .group-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  .group-card .group-header .small,
  .group-card .wd-group-meta {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .group-card .group-toggle {
    font-size: 18px !important;
  }


  /* ===== MAIN DEVICE TABLE ===== */

  .group-card .desktop-table th {
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: .06em !important;

    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  .group-card .desktop-table td {
    font-size: 14px !important;
    line-height: 1.35 !important;

    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }


  /* Hostname button */

  .group-card .desktop-table .wd-device-hostname {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }


  /* RustDesk / AnyDesk IDs */

  .group-card .desktop-table .rustdesk-id-link,
  .group-card .desktop-table .anydesk-id-link {
    font-size: 13px !important;
    line-height: 1 !important;
  }


  /* Depot / Version */

  .group-card .desktop-table .depot-cell,
  .group-card .desktop-table .version-cell {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }


  /* CPU / RAM / DISK */

  .group-card .desktop-table .table-mini-value,
  .group-card .desktop-table .metric,
  .group-card .desktop-table .metric span {
    font-size: 13px !important;
  }


  /* Last seen */

  .group-card .desktop-table td:nth-child(10) {
    font-size: 13px !important;
  }


  /* Tags */

  .group-card .desktop-table .tag {
    font-size: 12px !important;
    line-height: 1.1 !important;
    padding: 5px 9px !important;
  }


  /* Status dot */

  .group-card .desktop-table .wd-status-dot-only,
  .group-card .desktop-table .wd-status-dot-only::before {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
  }


  /* ===== ACTION BUTTONS ===== */

  .group-card .desktop-table .actions-redesign {
    gap: 6px !important;
  }

  .group-card .desktop-table .actions-redesign .btn-action,
  .group-card .desktop-table .actions-redesign .btn-more {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    flex: 0 0 36px !important;
    padding: 0 !important;
  }

  .group-card .desktop-table .action-app-svg,
  .group-card .desktop-table .actions-redesign .epoptes-btn-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .group-card .desktop-table .actions-redesign .action-terminal-icon,
  .group-card .desktop-table .actions-redesign .action-globe {
    font-size: 17px !important;
  }

  .group-card .desktop-table .actions-redesign .action-edit-icon {
    font-size: 19px !important;
  }

  .group-card .desktop-table .actions-redesign .btn-more {
    font-size: 17px !important;
  }
}


/* ============================================================
   WEBDESK_MAIN_HEADER_READABILITY_V1_MARKER
   Larger desktop header + search/filter controls only.
   ============================================================ */

@media (min-width: 1101px) {

  /* ===== MAIN HEADER ===== */

  .wd-header {
    font-size: 14px !important;
  }

  .wd-header button,
  .wd-header .btn,
  .wd-header select,
  .wd-header input {
    font-size: 13px !important;
  }

  /* Theme / Auto refresh / Users / Scripts / Account / Logout */
  .wd-header button,
  .wd-header .btn,
  .wd-header select {
    min-height: 40px !important;
  }

  /* Header labels such as THEME / AUTO REFRESH */
  .wd-header label,
  .wd-header .small {
    font-size: 11px !important;
  }


  /* ===== SEARCH / FILTER BAR ===== */

  .toolbar {
    gap: 10px !important;
  }

  .toolbar form {
    padding: 10px !important;
    gap: 10px !important;
  }

  .toolbar input,
  .toolbar select,
  .toolbar button,
  .toolbar .btn {
    font-size: 14px !important;
    min-height: 42px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Search field */
  .toolbar input[type="text"],
  .toolbar input[type="search"],
  .wd-search-wrap input[type="search"] {
    font-size: 14px !important;
  }

  /* Search placeholder */
  .toolbar input::placeholder,
  .wd-search-wrap input::placeholder {
    font-size: 14px !important;
  }


  /* ===== THEME BOX ===== */

  .theme-box {
    padding: 9px 12px !important;
    gap: 10px !important;
  }

  .theme-box select {
    font-size: 13px !important;
    min-height: 38px !important;
  }


  /* ===== AUTH / USER CONTROLS ===== */

  .auth-box {
    font-size: 13px !important;
    padding: 9px 11px !important;
  }

  .auth-status {
    font-size: 13px !important;
  }


  /* ===== SEARCH / SITE / STATE / SORT SELECT WIDTHS ===== */

  .toolbar > form:first-child input[type="text"],
  .toolbar > form:first-child input[type="search"] {
    width: 250px !important;
    min-width: 250px !important;
  }

  .toolbar > form:first-child select[name="site"] {
    width: 165px !important;
    min-width: 165px !important;
  }

  .toolbar > form:first-child select[name="state"] {
    width: 140px !important;
    min-width: 140px !important;
  }

  .toolbar > form:first-child select[name="sort"] {
    width: 155px !important;
    min-width: 155px !important;
  }
}


/* ============================================================
   WEBDESK_MAIN_LOGO_SIZE_V1_MARKER
   Larger TRONIUS logo in desktop header only.
   ============================================================ */

@media (min-width: 1101px) {
  .wd-header .wd-brand .brand-logo {
    width: 175px !important;
    max-width: 175px !important;
    height: auto !important;
    display: block !important;
  }

  .wd-header .wd-brand {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
  }
}


/* WEBDESK_MAIN_LOGO_SIZE_V2_MARKER */
@media (min-width: 1101px) {
  .wd-header .wd-header-main .wd-brand {
    min-width: 230px !important;
    width: 230px !important;
    flex: 0 0 230px !important;
  }

  .wd-header .wd-header-main .wd-brand .brand-logo {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    height: auto !important;
  }
}

/* ============================================================
   WEBDESK_MAIN_TABLE_COLUMN_ALIGNMENT_V1_MARKER
   Consistent desktop table column alignment.
   ============================================================ */

@media (min-width: 1101px) {

  /* All cells vertically centered */
  .group-card .desktop-table th,
  .group-card .desktop-table td {
    vertical-align: middle !important;
  }


  /* ----------------------------------------------------------
     STATUS - header and dot perfectly centered
     ---------------------------------------------------------- */

  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    text-align: center !important;
  }

  .group-card .desktop-table .wd-status-dot-cell {
    text-align: center !important;
  }

  .group-card .desktop-table .wd-status-dot-only {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-left: auto !important;
    margin-right: auto !important;
    vertical-align: middle !important;
  }


  /* ----------------------------------------------------------
     TEXT COLUMNS
     Hostname / IDs / Depot / Version / Last seen / Tags
     ---------------------------------------------------------- */

  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2),

  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3),

  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4),

  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5),

  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6),

  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10),

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    text-align: left !important;
  }


  /* ----------------------------------------------------------
     CPU / RAM / DISK - header + graph centered together
     ---------------------------------------------------------- */

  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7),

  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8),

  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    text-align: center !important;
  }

  .group-card .desktop-table td.table-graph-cell {
    vertical-align: middle !important;
  }

  .group-card .desktop-table .table-mini-graph {
    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* ----------------------------------------------------------
     ACTIONS - header + button row centered together
     ---------------------------------------------------------- */

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    text-align: center !important;
  }

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    justify-content: center !important;
    align-items: center !important;
  }


  /* ----------------------------------------------------------
     Keep remote ID status dots aligned with ID text
     ---------------------------------------------------------- */

  .group-card .desktop-table .col-rustdesk,
  .group-card .desktop-table .col-anydesk {
    vertical-align: middle !important;
  }

  .group-card .desktop-table .remote-id-status-dot {
    vertical-align: middle !important;
  }

}


/* ============================================================
   WEBDESK_MAIN_TABLE_COLUMN_WIDTHS_V1_MARKER
   Final balanced 12-column desktop layout.
   ============================================================ */

@media (min-width: 1101px) {

  .group-card .desktop-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  /*
     1  Status
     2  Hostname
     3  RustDesk
     4  AnyDesk
     5  Depot
     6  Version
     7  CPU
     8  RAM
     9  Disk
     10 Last seen
     11 Tags
     12 Actions
  */


  /* 1 — STATUS */
  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
  }


  /* 2 — HOSTNAME */
  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width: 110px !important;
  }


  /* 3 — RUSTDESK */
  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width: 95px !important;
    min-width: 0 !important;
  }


  /* 4 — ANYDESK */
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width: 95px !important;
    min-width: 0 !important;
  }


  /* 5 — DEPOT */
  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width: 125px !important;
    min-width: 0 !important;
  }


  /* 6 — VERSION */
  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width: 145px !important;
    min-width: 0 !important;
  }


  /* 7 — CPU GRAPH */
  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7) {
    width: 92px !important;
    min-width: 0 !important;
  }


  /* 8 — RAM GRAPH */
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8) {
    width: 92px !important;
    min-width: 0 !important;
  }


  /* 9 — DISK GRAPH */
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width: 92px !important;
    min-width: 0 !important;
  }


  /* 10 — LAST SEEN */
  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width: 105px !important;
    min-width: 0 !important;
  }


  /* 11 — TAGS
     Flexible column: receives remaining table width.
  */
  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width: auto !important;
    min-width: 110px !important;
  }


  /* 12 — ACTIONS
     Fixed because all action buttons must always fit.
  */
  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    width: 285px !important;
    min-width: 285px !important;
    max-width: 285px !important;
  }


  /* Consistent horizontal padding */
  .group-card .desktop-table th:not(:first-child),
  .group-card .desktop-table td:not(:first-child) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }


  /* STATUS has no unnecessary side padding */
  .group-card .desktop-table th:first-child,
  .group-card .desktop-table td:first-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* Prevent old minimum-width rules from changing ID columns */
  .group-card .desktop-table .col-rustdesk,
  .group-card .desktop-table .col-anydesk,
  .group-card .desktop-table .depot-cell,
  .group-card .desktop-table .version-cell,
  .group-card .desktop-table .table-graph-cell {
    min-width: 0 !important;
  }


  /* Keep text clean inside fixed columns */
  .group-card .desktop-table .depot-cell,
  .group-card .desktop-table .version-cell {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /* Graph itself uses available column width */
  .group-card .desktop-table .table-mini-graph {
    width: 100% !important;
    max-width: 82px !important;
    min-width: 0 !important;
  }


  /* Actions remain centered in their reserved area */
  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    width: 100% !important;
    justify-content: center !important;
  }

}


/* ============================================================
   WEBDESK_MAIN_TABLE_COLUMN_WIDTHS_V2_MARKER
   Final fine tuning of desktop table columns.
   ============================================================ */

@media (min-width: 1101px) {

  .group-card .desktop-table {
    width: 100% !important;
    table-layout: fixed !important;
  }

  /* STATUS */
  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width: 58px !important;
  }

  /* HOSTNAME */
  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width: 110px !important;
  }

  /* RUSTDESK */
  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width: 110px !important;
  }

  /* ANYDESK */
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width: 110px !important;
  }

  /* DEPOT */
  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width: 150px !important;
  }

  /* VERSION */
  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width: 175px !important;
  }

  /* CPU */
  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7) {
    width: 105px !important;
  }

  /* RAM */
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8) {
    width: 105px !important;
  }

  /* DISK */
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width: 105px !important;
  }

  /* LAST SEEN */
  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width: 120px !important;
  }

  /* TAGS = flexible */
  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width: auto !important;
    min-width: 100px !important;
  }

  /* ACTIONS */
  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;
  }

  /* Actions start from left edge of their column */
  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  /* Version should use its new available space */
  .group-card .desktop-table .version-cell {
    max-width: none !important;
  }

}


/* ============================================================
   WEBDESK_MAIN_TABLE_COLUMN_WIDTHS_V3_MARKER
   Final balanced 12-column desktop layout.
   ============================================================ */

@media (min-width: 1101px) {

  .group-card .desktop-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  /* ----------------------------------------------------------
     COLUMN WIDTHS
     ---------------------------------------------------------- */

  /* 1 STATUS */
  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
  }

  /* 2 HOSTNAME */
  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width: 110px !important;
    min-width: 0 !important;
  }

  /* 3 RUSTDESK */
  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width: 110px !important;
    min-width: 0 !important;
  }

  /* 4 ANYDESK */
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width: 110px !important;
    min-width: 0 !important;
  }

  /* 5 DEPOT */
  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width: 145px !important;
    min-width: 0 !important;
  }

  /* 6 VERSION */
  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width: 165px !important;
    min-width: 0 !important;
  }

  /* 7 CPU */
  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7) {
    width: 105px !important;
    min-width: 0 !important;
  }

  /* 8 RAM */
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8) {
    width: 105px !important;
    min-width: 0 !important;
  }

  /* 9 DISK */
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width: 105px !important;
    min-width: 0 !important;
  }

  /* 10 LAST SEEN */
  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width: 115px !important;
    min-width: 0 !important;
  }

  /* 11 TAGS = takes remaining free space */
  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width: auto !important;
    min-width: 90px !important;
  }

  /* 12 ACTIONS */
  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
  }


  /* ----------------------------------------------------------
     COMMON ALIGNMENT
     ---------------------------------------------------------- */

  .group-card .desktop-table th,
  .group-card .desktop-table td {
    box-sizing: border-box !important;
    vertical-align: middle !important;
  }

  .group-card .desktop-table th:not(:first-child),
  .group-card .desktop-table td:not(:first-child) {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }


  /* ----------------------------------------------------------
     STATUS
     Header and dot use exactly the same center axis.
     ---------------------------------------------------------- */

  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  .group-card .desktop-table .wd-status-dot-cell {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    text-align: center !important;
  }

  .group-card .desktop-table .wd-status-dot-only {
    display: inline-flex !important;
    margin: 0 auto !important;
    vertical-align: middle !important;
  }


  /* ----------------------------------------------------------
     TEXT COLUMNS
     ---------------------------------------------------------- */

  .group-card .desktop-table .wd-device-hostname,
  .group-card .desktop-table .col-rustdesk,
  .group-card .desktop-table .col-anydesk,
  .group-card .desktop-table .depot-cell,
  .group-card .desktop-table .version-cell {
    min-width: 0 !important;
  }

  .group-card .desktop-table .wd-device-hostname,
  .group-card .desktop-table .depot-cell,
  .group-card .desktop-table .version-cell {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  /* ----------------------------------------------------------
     GRAPH COLUMNS
     ---------------------------------------------------------- */

  .group-card .desktop-table .table-graph-cell {
    min-width: 0 !important;
  }

  .group-card .desktop-table .table-mini-graph {
    width: 100% !important;
    max-width: 85px !important;
    min-width: 0 !important;
  }


  /* ----------------------------------------------------------
     TAGS
     ---------------------------------------------------------- */

  .group-card .desktop-table td:nth-child(11) {
    overflow: hidden !important;
  }


  /* ----------------------------------------------------------
     ACTIONS
     7 x 36px + gaps fit completely.
     ---------------------------------------------------------- */

  .group-card .desktop-table th:nth-child(12) {
    text-align: center !important;
  }

  .group-card .desktop-table td:nth-child(12) {
    padding-left: 6px !important;
    padding-right: 6px !important;
    overflow: visible !important;
  }

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;

    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 6px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > * {
    flex-shrink: 0 !important;
  }

}


/* ============================================================
   WEBDESK_MAIN_TABLE_COLUMN_WIDTHS_V4_MARKER
   Full content visibility + identical action buttons.
   ============================================================ */

@media (min-width: 1101px) {

  /* ==========================================================
     TABLE
     Never hide/truncate real device data.
     ========================================================== */

  .group-card .group-body {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .group-card .desktop-table {
    width: 100% !important;
    min-width: 1480px !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  .group-card .desktop-table th,
  .group-card .desktop-table td {
    box-sizing: border-box !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
  }


  /* ==========================================================
     1 STATUS
     ========================================================== */

  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1),
  .group-card .desktop-table .wd-status-dot-cell {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    text-align: center !important;
  }

  .group-card .desktop-table .wd-status-dot-only {
    display: inline-flex !important;
    margin: 0 auto !important;
  }


  /* ==========================================================
     2 HOSTNAME
     ========================================================== */

  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width: auto !important;
    min-width: 135px !important;
  }

  .group-card .desktop-table .wd-device-hostname {
    width: auto !important;
    max-width: none !important;

    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }


  /* ==========================================================
     3 RUSTDESK
     ========================================================== */

  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width: auto !important;
    min-width: 120px !important;
  }

  .group-card .desktop-table .col-rustdesk {
    overflow: visible !important;
    text-overflow: clip !important;
  }


  /* ==========================================================
     4 ANYDESK
     ========================================================== */

  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width: auto !important;
    min-width: 120px !important;
  }

  .group-card .desktop-table .col-anydesk {
    overflow: visible !important;
    text-overflow: clip !important;
  }


  /* ==========================================================
     5 DEPOT
     ========================================================== */

  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width: auto !important;
    min-width: 130px !important;
  }

  .group-card .desktop-table .depot-cell {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }


  /* ==========================================================
     6 VERSION
     Full version must always be visible.
     ========================================================== */

  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width: auto !important;
    min-width: 190px !important;
  }

  .group-card .desktop-table .version-cell {
    width: auto !important;
    min-width: 190px !important;
    max-width: none !important;

    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }


  /* ==========================================================
     7 / 8 / 9 GRAPHS
     ========================================================== */

  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7),
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8),
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width: 110px !important;
    min-width: 110px !important;
  }

  .group-card .desktop-table .table-mini-graph {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }


  /* ==========================================================
     10 LAST SEEN
     ========================================================== */

  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width: auto !important;
    min-width: 110px !important;
  }


  /* ==========================================================
     11 TAGS
     Do not clip tags.
     ========================================================== */

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width: auto !important;
    min-width: 120px !important;
  }

  .group-card .desktop-table td:nth-child(11) {
    overflow: visible !important;
    text-overflow: clip !important;
  }


  /* ==========================================================
     12 ACTIONS
     ========================================================== */

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
  }

  .group-card .desktop-table th:nth-child(12) {
    text-align: center !important;
  }

  .group-card .desktop-table td:nth-child(12) {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 6px !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  /* ==========================================================
     ALL ACTION SLOTS
     Every slot has exactly identical geometry.
     ========================================================== */

  .group-card .desktop-table
  td:nth-child(12) .actions-redesign > .btn-action,

  .group-card .desktop-table
  td:nth-child(12) .actions-redesign > .action-more {

    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 36px !important;

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ==========================================================
     MORE WRAPPER
     Wrapper itself must not create different dimensions.
     ========================================================== */

  .group-card .desktop-table
  td:nth-child(12) .actions-redesign .action-more {

    position: relative !important;

    flex: 0 0 36px !important;

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  /* ==========================================================
     MORE BUTTON
     Exactly same 36x36 box as every other action.
     ========================================================== */

  .group-card .desktop-table
  td:nth-child(12) .actions-redesign
  .action-more > .btn-more {

    position: absolute !important;

    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: none !important;

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;

    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
  }

}


/* ============================================================
   WEBDESK_MAIN_TABLE_COLUMN_WIDTHS_V5_MARKER
   Full-width table, no per-site horizontal scrollbar.
   Keep real values fully visible.
   ============================================================ */

@media (min-width: 1101px) {

  /* Never create a scrollbar inside every site card */
  .group-card .group-body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .group-card .desktop-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }

  .group-card .desktop-table th,
  .group-card .desktop-table td {
    box-sizing: border-box !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
  }


  /* STATUS */
  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }


  /* HOSTNAME */
  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width: 1% !important;
    min-width: 0 !important;
  }

  .group-card .desktop-table .wd-device-hostname {
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }


  /* RUSTDESK */
  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width: 1% !important;
    min-width: 0 !important;
  }


  /* ANYDESK */
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width: 1% !important;
    min-width: 0 !important;
  }


  /* DEPOT */
  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width: 1% !important;
    min-width: 0 !important;
  }

  .group-card .desktop-table .depot-cell {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }


  /* VERSION */
  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width: 1% !important;
    min-width: 0 !important;
  }

  .group-card .desktop-table .version-cell {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }


  /* CPU / RAM / DISK */
  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7),
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8),
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }

  .group-card .desktop-table .table-mini-graph {
    width: 82px !important;
    min-width: 0 !important;
    max-width: 82px !important;
  }


  /* LAST SEEN */
  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
  }


  /* TAGS
     This receives the remaining available space. */
  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width: auto !important;
    min-width: 0 !important;
  }

  .group-card .desktop-table td:nth-child(11) {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }


  /* ACTIONS */
  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    width: 274px !important;
    min-width: 274px !important;
    max-width: 274px !important;
  }

  .group-card .desktop-table th:nth-child(12) {
    text-align: center !important;
  }

  .group-card .desktop-table td:nth-child(12) {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
  }


  /* All normal action buttons */
  .group-card .desktop-table
  td:nth-child(12) .actions-redesign > .btn-action {

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }


  /* More wrapper = exactly one normal action slot */
  .group-card .desktop-table
  td:nth-child(12) .actions-redesign > .action-more {

    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }


  /* More button = same geometry as every other button */
  .group-card .desktop-table
  td:nth-child(12) .actions-redesign
  .action-more > .btn-more {

    position: static !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;

    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
    transform: none !important;
  }

}

/* ============================================================
   WEBDESK_MAIN_TABLE_COLUMN_WIDTHS_V6_MARKER
   Final graph-column header fit.
   ============================================================ */

@media (min-width: 1101px) {

  /* CPU / RAM / DISK need enough room for complete header text */
  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7),

  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8),

  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;

    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* Header must never be shortened with ... */
  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table th:nth-child(9) {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* Keep graph itself compact */
  .group-card .desktop-table td:nth-child(7) .table-mini-graph,
  .group-card .desktop-table td:nth-child(8) .table-mini-graph,
  .group-card .desktop-table td:nth-child(9) .table-mini-graph {
    width: 86px !important;
    max-width: 86px !important;
  }

}

/* ========================================================================
   WEBDESK_MOBILE_READABILITY_V1_MARKER
   Mobile-only readability / touch sizing
   ======================================================================== */
@media (max-width: 768px) {

  /* Site / group header */
  .group-header {
    padding: 17px 16px 15px !important;
    gap: 10px !important;
  }

  .group-title {
    font-size: 26px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
  }

  .group-header .small,
  .wd-group-meta {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .group-header .small:last-child {
    font-size: 14px !important;
  }

  /* Device card */
  .mobile-cards .device-card {
    padding: 17px !important;
    border-radius: 18px !important;
  }

  .device-card-top {
    gap: 12px !important;
    margin-bottom: 15px !important;
  }

  .device-card-headline {
    gap: 12px !important;
    min-width: 0 !important;
  }

  .device-avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    font-size: 16px !important;
  }

  /* Hostname */
  .device-card-title,
  .device-card-title.wd-device-hostname,
  .device-card-title.wd-device-hostname span:first-child {
    font-size: 21px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
  }

  .mobile-device-open-chevron {
    font-size: 26px !important;
    line-height: 1 !important;
  }

  .device-subtitle {
    margin-top: 4px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }

  /* ONLINE / OFFLINE */
  .device-card-top > .status {
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  .device-card-top > .status::before {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
  }

  /* CPU / RAM / Disk */
  .mini-metrics {
    gap: 10px !important;
    margin-bottom: 15px !important;
  }

  .mini-chart-card {
    padding: 13px !important;
  }

  .mini-chart-label {
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .mini-chart-sub {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .mini-chart-value {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  /* Device information */
  .device-card-grid {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .device-field {
    padding: 12px 13px !important;
  }

  .device-label {
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
  }

  .device-value,
  .device-value *,
  .device-value.mono {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .device-value .rustdesk-id-link,
  .device-value .anydesk-id-link {
    font-size: 15px !important;
  }

  /* Tags */
  .device-tags {
    gap: 7px !important;
    margin-bottom: 14px !important;
  }

  .device-tags .tag {
    font-size: 13px !important;
    line-height: 1.2 !important;
    padding: 6px 10px !important;
  }

  /* Action buttons */
  .device-card .actions.actions-redesign {
    gap: 9px !important;
  }

  .device-card .actions.actions-redesign .btn-action,
  .device-card .actions.actions-redesign .btn-more {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 15px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    gap: 10px !important;
  }

  /* More menu */
  .device-card .action-menu-item {
    min-height: 46px !important;
    padding: 11px 13px !important;
    font-size: 14px !important;
  }
}

/* Extra narrow phones */
@media (max-width: 480px) {

  .group-title {
    font-size: 24px !important;
  }

  .mobile-cards .device-card {
    padding: 15px !important;
  }

  .device-card-title,
  .device-card-title.wd-device-hostname,
  .device-card-title.wd-device-hostname span:first-child {
    font-size: 20px !important;
  }

  .device-card-top > .status {
    font-size: 15px !important;
  }
}

/* ========================================================================
   WEBDESK_MOBILE_ACTIONS_FULL_WIDTH_V1_MARKER
   Compact mobile cards + evenly distributed action icons
   ======================================================================== */
@media (max-width: 768px) {

  /* Less empty vertical space inside device cards */
  .mobile-cards .device-card {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  .mobile-cards .device-card-top {
    margin-bottom: 11px !important;
  }

  .mobile-cards .device-tags {
    margin-top: 4px !important;
    margin-bottom: 12px !important;
  }

  /*
   * Seven actions:
   * SSH / Epoptes / WEB / RustDesk / AnyDesk / Edit / More
   * Fill the complete available width evenly.
   */
  .mobile-cards .device-card .actions.actions-redesign {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
  }

  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more > .btn-more {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Icon-only toolbar on mobile */
  .mobile-cards .device-card
  .actions.actions-redesign
  > .btn-action
  > span:last-child:not(:first-child) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Restore actual icon elements */
  .mobile-cards .device-card .action-terminal-icon,
  .mobile-cards .device-card .action-globe,
  .mobile-cards .device-card .action-edit-icon {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
  }

  .mobile-cards .device-card .action-terminal-icon {
    font-size: 18px !important;
  }

  .mobile-cards .device-card .action-globe {
    font-size: 18px !important;
  }

  .mobile-cards .device-card .action-edit-icon {
    font-size: 19px !important;
  }

  .mobile-cards .device-card .epoptes-btn-icon,
  .mobile-cards .device-card .action-app-svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    display: block !important;
  }

  .mobile-cards .device-card .actions.actions-redesign .btn-more {
    font-size: 20px !important;
    letter-spacing: 1px !important;
  }

  /*
   * More menu must remain normal width;
   * it must not inherit the 1/7 toolbar width.
   */
  .mobile-cards .device-card .action-more {
    position: relative !important;
  }

  .mobile-cards .device-card .action-more .action-menu {
    width: max-content !important;
    min-width: 220px !important;
    max-width: min(300px, calc(100vw - 32px)) !important;
  }
}

/* Very narrow phones: keep all seven buttons on one row */
@media (max-width: 480px) {

  .mobile-cards .device-card .actions.actions-redesign {
    gap: 6px !important;
  }

  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more > .btn-more {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 11px !important;
  }
}

/* ========================================================================
   WEBDESK_MOBILE_ACTIONS_EVEN_SPREAD_V2_MARKER
   Seven mobile actions evenly distributed across complete device card
   ======================================================================== */
@media (max-width: 768px) {

  .mobile-cards .device-card .actions.actions-redesign {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    column-gap: 0 !important;
    row-gap: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;
    justify-items: center !important;
    box-sizing: border-box !important;
  }

  /* Every action owns exactly 1/7 of the complete row */
  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /*
   * Button itself is narrower than its 1/7 grid cell.
   * This creates equal visual spacing from first to last action.
   */
  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more > .btn-more {
    width: calc(100% - 12px) !important;
    min-width: 0 !important;
    max-width: 76px !important;

    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: none !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }

  /* First action aligned toward left edge */
  .mobile-cards .device-card .actions.actions-redesign > :first-child {
    justify-content: flex-start !important;
  }

  .mobile-cards .device-card .actions.actions-redesign > :first-child.btn-action {
    justify-self: start !important;
    margin-left: 0 !important;
  }

  /* Last action aligned toward right edge */
  .mobile-cards .device-card .actions.actions-redesign > .action-more:last-child {
    justify-content: flex-end !important;
  }

  .mobile-cards .device-card .actions.actions-redesign > .action-more:last-child > .btn-more {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Narrow phones: slightly smaller buttons, same full-width distribution */
@media (max-width: 480px) {

  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more > .btn-more {
    width: calc(100% - 8px) !important;
    max-width: 64px !important;

    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }
}

/* ========================================================================
   WEBDESK_MOBILE_ACTIONS_ICON_POLISH_V3_MARKER
   Compact buttons + larger icons + even full-width distribution
   ======================================================================== */
@media (max-width: 768px) {

  .mobile-cards .device-card .actions.actions-redesign {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
  }

  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Slightly narrower buttons = cleaner spacing */
  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more > .btn-more {
    width: calc(100% - 18px) !important;
    max-width: 68px !important;

    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 13px !important;
    box-sizing: border-box !important;
  }

  /* First and last remain aligned with the usable card width */
  .mobile-cards .device-card .actions.actions-redesign > :first-child.btn-action {
    justify-self: start !important;
    margin-left: 0 !important;
  }

  .mobile-cards .device-card .actions.actions-redesign > .action-more:last-child > .btn-more {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* SSH icon */
  .mobile-cards .device-card .action-terminal-icon {
    font-size: 23px !important;
    line-height: 1 !important;
  }

  /* WEB globe */
  .mobile-cards .device-card .action-globe {
    font-size: 25px !important;
    line-height: 1 !important;
  }

  /* Edit */
  .mobile-cards .device-card .action-edit-icon {
    font-size: 24px !important;
    line-height: 1 !important;
  }

  /* Epoptes + RustDesk + AnyDesk SVG/image logos */
  .mobile-cards .device-card .epoptes-btn-icon,
  .mobile-cards .device-card .action-app-svg {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    object-fit: contain !important;
  }

  /* More */
  .mobile-cards .device-card .actions.actions-redesign .btn-more {
    font-size: 25px !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;
  }
}

/* Smaller phones */
@media (max-width: 480px) {

  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more > .btn-more {
    width: calc(100% - 10px) !important;
    max-width: 58px !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
  }

  .mobile-cards .device-card .epoptes-btn-icon,
  .mobile-cards .device-card .action-app-svg {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    max-width: 25px !important;
  }

  .mobile-cards .device-card .action-terminal-icon {
    font-size: 21px !important;
  }

  .mobile-cards .device-card .action-globe {
    font-size: 23px !important;
  }

  .mobile-cards .device-card .action-edit-icon {
    font-size: 22px !important;
  }
}

/* ========================================================================
   WEBDESK_MOBILE_ACTIONS_COMPACT_LARGE_ICONS_V4_MARKER
   Closer action buttons + substantially larger visible icons
   ======================================================================== */
@media (max-width: 768px) {

  .mobile-cards .device-card .actions.actions-redesign {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more {
    flex: 0 1 64px !important;
    width: 64px !important;
    min-width: 52px !important;
    max-width: 64px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more > .btn-more {
    width: 64px !important;
    min-width: 52px !important;
    max-width: 64px !important;

    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 13px !important;
    box-sizing: border-box !important;
  }

  /* SVG/image logos */
  .mobile-cards .device-card .epoptes-btn-icon,
  .mobile-cards .device-card .action-app-svg {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;

    object-fit: contain !important;
    display: block !important;
  }

  /* SSH */
  .mobile-cards .device-card .action-terminal-icon {
    font-size: 28px !important;
    line-height: 1 !important;
  }

  /* WEB */
  .mobile-cards .device-card .action-globe {
    font-size: 31px !important;
    line-height: 1 !important;
  }

  /* Edit */
  .mobile-cards .device-card .action-edit-icon {
    font-size: 29px !important;
    line-height: 1 !important;
  }

  /* More */
  .mobile-cards .device-card .actions.actions-redesign .btn-more {
    font-size: 29px !important;
    line-height: 1 !important;
    letter-spacing: 1px !important;
  }
}

/* Smaller phones */
@media (max-width: 480px) {

  .mobile-cards .device-card .actions.actions-redesign {
    gap: 5px !important;
  }

  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more {
    flex-basis: 52px !important;
    width: 52px !important;
    min-width: 44px !important;
    max-width: 52px !important;
  }

  .mobile-cards .device-card .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card .actions.actions-redesign > .action-more > .btn-more {
    width: 52px !important;
    min-width: 44px !important;
    max-width: 52px !important;

    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  .mobile-cards .device-card .epoptes-btn-icon,
  .mobile-cards .device-card .action-app-svg {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
  }

  .mobile-cards .device-card .action-terminal-icon {
    font-size: 25px !important;
  }

  .mobile-cards .device-card .action-globe {
    font-size: 28px !important;
  }

  .mobile-cards .device-card .action-edit-icon {
    font-size: 26px !important;
  }
}

/* ========================================================================
   WEBDESK_MOBILE_ACTION_ICON_SIZE_V2_MARKER
   Larger action symbols inside existing mobile buttons.
   Button geometry/layout remains unchanged.
   ======================================================================== */
@media (max-width: 768px) {

  /* SSH */
  .mobile-cards .device-card
  .actions.actions-redesign .action-terminal-icon {
    font-size: 24px !important;
    line-height: 1 !important;
    transform: scale(1.08);
    transform-origin: center;
  }

  /* Epoptes PNG */
  .mobile-cards .device-card
  .actions.actions-redesign .epoptes-btn-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    object-fit: contain !important;
  }

  /* WEB globe */
  .mobile-cards .device-card
  .actions.actions-redesign .action-globe {
    font-size: 25px !important;
    line-height: 1 !important;
    transform: scale(1.08);
    transform-origin: center;
  }

  /* RustDesk + AnyDesk SVG */
  .mobile-cards .device-card
  .actions.actions-redesign .action-app-svg {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    display: block !important;
  }

  /* Edit */
  .mobile-cards .device-card
  .actions.actions-redesign .action-edit-icon {
    font-size: 25px !important;
    line-height: 1 !important;
    transform: scale(1.08);
    transform-origin: center;
  }

  /* More */
  .mobile-cards .device-card
  .actions.actions-redesign .btn-more {
    font-size: 25px !important;
    line-height: 1 !important;
    letter-spacing: 2px !important;
  }
}

/* ========================================================================
   WEBDESK_MOBILE_ACTION_SPACING_V3_MARKER
   Seven equal action slots with guaranteed spacing.
   ======================================================================== */
@media (max-width: 768px) {

  .mobile-cards .device-card .actions.actions-redesign {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    column-gap: 10px !important;
    row-gap: 0 !important;

    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action,

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more > .btn-more {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Slightly smaller gap only on very narrow phones. */
@media (max-width: 480px) {
  .mobile-cards .device-card .actions.actions-redesign {
    column-gap: 7px !important;
  }
}

/* ========================================================================
   WEBDESK_MOBILE_COMPACT_HEADER_V1_MARKER
   Compact header + filters on phones only.
   Desktop remains unchanged.
   ======================================================================== */
@media (max-width: 768px) {

  /* ---------- HEADER ---------- */

  .wd-header {
    padding-top: 10px !important;
  }

  .wd-header-main {
    gap: 12px !important;
  }

  /* Smaller brand area */
  .wd-brand {
    min-height: 74px !important;
    padding: 8px 0 !important;
  }

  .wd-brand .brand-logo {
    max-height: 58px !important;
    height: auto !important;
  }

  /* Header tools become a compact 2-column grid */
  .wd-header-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  /* Theme + Auto refresh */
  .wd-header-tools > .wd-control {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 5px 8px !important;
    margin: 0 !important;
    gap: 5px !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }

  .wd-header-tools > .wd-control .wd-control-label {
    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
  }

  .wd-header-tools > .wd-control select {
    min-width: 0 !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 2px 28px 2px 8px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }

  /* Users + Scripts */
  .wd-header-tools > button.btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    justify-content: center !important;
  }

  /* Logged-in user takes one complete compact row */
  .wd-header-tools > .wd-user-box {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 5px 6px 5px 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
  }

  .wd-user-box .wd-user-text {
    font-size: 12px !important;
  }

  .wd-user-box button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 9px !important;
  }

  .wd-user-dot {
    width: 8px !important;
    height: 8px !important;
  }


  /* ---------- FILTER BAR ---------- */

  .wd-filterbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
  }

  /* Search remains full width */
  .wd-filterbar > .wd-search-wrap {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .wd-search-wrap {
    min-height: 46px !important;
    height: 46px !important;
  }

  .wd-search-wrap input {
    height: 46px !important;
    min-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13px !important;
  }

  /* Site + state next to each other */
  #siteFilterSelect,
  #stateFilterSelect {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* Site actions use one compact full-width row */
  .wd-filterbar > .wd-site-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .wd-site-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 6px !important;
    margin: 0 !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Sort */
  #sortFilterSelect {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* Apply next to Sort */
  .wd-filterbar > .wd-apply {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* Reset, when visible */
  .wd-filterbar > .wd-clear-filters {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Very narrow phones */
@media (max-width: 480px) {
  .wd-header-tools,
  .wd-filterbar {
    gap: 7px !important;
  }

  .wd-site-actions {
    gap: 6px !important;
  }
}

/* ========================================================================
   WEBDESK_MOBILE_COMPACT_HOME_V2_MARKER
   Compact mobile filters + site actions + summary cards.
   Desktop unchanged.
   ======================================================================== */
@media (max-width: 768px) {

  /* ================================================================
     FILTER BAR
     Explicit grid placement:
       SEARCH
       SITE | STATE
       SITE ACTIONS
       SORT | APPLY
     ================================================================ */

  .wd-filterbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .wd-filterbar > .wd-search-wrap {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  #siteFilterSelect {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #stateFilterSelect {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .wd-filterbar > .wd-site-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;

    display: grid !important;
    grid-template-columns: repeat(3, 44px) !important;
    justify-content: start !important;
    gap: 8px !important;

    width: auto !important;
    margin: 0 !important;
  }

  #sortFilterSelect {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  .wd-filterbar > .wd-apply {
    grid-column: 2 !important;
    grid-row: 4 !important;
  }

  .wd-filterbar > .wd-clear-filters {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
  }


  /* ================================================================
     SITE ACTIONS
     Compact square icon buttons.
     Text remains in DOM/accessibility tree.
     ================================================================ */

  .wd-site-actions .btn {
    position: relative !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
    white-space: nowrap !important;

    font-size: 0 !important;
    border-radius: 10px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .wd-site-actions .btn::after {
    display: block !important;
    font-size: 20px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
  }

  .wd-site-actions .btn:nth-child(1)::after {
    content: "+" !important;
    font-size: 25px !important;
  }

  .wd-site-actions .btn:nth-child(2)::after {
    content: "✎" !important;
  }

  .wd-site-actions .btn:nth-child(3)::after {
    content: "×" !important;
    font-size: 24px !important;
  }


  /* ================================================================
     SUMMARY
     TOTAL / ONLINE / OFFLINE in one compact row.
     ================================================================ */

  .summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 8px !important;

    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 12px !important;

    padding: 0 !important;
  }

  .summary-grid > .summary-link {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .summary-grid .summary-box {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 88px !important;
    min-height: 88px !important;

    padding: 12px 12px !important;
    margin: 0 !important;

    box-sizing: border-box !important;
    border-radius: 14px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .summary-grid .summary-head {
    width: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 5px !important;
  }

  .summary-grid .summary-label {
    min-width: 0 !important;

    font-size: 9px !important;
    line-height: 1.1 !important;
    letter-spacing: .06em !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .summary-grid .summary-indicator {
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;

    flex: 0 0 8px !important;
  }

  .summary-grid .summary-value {
    font-size: 29px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    margin: 0 !important;
  }
}


/* ========================================================================
   Narrow phones
   ======================================================================== */
@media (max-width: 480px) {

  .summary-grid {
    gap: 6px !important;
  }

  .summary-grid .summary-box {
    height: 82px !important;
    min-height: 82px !important;
    padding: 10px !important;
  }

  .summary-grid .summary-label {
    font-size: 8px !important;
    letter-spacing: .04em !important;
  }

  .summary-grid .summary-value {
    font-size: 26px !important;
  }
}

/* ========================================================================
   WEBDESK_MOBILE_SELECT_VISIBILITY_V1_MARKER
   Fix native SELECT text/caret visibility on iPhone/Safari.
   Keeps existing compact mobile layout unchanged.
   ======================================================================== */
@media (max-width: 768px) {

  /* Header: Theme + Auto refresh */
  .wd-header-tools > .wd-control select,
  .wd-header-tools > .wd-control .theme-select,

  /* Filters */
  .wd-filterbar > select,
  #siteFilterSelect,
  #stateFilterSelect,
  #sortFilterSelect {
    -webkit-appearance: auto !important;
    appearance: auto !important;

    color: #f4f6fb !important;
    -webkit-text-fill-color: #f4f6fb !important;

    background-color: #050507 !important;
    opacity: 1 !important;

    font-family: var(--wd-ui-font) !important;
    font-weight: 400 !important;

    color-scheme: dark !important;
  }

  /* Theme + Auto refresh need enough room for native iOS caret. */
  .wd-header-tools > .wd-control select,
  .wd-header-tools > .wd-control .theme-select {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Filter selects */
  #siteFilterSelect,
  #stateFilterSelect,
  #sortFilterSelect {
    padding-left: 12px !important;
    padding-right: 10px !important;
  }

  /* Ensure option text itself is readable. */
  .wd-header-tools select option,
  .wd-filterbar select option {
    color: #f4f6fb !important;
    background: #050507 !important;
  }
}

/* WEBDESK_MOBILE_ADMIN_FIRST_V1_MARKER */
@media (max-width: 768px) {

  .wd-header-tools {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .wd-header-tools > .wd-user-box {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    order: -1 !important;
  }

}

/* WEBDESK_MOBILE_THEME_REFRESH_READABLE_V1_MARKER */
@media (max-width: 768px) {

  .wd-header-tools > .wd-control {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 12px !important;
  }

  .wd-header-tools > .wd-control .wd-control-label {
    display: block !important;
    width: 100% !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .wd-header-tools > .wd-control select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    padding: 0 30px 0 10px !important;
    font-size: 14px !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

}

/* WEBDESK_MOBILE_HEADER_SELECT_FIX_V2_MARKER */
@media (max-width: 768px) {

  .wd-header-tools > .wd-control {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 100px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  .wd-header-tools > .wd-control .wd-control-label {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 18px !important;
    font-size: 11px !important;
  }

  .wd-header-tools > .wd-control select,
  .wd-header-tools > .wd-control select.theme-select {
    display: block !important;
    position: relative !important;
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    line-height: normal !important;
    padding: 0 32px 0 12px !important;
    margin: 0 !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
  }

}

/* ========================================================================
   WEBDESK_MOBILE_FILTER_LAYOUT_V2_MARKER
   Compact and balanced mobile filter panel
   ======================================================================== */
@media (max-width: 768px) {

  .wd-filterbar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  /* Search */
  .wd-filterbar > .wd-search-wrap {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Site + state */
  #siteFilterSelect {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #stateFilterSelect {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  /*
   * Row 3:
   * [+] [edit] [delete] [ Sort................ ]
   */
  .wd-filterbar > .wd-site-actions {
    grid-column: 1 !important;
    grid-row: 3 !important;

    display: grid !important;
    grid-template-columns: repeat(3, 44px) !important;
    gap: 8px !important;

    width: max-content !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  #sortFilterSelect {
    grid-column: 2 !important;
    grid-row: 3 !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  /* Main action */
  .wd-filterbar > .wd-apply {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Reset, only when active filters exist */
  .wd-filterbar > .wd-clear-filters {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    width: 100% !important;
  }

  /* Keep all main controls equal height */
  #siteFilterSelect,
  #stateFilterSelect {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  .wd-site-actions .btn {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}

/* On very narrow phones keep the action row compact. */
@media (max-width: 480px) {

  .wd-filterbar {
    gap: 8px !important;
    padding: 10px !important;
  }

  .wd-site-actions .btn {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  .wd-filterbar > .wd-site-actions {
    grid-template-columns: repeat(3, 42px) !important;
    gap: 6px !important;
  }
}

/* ========================================================================
   WEBDESK_MOBILE_SITE_ACTION_ALIGNMENT_V3_MARKER
   Evenly distribute + / edit / delete inside left filter column
   ======================================================================== */
@media (max-width: 768px) {

  .wd-filterbar > .wd-site-actions {
    grid-column: 1 !important;
    grid-row: 3 !important;

    display: grid !important;
    grid-template-columns: repeat(3, 44px) !important;

    width: 100% !important;
    max-width: none !important;

    justify-content: space-between !important;
    align-items: center !important;

    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .wd-filterbar > .wd-site-actions .btn {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
  }

  /* exact positioning inside the left half */
  .wd-filterbar > .wd-site-actions .btn:nth-child(1) {
    justify-self: start !important;
  }

  .wd-filterbar > .wd-site-actions .btn:nth-child(2) {
    justify-self: center !important;
  }

  .wd-filterbar > .wd-site-actions .btn:nth-child(3) {
    justify-self: end !important;
  }
}

/* ========================================================================
   WEBDESK_MOBILE_SITE_ACTION_GROUP_V4_MARKER
   Compact centered Site action group
   ======================================================================== */
@media (max-width: 768px) {

  .wd-filterbar > .wd-site-actions {
    grid-column: 1 !important;
    grid-row: 3 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: none !important;

    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .wd-filterbar > .wd-site-actions .btn,
  .wd-filterbar > .wd-site-actions .btn:nth-child(1),
  .wd-filterbar > .wd-site-actions .btn:nth-child(2),
  .wd-filterbar > .wd-site-actions .btn:nth-child(3) {
    flex: 0 0 44px !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    justify-self: auto !important;
    box-sizing: border-box !important;
  }

}

/* ========================================================================
   WEBDESK_MOBILE_SITE_ACTION_ICON_ALIGN_V5_MARKER
   Optical centering of + / edit / delete icons
   ======================================================================== */
@media (max-width: 768px) {

  .wd-site-actions .btn {
    position: relative !important;
  }

  .wd-site-actions .btn::after {
    position: absolute !important;
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    left: 0 !important;
    top: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 1 !important;
    text-align: center !important;

    transform: none !important;
  }

  /* + Site */
  .wd-site-actions .btn:nth-child(1)::after {
    font-family: Arial, sans-serif !important;
    font-size: 27px !important;
    font-weight: 400 !important;

    /* optical correction */
    transform: translateY(-1px) !important;
  }

  /* Rename */
  .wd-site-actions .btn:nth-child(2)::after {
    font-family: Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;

    /* pencil glyph needs a tiny optical correction */
    transform: translateY(-1px) !important;
  }

  /* Delete */
  .wd-site-actions .btn:nth-child(3)::after {
    font-family: Arial, sans-serif !important;
    font-size: 27px !important;
    font-weight: 400 !important;

    /* x sits slightly low with normal font baseline */
    transform: translateY(-1px) !important;
  }

}

/* ============================================================
   WEBDESK MOBILE DEVICE POPUP V1
   Final mobile layout / typography override.
   WEBDESK_MOBILE_DEVICE_POPUP_V1_MARKER
   ============================================================ */

@media (max-width: 760px) {

  /* ----------------------------------------------------------
     POPUP
     ---------------------------------------------------------- */

  .wd-device-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* ----------------------------------------------------------
     HEADER
     ---------------------------------------------------------- */

  .wd-device-dialog-header {
    position: relative !important;
    z-index: 30 !important;
    padding: 12px 14px !important;
    background: #10151f !important;
  }

  .wd-device-title-row h2 {
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  .wd-device-status-badge {
    font-size: 11px !important;
  }

  .wd-device-subtitle {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .wd-device-position {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }


  /* ----------------------------------------------------------
     TABS
     Keep tabs above scrolling panel content.
     ---------------------------------------------------------- */

  .wd-device-tabs {
    position: relative !important;
    z-index: 25 !important;

    display: flex !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 6px 8px !important;
    margin: 0 !important;

    gap: 4px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    background: #090d12 !important;

    box-sizing: border-box !important;
  }

  .wd-device-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .wd-device-dialog
  .wd-device-tabs
  .wd-device-tab {
    flex: 0 0 auto !important;

    min-width: auto !important;
    min-height: 42px !important;

    padding: 0 14px !important;
    margin: 0 !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    box-sizing: border-box !important;
  }


  /* ----------------------------------------------------------
     CONTENT
     ---------------------------------------------------------- */

  .wd-device-content {
    position: relative !important;
    z-index: 1 !important;

    padding: 12px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    box-sizing: border-box !important;
  }

  .wd-device-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }


  /* ----------------------------------------------------------
     CARDS
     ---------------------------------------------------------- */

  .wd-device-dialog .wd-device-card,
  .wd-device-dialog .wd-hw-card {
    min-width: 0 !important;
    max-width: 100% !important;

    padding: 15px !important;
    box-sizing: border-box !important;
  }

  .wd-device-dialog
  section.wd-device-panel
  .wd-device-card-title,

  .wd-device-dialog
  section.wd-device-panel
  .wd-hw-card-head
  .wd-device-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
  }


  /* ----------------------------------------------------------
     OVERVIEW
     ---------------------------------------------------------- */

  .wd-device-panel[data-device-panel="overview"]
  .wd-device-kv-grid span {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .wd-device-panel[data-device-panel="overview"]
  .wd-device-kv-grid strong {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .wd-device-panel[data-device-panel="overview"]
  .wd-device-metric-head {
    font-size: 13px !important;
  }


  /* ----------------------------------------------------------
     HARDWARE
     ---------------------------------------------------------- */

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-card-subtitle {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-label,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-kv span {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-value,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-kv strong {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-card {
    font-size: 14px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-history,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-history *,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-memory-modules,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-memory-modules *,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-terminal-body,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="hardware"]
  .wd-hw-terminal-body * {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }


  /* ----------------------------------------------------------
     INSTANCES
     ---------------------------------------------------------- */

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"] {
    font-size: 14px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  .wd-connected-summary {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  button,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  input,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  select {
    font-size: 14px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  table {
    font-size: 14px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  th {
    font-size: 12px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="connected"]
  td {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }


  /* ----------------------------------------------------------
     COUNTERS
     ---------------------------------------------------------- */

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"] {
    font-size: 14px !important;
    min-width: 0 !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  button,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  input,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  select {
    font-size: 14px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-period-label,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-date-field > span {
    font-size: 12px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-summary-card > span {
    font-size: 11px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  .wd-profit-summary-card > strong {
    font-size: 15px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  table {
    font-size: 14px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  th {
    font-size: 12px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="counters"]
  td {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }


  /* ----------------------------------------------------------
     SERVICES
     Override old compact mobile typography.
     ---------------------------------------------------------- */

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"] {
    font-size: 14px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row span,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"]
  .wd-device-service-row strong {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-badge {
    font-size: 12px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-subtitle,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="services"]
  .wd-tunnel-health-detail {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }


  /* ----------------------------------------------------------
     ACTIONS
     ---------------------------------------------------------- */

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="actions"] {
    font-size: 14px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="actions"]
  .wd-device-action,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="actions"]
  button {
    font-size: 14px !important;
    line-height: 1.25 !important;
    min-height: 42px !important;
  }

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="actions"]
  .wd-device-detail-block,

  .wd-device-dialog
  section.wd-device-panel[data-device-panel="actions"]
  .wd-device-empty-info {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

}


/* ============================================================
   WEBDESK MOBILE DEVICE TABS V2
   Six tabs fit cleanly across the complete mobile width.
   WEBDESK_MOBILE_DEVICE_TABS_V2_MARKER
   ============================================================ */

@media (max-width: 760px) {

  .wd-device-dialog .wd-device-tabs {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 3px !important;
    padding: 6px 7px !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .wd-device-dialog .wd-device-tabs .wd-device-tab,
  .wd-device-dialog .wd-device-tabs button.wd-device-tab {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 44px !important;
    min-height: 44px !important;

    padding: 0 3px !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;

    box-sizing: border-box !important;
  }

}

/* Narrow phones need slightly smaller tab labels. */
@media (max-width: 430px) {

  .wd-device-dialog .wd-device-tabs .wd-device-tab,
  .wd-device-dialog .wd-device-tabs button.wd-device-tab {
    font-size: 11px !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

}

/* ========================================================================
   WEBDESK_MOBILE_POPUP_TABS_STABLE_V1_MARKER
   Keep popup header + tab bar structurally stable on every active panel.
   Hardware must not shift/collapse the tab bar.
   ======================================================================== */
@media (max-width: 760px) {

  /* Popup is a strict 3-row layout:
     header / tabs / scrollable content */
  .wd-device-dialog {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    grid-template-columns: minmax(0, 1fr) !important;

    width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    max-height: 100dvh !important;

    overflow: hidden !important;
  }

  /* Header never participates in panel scrolling */
  .wd-device-dialog > .wd-device-dialog-header {
    position: relative !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;

    flex: none !important;

    z-index: 30 !important;
    box-sizing: border-box !important;
  }

  /* Tabs always occupy their own fixed layout row */
  .wd-device-dialog > .wd-device-tabs {
    position: relative !important;
    grid-row: 2 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;

    align-self: stretch !important;

    z-index: 25 !important;
    box-sizing: border-box !important;
  }

  /* Only this area is allowed to scroll */
  .wd-device-dialog > .wd-device-content {
    position: relative !important;
    grid-row: 3 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;

    z-index: 1 !important;
    box-sizing: border-box !important;
  }

  /* No active panel may influence header/tab positioning */
  .wd-device-dialog
  > .wd-device-content
  > .wd-device-panel {
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-top: 0 !important;

    box-sizing: border-box !important;
  }

}


/* ========================================================================
   WEBDESK_LOGIN_PAGE_PRO_V1_MARKER
   Dedicated logged-out presentation. Authenticated dashboard is untouched.
   ======================================================================== */

.wd-header.wd-login-page {
  min-height:calc(100vh - 80px);
  margin:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}

.wd-header.wd-login-page .wd-header-main {
  width:min(100%, 460px);
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:26px !important;
}

.wd-header.wd-login-page .wd-brand {
  width:100%;
  min-width:0 !important;
  justify-content:center !important;
}

.wd-header.wd-login-page .wd-brand .brand-logo {
  width:min(290px, 70vw) !important;
  max-width:290px !important;
  height:auto !important;
}

.wd-header.wd-login-page .wd-header-tools {
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:12px !important;
}

/* Login card */
.wd-login-page .wd-login-shell {
  width:100%;
}

.wd-login-page .wd-login-card {
  position:relative;
  width:100%;
  padding:28px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(circle at 90% 0%,
      rgba(var(--accent-rgb),.10),
      transparent 34%),
    var(--panel-gradient);
  box-shadow:
    0 28px 80px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
}

.wd-login-page .wd-login-card:before {
  content:"";
  position:absolute;
  top:0;
  left:12%;
  right:12%;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(var(--accent-rgb),.70),
    transparent
  );
}

.wd-login-page .wd-login-heading {
  margin-bottom:24px;
  text-align:center;
}

.wd-login-page .wd-login-kicker {
  margin-bottom:8px;
  color:var(--accent);
  font-size:10px;
  font-weight:700;
  letter-spacing:.20em;
}

.wd-login-page .wd-login-title {
  color:var(--text);
  font-size:26px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.025em;
}

.wd-login-page .wd-login-subtitle {
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.wd-login-page .wd-login-box {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  width:100% !important;
  min-height:0 !important;
  padding:0 !important;
  gap:16px !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
}

.wd-login-page .wd-login-field {
  display:flex;
  flex-direction:column;
  gap:7px;
  width:100%;
}

.wd-login-page .wd-login-field > span {
  color:var(--text-soft);
  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
}

.wd-login-page .wd-login-box input {
  width:100% !important;
  min-width:0 !important;
  height:48px !important;
  min-height:48px !important;
  margin:0 !important;
  padding:0 14px !important;
  border-radius:12px !important;
  font-size:14px !important;
  background:color-mix(in srgb, var(--panel-2) 82%, black 18%) !important;
}

.wd-login-page .wd-login-box input:focus {
  border-color:rgba(var(--accent-rgb),.70) !important;
  box-shadow:var(--accent-glow) !important;
}

.wd-login-page .wd-login-submit {
  width:100% !important;
  min-height:50px !important;
  margin-top:2px !important;
  border-color:rgba(var(--accent-rgb),.60) !important;
  border-radius:12px !important;
  background:
    linear-gradient(
      180deg,
      rgba(var(--accent-rgb),.22),
      rgba(var(--accent-rgb),.10)
    ) !important;
  color:var(--text) !important;
  font-size:14px !important;
  font-weight:600 !important;
  cursor:pointer;
}

.wd-login-page .wd-login-submit:hover {
  border-color:rgba(var(--accent-rgb),.90) !important;
  background:
    linear-gradient(
      180deg,
      rgba(var(--accent-rgb),.30),
      rgba(var(--accent-rgb),.14)
    ) !important;
}

.wd-login-page .wd-login-error {
  margin:0 0 18px;
  padding:11px 13px;
  border:1px solid rgba(239,68,68,.35);
  border-radius:11px;
  background:rgba(239,68,68,.08);
  color:#ffd7de;
  font-size:12px;
  line-height:1.4;
  text-align:center;
}

/* Theme is useful, but secondary to authentication. */
.wd-login-page .wd-header-tools > .wd-control {
  order:2 !important;
  width:auto !important;
  min-height:0 !important;
  align-self:center !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  margin-top:2px !important;
  padding:5px 7px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.wd-login-page .wd-login-shell {
  order:1 !important;
}

.wd-login-page .wd-control-label {
  font-size:9px !important;
  color:var(--muted) !important;
}

.wd-login-page .wd-control select,
.wd-login-page .wd-control select.theme-select {
  width:auto !important;
  min-width:112px !important;
  max-width:150px !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  padding:4px 26px 4px 9px !important;
  font-size:11px !important;
}

/*
 * Nothing from the device dashboard is useful before authentication.
 * The elements remain in the template for minimum-risk compatibility,
 * but are not presented to unauthenticated users.
 */
body:has(.wd-header.wd-login-page) > .summary-grid,
body:has(.wd-header.wd-login-page) > .group-card,
body:has(.wd-header.wd-login-page) > .panel {
  display:none !important;
}

/* Mobile */
@media (max-width:768px) {
  body:has(.wd-header.wd-login-page) {
    padding:16px !important;
  }

  .wd-header.wd-login-page {
    min-height:calc(100vh - 64px);
  }

  .wd-header.wd-login-page .wd-header-main {
    width:min(100%, 420px) !important;
    gap:20px !important;
  }

  .wd-header.wd-login-page .wd-brand .brand-logo {
    width:min(255px, 68vw) !important;
  }

  .wd-login-page .wd-login-card {
    padding:24px 20px !important;
    border-radius:21px !important;
  }

  .wd-login-page .wd-login-title {
    font-size:24px !important;
  }

  .wd-login-page .wd-login-box {
    display:flex !important;
    grid-template-columns:none !important;
    gap:15px !important;
  }

  .wd-login-page .wd-login-box input,
  .wd-login-page .wd-login-submit {
    width:100% !important;
    min-height:50px !important;
  }

  .wd-login-page .wd-header-tools > .wd-control {
    min-height:0 !important;
    padding:4px 6px !important;
  }
}

@media (max-width:480px) {
  body:has(.wd-header.wd-login-page) {
    padding:12px !important;
  }

  .wd-header.wd-login-page .wd-header-main {
    gap:18px !important;
  }

  .wd-header.wd-login-page .wd-brand .brand-logo {
    width:min(230px, 70vw) !important;
  }

  .wd-login-page .wd-login-card {
    padding:22px 18px !important;
  }
}


/* ========================================================================
   WEBDESK_LOGIN_PAGE_COMPACT_V2_MARKER
   Compact centered login composition
   ======================================================================== */

.wd-header.wd-login-page {
  min-height:calc(100vh - 36px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.wd-header.wd-login-page .wd-header-main {
  width:min(100%, 440px) !important;
  gap:18px !important;
}

.wd-header.wd-login-page .wd-brand {
  margin:0 0 4px !important;
}

.wd-header.wd-login-page .wd-brand .brand-logo {
  width:min(230px, 58vw) !important;
  max-width:230px !important;
}

.wd-header.wd-login-page .wd-header-tools {
  gap:10px !important;
}

.wd-login-page .wd-login-card {
  padding:26px !important;
}

.wd-login-page .wd-login-heading {
  margin-bottom:22px !important;
}

.wd-login-page .wd-header-tools > .wd-control {
  margin:4px auto 0 !important;
}

/* Phone */
@media (max-width:768px) {

  .wd-header.wd-login-page {
    min-height:calc(100dvh - 32px) !important;
  }

  .wd-header.wd-login-page .wd-header-main {
    width:min(100%, 410px) !important;
    gap:16px !important;
  }

  .wd-header.wd-login-page .wd-brand {
    margin-bottom:2px !important;
  }

  .wd-header.wd-login-page .wd-brand .brand-logo {
    width:min(210px, 55vw) !important;
    max-width:210px !important;
  }

  .wd-login-page .wd-login-card {
    padding:22px 20px !important;
  }

  .wd-login-page .wd-login-heading {
    margin-bottom:20px !important;
  }

  .wd-login-page .wd-login-title {
    font-size:23px !important;
  }

  .wd-login-page .wd-login-subtitle {
    margin-top:6px !important;
  }

  .wd-login-page .wd-login-box {
    gap:14px !important;
  }

  .wd-login-page .wd-login-box input {
    height:48px !important;
    min-height:48px !important;
  }

  .wd-login-page .wd-login-submit {
    min-height:48px !important;
  }

  .wd-login-page .wd-header-tools > .wd-control {
    margin-top:2px !important;
  }
}


/* ========================================================================
   WEBDESK_LOGIN_PAGE_POSITION_V3_MARKER
   Move complete login composition upward
   ======================================================================== */

.wd-header.wd-login-page .wd-header-main {
  transform:translateY(-90px) !important;
}

@media (max-width:768px) {
  .wd-header.wd-login-page .wd-header-main {
    transform:translateY(-110px) !important;
  }
}

@media (max-width:480px) {
  .wd-header.wd-login-page .wd-header-main {
    transform:translateY(-90px) !important;
  }
}


/* WEBDESK_LOGIN_PAGE_POSITION_V4_MARKER */
@media (max-width:768px) {
  .wd-header.wd-login-page .wd-header-main {
    transform:translateY(-210px) !important;
  }
}


/* WEBDESK_LOGIN_MOBILE_POSITION_FIX_V5_MARKER */
@media (max-width:768px) {
  .wd-header.wd-login-page .wd-header-main {
    transform:translateY(-60px) !important;
  }
}


/* WEBDESK_LOGIN_DESKTOP_LOGO_CENTER_V6_MARKER */
@media (min-width:769px) {
  .wd-header.wd-login-page .wd-brand {
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    justify-content:center !important;
    align-items:center !important;
  }

  .wd-header.wd-login-page .wd-brand .brand-logo {
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* WEBDESK_LOGIN_MOBILE_LOGO_SIZE_V7_MARKER */
@media (max-width:768px) {
  .wd-header.wd-login-page .wd-brand .brand-logo {
    width:min(230px, 70vw) !important;
    max-width:230px !important;
    height:auto !important;
  }
}

/* WEBDESK_LOGIN_MOBILE_LOGO_VISUAL_MATCH_V8_MARKER */
@media (max-width:768px) {
  .wd-header.wd-login-page .wd-brand .brand-logo {
    width:min(280px, 78vw) !important;
    max-width:280px !important;
    height:auto !important;
  }
}

/* WEBDESK_LOGIN_MOBILE_LOGO_REAL_SIZE_V9_MARKER */
@media (max-width:768px) {
  .wd-header.wd-login-page .wd-brand .brand-logo {
    width:230px !important;
    min-width:230px !important;
    max-width:230px !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }
}

/* WEBDESK_LOGIN_HIDE_SCROLLBARS_V1_MARKER
   Hide scrollbars on login page only; scrolling remains functional.
   ================================================================ */

html:has(.wd-header.wd-login-page),
body:has(.wd-header.wd-login-page) {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html:has(.wd-header.wd-login-page)::-webkit-scrollbar,
body:has(.wd-header.wd-login-page)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* WEBDESK_LOGIN_FOOTER_ALWAYS_VISIBLE_V1_MARKER
   Keep login-page footer visible on desktop and mobile.
   ===================================================== */

body:has(.wd-header.wd-login-page) footer {
  position: fixed !important;
  left: 20px !important;
  right: 20px !important;
  bottom: 24px !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 20 !important;
  text-align: center !important;
}

/* Mobile */
@media (max-width: 768px) {
  body:has(.wd-header.wd-login-page) footer {
    left: 16px !important;
    right: 16px !important;
    bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
}


/* WEBDESK_LOGIN_FOOTER_VISIBLE_V2_MARKER
   Login footer always visible and raised from bottom.
   ================================================== */

.wd-footer {
  margin-top:26px;
  text-align:center;
  color:#7f95b3;
  font-size:12px;
}

/* Login page only */
body:has(.wd-header.wd-login-page) .wd-footer {
  position:fixed !important;
  left:20px !important;
  right:20px !important;
  bottom:32px !important;
  width:auto !important;
  margin:0 !important;
  z-index:50 !important;
  text-align:center !important;
}

/* Mobile login */
@media (max-width:768px) {
  body:has(.wd-header.wd-login-page) .wd-footer {
    left:20px !important;
    right:20px !important;
    bottom:calc(38px + env(safe-area-inset-bottom, 0px)) !important;
    font-size:11px !important;
    line-height:1.4 !important;
  }
}


/* ========================================================================
   WEBDESK_MOBILE_SITE_CARDS_V1_MARKER
   Clear, separated and touch-friendly site cards.
   Mobile only. Desktop layout is untouched.
   ======================================================================== */

@media (max-width:768px) {

  /* ------------------------------------------------------------
     SITE CARD
     ------------------------------------------------------------ */

  .group-card {
    position:relative !important;
    margin:0 0 18px 0 !important;
    overflow:hidden !important;

    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:18px !important;

    background:
      radial-gradient(
        circle at 92% 10%,
        rgba(var(--accent-rgb),.075),
        transparent 34%
      ),
      linear-gradient(
        180deg,
        rgba(24,26,31,.98),
        rgba(12,13,17,.99)
      ) !important;

    box-shadow:
      0 10px 28px rgba(0,0,0,.32),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  /* Accent line makes individual sites easier to distinguish. */
  .group-card::before {
    content:"" !important;
    position:absolute !important;
    z-index:2 !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:3px !important;

    background:linear-gradient(
      180deg,
      rgba(var(--accent-rgb),.95),
      rgba(var(--accent-rgb),.25)
    ) !important;

    box-shadow:0 0 14px rgba(var(--accent-rgb),.20) !important;
    pointer-events:none !important;
  }

  /* ------------------------------------------------------------
     HEADER
     ------------------------------------------------------------ */

  .group-card > .group-header {
    position:relative !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:16px !important;

    min-height:0 !important;
    padding:18px 18px 16px 20px !important;

    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .group-card > .group-header:active {
    background:rgba(255,255,255,.025) !important;
  }

  .group-header-left {
    width:100% !important;

    display:grid !important;
    grid-template-columns:22px minmax(0,1fr) !important;

    align-items:start !important;
    gap:10px !important;
  }

  /* ------------------------------------------------------------
     EXPAND / COLLAPSE ARROW
     ------------------------------------------------------------ */

  .group-toggle {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:22px !important;
    height:28px !important;

    margin:0 !important;

    color:var(--muted) !important;
    font-size:19px !important;
    line-height:1 !important;

    transition:
      transform .18s ease,
      color .18s ease !important;
  }

  .group-card:not(.collapsed) .group-toggle {
    color:var(--text-soft) !important;
  }

  /* ------------------------------------------------------------
     SITE NAME
     ------------------------------------------------------------ */

  .group-title {
    margin:0 !important;

    color:var(--text) !important;

    font-size:20px !important;
    font-weight:650 !important;
    line-height:1.15 !important;
    letter-spacing:-.025em !important;

    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  /* ------------------------------------------------------------
     DEVICE COUNT + PROFIT
     ------------------------------------------------------------ */

  .wd-group-meta {
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;

    gap:5px 7px !important;

    margin-top:7px !important;

    color:var(--muted) !important;

    font-size:11px !important;
    line-height:1.45 !important;
  }

  .wd-group-meta > span:first-child {
    color:var(--text-soft) !important;
    font-weight:500 !important;
  }

  .wd-group-profit-separator {
    opacity:.45 !important;
  }

  .wd-group-profit {
    color:var(--muted) !important;
  }

  .wd-group-profit strong {
    color:var(--text-soft) !important;
    font-weight:600 !important;
  }

  .wd-group-profit-eur {
    color:var(--muted) !important;
  }

  /*
   * Coverage goes onto its own row.
   * This keeps long profit/currency values readable.
   */
  .wd-group-profit-coverage {
    flex-basis:100% !important;

    margin-top:1px !important;

    color:color-mix(
      in srgb,
      var(--muted) 82%,
      transparent
    ) !important;

    font-size:10px !important;
  }

  /* Hide the leading separator because coverage is now a new row. */
  .wd-group-profit-coverage::first-letter {
    color:transparent;
  }

  /* ------------------------------------------------------------
     ONLINE / OFFLINE STATUS AREA
     Existing:
       <div class="small">
         ONLINE x · OFFLINE y
       </div>

     Convert it visually into a separate status strip.
     ------------------------------------------------------------ */

  .group-card > .group-header > .small {
    position:relative !important;

    display:flex !important;
    align-items:center !important;

    width:100% !important;
    min-height:48px !important;

    margin:0 !important;
    padding:12px 14px !important;

    border:1px solid rgba(255,255,255,.07) !important;
    border-radius:12px !important;

    background:rgba(255,255,255,.025) !important;

    color:var(--text-soft) !important;

    font-size:13px !important;
    font-weight:600 !important;
    line-height:1.25 !important;

    letter-spacing:.01em !important;
  }

  /*
   * Colored status markers.
   * We retain the original text so no backend/Jinja behavior changes.
   */
  .group-card > .group-header > .small::before {
    content:"" !important;

    width:8px !important;
    height:8px !important;

    margin-right:9px !important;

    flex:0 0 auto !important;

    border-radius:50% !important;

    background:#36d978 !important;

    box-shadow:0 0 10px rgba(54,217,120,.45) !important;
  }

  /* ------------------------------------------------------------
     GROUP BODY
     Clear visual separation from site header.
     ------------------------------------------------------------ */

  .group-card > .group-body {
    border-top:1px solid rgba(255,255,255,.075) !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.012),
        rgba(0,0,0,.06)
      ) !important;

    padding-top:14px !important;
  }

  /*
   * Device cards inside an expanded site must not visually merge
   * into the site card.
   */
  .group-card .mobile-cards {
    padding:0 12px 12px !important;
  }

  .group-card .mobile-cards .device-card {
    margin-bottom:12px !important;

    border:1px solid rgba(255,255,255,.095) !important;

    box-shadow:
      0 7px 20px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  .group-card .mobile-cards .device-card:last-child {
    margin-bottom:0 !important;
  }
}


/* Extra compact phones */
@media (max-width:480px) {

  .group-card {
    margin-bottom:15px !important;
    border-radius:17px !important;
  }

  .group-card > .group-header {
    padding:16px 15px 14px 18px !important;
    gap:13px !important;
  }

  .group-header-left {
    grid-template-columns:20px minmax(0,1fr) !important;
    gap:9px !important;
  }

  .group-title {
    font-size:19px !important;
  }

  .wd-group-meta {
    margin-top:6px !important;
    font-size:10.5px !important;
  }

  .group-card > .group-header > .small {
    min-height:46px !important;
    padding:11px 13px !important;
    font-size:12px !important;
  }

  .group-card .mobile-cards {
    padding:0 9px 9px !important;
  }
}


/* ========================================================================
   WEBDESK_MOBILE_SITE_CARDS_V2_MARKER
   Two-column ONLINE / OFFLINE status cards.
   ======================================================================== */

@media (max-width:768px) {

  /* Replace the V1 single status strip. */
  .group-card > .group-header > .wd-group-status {
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;

    width:100% !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;
    background:none !important;

    font-size:inherit !important;
    font-weight:inherit !important;
  }

  /* Remove V1 green dot from the complete status strip. */
  .group-card > .group-header > .wd-group-status::before {
    display:none !important;
    content:none !important;
  }

  .wd-group-status-box {
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;

    min-width:0 !important;
    min-height:88px !important;

    padding:12px 14px 13px !important;

    border:1px solid rgba(255,255,255,.085) !important;
    border-radius:13px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.035),
        rgba(255,255,255,.012)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  .wd-group-status-label {
    display:flex !important;
    align-items:center !important;
    gap:8px !important;

    color:var(--muted) !important;

    font-size:10px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:.09em !important;
  }

  .wd-group-status-dot {
    display:block !important;

    width:7px !important;
    height:7px !important;

    flex:0 0 7px !important;

    border-radius:50% !important;
  }

  .wd-group-status-online .wd-group-status-dot {
    background:#35dc7d !important;
    box-shadow:0 0 10px rgba(53,220,125,.50) !important;
  }

  .wd-group-status-offline .wd-group-status-dot {
    background:#f04c55 !important;
    box-shadow:0 0 10px rgba(240,76,85,.50) !important;
  }

  .wd-group-status-value {
    margin-top:10px !important;

    font-size:27px !important;
    font-weight:650 !important;
    line-height:1 !important;
    letter-spacing:-.035em !important;
  }

  .wd-group-status-online .wd-group-status-value {
    color:#45df88 !important;
  }

  .wd-group-status-offline .wd-group-status-value {
    color:#f25b63 !important;
  }

  /* Coverage is already on its own row in V1; now no fake separator. */
  .wd-group-profit-coverage::first-letter {
    color:inherit !important;
  }
}


@media (max-width:480px) {

  .group-card > .group-header > .wd-group-status {
    gap:8px !important;
  }

  .wd-group-status-box {
    min-height:82px !important;
    padding:11px 12px 12px !important;
    border-radius:12px !important;
  }

  .wd-group-status-label {
    gap:7px !important;
    font-size:9.5px !important;
  }

  .wd-group-status-value {
    font-size:25px !important;
  }
}


/* Desktop compatibility for the new semantic status markup. */
@media (min-width:769px) {

  .wd-group-status {
    display:flex;
    align-items:center;
    gap:8px;
  }

  .wd-group-status-box {
    display:flex;
    align-items:center;
    gap:4px;
  }

  .wd-group-status-label,
  .wd-group-status-value {
    display:inline;
  }

  .wd-group-status-dot {
    display:none;
  }

  .wd-group-status-online::after {
    content:"·";
    margin-left:4px;
    opacity:.55;
  }
}


/* ========================================================================
   WEBDESK_MOBILE_SITE_CARDS_COMPACT_V3_MARKER
   More compact site cards while preserving V2 status layout.
   ======================================================================== */

@media (max-width:768px) {

  /* Less vertical space between individual sites */
  .group-card {
    margin-bottom:14px !important;
  }

  /* Compact complete header */
  .group-card > .group-header {
    gap:11px !important;
    padding:15px 16px 13px 18px !important;
  }

  /* Site title row */
  .group-header-left {
    grid-template-columns:21px minmax(0,1fr) !important;
    gap:9px !important;
  }

  .group-toggle {
    width:21px !important;
    height:25px !important;
    font-size:18px !important;
  }

  .group-title {
    font-size:19px !important;
    line-height:1.12 !important;
  }

  /* Device count / profit closer to title */
  .wd-group-meta {
    margin-top:5px !important;
    gap:3px 7px !important;
    line-height:1.35 !important;
  }

  .wd-group-profit-coverage {
    margin-top:0 !important;
    line-height:1.25 !important;
  }

  /* Compact ONLINE / OFFLINE row */
  .group-card > .group-header > .wd-group-status {
    gap:9px !important;
  }

  .wd-group-status-box {
    min-height:70px !important;
    padding:10px 12px 10px !important;
    border-radius:12px !important;
  }

  .wd-group-status-label {
    gap:7px !important;
    font-size:9.5px !important;
  }

  .wd-group-status-dot {
    width:6px !important;
    height:6px !important;
    flex-basis:6px !important;
  }

  .wd-group-status-value {
    margin-top:7px !important;
    font-size:24px !important;
  }
}


@media (max-width:480px) {

  .group-card {
    margin-bottom:12px !important;
  }

  .group-card > .group-header {
    gap:10px !important;
    padding:14px 14px 12px 17px !important;
  }

  .group-header-left {
    grid-template-columns:20px minmax(0,1fr) !important;
    gap:8px !important;
  }

  .group-toggle {
    width:20px !important;
    height:24px !important;
    font-size:17px !important;
  }

  .group-title {
    font-size:18px !important;
  }

  .wd-group-meta {
    margin-top:4px !important;
    font-size:10px !important;
  }

  .group-card > .group-header > .wd-group-status {
    gap:7px !important;
  }

  .wd-group-status-box {
    min-height:66px !important;
    padding:9px 11px !important;
    border-radius:11px !important;
  }

  .wd-group-status-label {
    gap:6px !important;
    font-size:9px !important;
  }

  .wd-group-status-value {
    margin-top:6px !important;
    font-size:22px !important;
  }
}


/* ========================================================================
   WEBDESK_MOBILE_SITE_CARDS_V4_MARKER
   Final AFTER-style mobile group cards.
   ======================================================================== */

@media (max-width:768px) {

  /* Card identity / accent */
  .group-card {
    --wd-site-accent: #3dc8ff;

    position:relative !important;
    margin-bottom:12px !important;
    border-radius:15px !important;
  }

  .group-card:nth-of-type(4n+1) { --wd-site-accent:#3dc8ff; }
  .group-card:nth-of-type(4n+2) { --wd-site-accent:#a45cff; }
  .group-card:nth-of-type(4n+3) { --wd-site-accent:#27d6c5; }
  .group-card:nth-of-type(4n+4) { --wd-site-accent:#f1bc43; }

  .group-card::before {
    width:4px !important;
    background:var(--wd-site-accent) !important;
    box-shadow:0 0 14px color-mix(in srgb, var(--wd-site-accent) 45%, transparent) !important;
  }

  /* Main layout */
  .group-card > .group-header {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 22px !important;
    grid-template-areas:
      "identity arrow"
      "status status"
      "footer footer" !important;

    column-gap:10px !important;
    row-gap:9px !important;

    padding:12px 13px 10px 15px !important;
  }

  .group-header-left {
    grid-area:identity !important;

    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    gap:10px !important;
    align-items:center !important;

    width:100% !important;
    min-width:0 !important;
  }

  /* Generic site/server icon */
  .wd-group-site-icon {
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    gap:3px !important;

    width:42px !important;
    height:42px !important;

    padding:8px !important;

    border:1px solid color-mix(in srgb, var(--wd-site-accent) 34%, rgba(255,255,255,.08)) !important;
    border-radius:11px !important;

    background:color-mix(in srgb, var(--wd-site-accent) 8%, rgba(255,255,255,.025)) !important;

    color:var(--wd-site-accent) !important;
  }

  .wd-group-site-icon > span {
    position:relative !important;
    display:block !important;

    height:5px !important;

    border:1px solid currentColor !important;
    border-radius:2px !important;

    opacity:.95 !important;
  }

  .wd-group-site-icon > span::before,
  .wd-group-site-icon > span::after {
    content:"" !important;
    position:absolute !important;
    top:1px !important;

    width:2px !important;
    height:2px !important;

    border-radius:50% !important;
    background:currentColor !important;
  }

  .wd-group-site-icon > span::before {
    left:3px !important;
  }

  .wd-group-site-icon > span::after {
    left:7px !important;
  }

  .wd-group-heading {
    min-width:0 !important;
  }

  .group-title {
    font-size:18px !important;
    line-height:1.08 !important;
    font-weight:700 !important;
  }

  .wd-group-meta {
    margin-top:4px !important;
    gap:2px 6px !important;
    font-size:10px !important;
    line-height:1.25 !important;
  }

  /* Coverage now has its own footer */
  .wd-group-profit-coverage-mobile-source {
    display:none !important;
  }

  /* Old left toggle is replaced visually by right chevron */
  .group-toggle {
    display:none !important;
  }

  .wd-group-chevron {
    grid-area:arrow !important;

    align-self:center !important;
    justify-self:end !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:22px !important;
    height:36px !important;

    color:#c8d1e3 !important;

    font-size:35px !important;
    font-weight:200 !important;
    line-height:1 !important;

    transform:rotate(90deg) !important;
    transition:transform .18s ease !important;
  }

  .group-card.collapsed .wd-group-chevron {
    transform:rotate(0deg) !important;
  }

  /* Status blocks */
  .group-card > .group-header > .wd-group-status {
    grid-area:status !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    gap:8px !important;
  }

  .wd-group-status-box {
    min-height:64px !important;

    padding:9px 11px !important;

    border-radius:11px !important;
  }

  .wd-group-status-label {
    gap:6px !important;

    font-size:9px !important;
    letter-spacing:.07em !important;
  }

  .wd-group-status-dot {
    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;
  }

  .wd-group-status-value {
    margin-top:5px !important;

    font-size:23px !important;
    font-weight:700 !important;
  }

  /* Coverage footer */
  .wd-group-mobile-footer {
    grid-area:footer !important;

    display:flex !important;
    align-items:center !important;

    min-height:22px !important;

    color:var(--muted) !important;

    font-size:10px !important;
    line-height:1 !important;
  }

  .wd-group-info-icon {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:15px !important;
    height:15px !important;

    margin-right:7px !important;

    border:1px solid currentColor !important;
    border-radius:50% !important;

    color:#9ba9c4 !important;

    font-size:9px !important;
    font-weight:700 !important;
  }

  .wd-group-footer-chevron {
    margin-left:auto !important;

    color:#8f9bb2 !important;

    font-size:20px !important;
    line-height:1 !important;
  }
}


@media (max-width:480px) {

  .group-card > .group-header {
    padding:11px 11px 9px 14px !important;
    row-gap:8px !important;
  }

  .group-header-left {
    grid-template-columns:38px minmax(0,1fr) !important;
    gap:9px !important;
  }

  .wd-group-site-icon {
    width:38px !important;
    height:38px !important;
    padding:7px !important;
    border-radius:10px !important;
  }

  .group-title {
    font-size:17px !important;
  }

  .wd-group-meta {
    font-size:9.5px !important;
  }

  .wd-group-status-box {
    min-height:60px !important;
    padding:8px 10px !important;
  }

  .wd-group-status-value {
    font-size:21px !important;
  }
}


/* Desktop: new V4 elements must not alter existing layout. */
@media (min-width:769px) {

  .wd-group-site-icon,
  .wd-group-chevron,
  .wd-group-mobile-footer {
    display:none !important;
  }

  .wd-group-profit-coverage-mobile-source {
    display:inline !important;
  }
}


/* ========================================================================
   WEBDESK_MOBILE_GROUP_PROFIT_OVERFLOW_V5_MARKER
   Keep long group profit information on one line on mobile.
   ======================================================================== */

@media (max-width:768px) {

  /* The heading column must be allowed to shrink inside the grid. */
  .wd-group-heading {
    min-width:0 !important;
    overflow:hidden !important;
  }

  /*
   * Device count + profit stay on one line.
   * Long profit values are clipped with an ellipsis instead of
   * increasing the complete site-card height.
   */
  .wd-group-meta {
    display:flex !important;
    flex-wrap:nowrap !important;

    width:100% !important;
    min-width:0 !important;

    overflow:hidden !important;
    white-space:nowrap !important;
  }

  .wd-group-meta > span:first-child {
    flex:0 0 auto !important;
  }

  .wd-group-profit-separator {
    flex:0 0 auto !important;
  }

  .wd-group-profit {
    display:block !important;

    flex:1 1 auto !important;
    min-width:0 !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /* V4 displays coverage in the dedicated footer. */
  .wd-group-profit-coverage-mobile-source {
    display:none !important;
  }
}


/* Desktop remains unchanged. */
@media (min-width:769px) {

  .wd-group-heading,
  .wd-group-meta,
  .wd-group-profit {
    overflow:visible;
  }

  .wd-group-meta {
    white-space:normal;
  }

  .wd-group-profit {
    white-space:normal;
  }
}


/* ========================================================================
   WEBDESK_MOBILE_GROUP_ACCENT_LINE_V6_MARKER
   Strong visible left accent line for mobile site cards.
   ======================================================================== */

@media (max-width:768px) {

  .group-card {
    position:relative !important;
    overflow:hidden !important;
  }

  /*
   * Use an inset accent instead of the old pseudo-element.
   * This cannot disappear behind the card/background.
   */
  .group-card {
    box-shadow:
      inset 5px 0 0 var(--wd-site-accent),
      0 8px 22px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  /* Disable the previous V1/V4 pseudo accent. */
  .group-card::before {
    display:none !important;
    content:none !important;
  }

  /* Give the content a little clearance from the accent. */
  .group-card > .group-header {
    padding-left:18px !important;
  }
}

@media (max-width:480px) {
  .group-card {
    box-shadow:
      inset 4px 0 0 var(--wd-site-accent),
      0 7px 20px rgba(0,0,0,.26),
      inset 0 1px 0 rgba(255,255,255,.03) !important;
  }

  .group-card > .group-header {
    padding-left:17px !important;
  }
}


/* ========================================================================
   WEBDESK_MOBILE_GROUP_ACCENT_LINE_V7_MARKER
   Strong AFTER-style colored accent on left side of site cards.
   ======================================================================== */

@media (max-width:768px) {

  .group-card {
    position:relative !important;

    /* Keep normal card shadow only. Accent is handled separately below. */
    box-shadow:
      0 8px 22px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  /*
   * Dedicated accent stripe.
   * Slight inset keeps rounded card corners clean.
   */
  .group-card::before {
    content:"" !important;
    display:block !important;

    position:absolute !important;
    z-index:5 !important;

    left:0 !important;
    top:8px !important;
    bottom:8px !important;

    width:6px !important;

    border-radius:0 6px 6px 0 !important;

    background:var(--wd-site-accent) !important;

    box-shadow:
      2px 0 10px color-mix(
        in srgb,
        var(--wd-site-accent) 42%,
        transparent
      ) !important;

    pointer-events:none !important;
  }

  /* Enough clearance between stripe and icon/content. */
  .group-card > .group-header {
    padding-left:22px !important;
  }
}


@media (max-width:480px) {

  .group-card::before {
    width:5px !important;
    top:7px !important;
    bottom:7px !important;
  }

  .group-card > .group-header {
    padding-left:20px !important;
  }
}


/* ========================================================================
   WEBDESK_MOBILE_GROUP_ACCENT_V8_MARKER
   Real HTML accent bar instead of pseudo-element.
   ======================================================================== */

@media (max-width:768px) {

  .group-card {
    position:relative !important;
  }

  /* Completely disable all older pseudo accent implementations. */
  .group-card::before {
    content:none !important;
    display:none !important;
  }

  .wd-group-accent-bar {
    position:absolute !important;
    z-index:20 !important;

    display:block !important;

    left:0 !important;
    top:12px !important;
    bottom:12px !important;

    width:5px !important;

    border-radius:0 5px 5px 0 !important;

    background:var(--wd-site-accent) !important;

    box-shadow:
      2px 0 10px color-mix(
        in srgb,
        var(--wd-site-accent) 45%,
        transparent
      ) !important;

    pointer-events:none !important;
  }

  /*
   * V7 added extra left padding because of the broken stripe.
   * Return the content to the V4 spacing.
   */
  .group-card > .group-header {
    padding-left:15px !important;
  }
}


@media (max-width:480px) {

  .wd-group-accent-bar {
    top:10px !important;
    bottom:10px !important;
    width:5px !important;
  }

  .group-card > .group-header {
    padding-left:14px !important;
  }
}


/* Never show the mobile accent on desktop. */
@media (min-width:769px) {
  .wd-group-accent-bar {
    display:none !important;
  }
}


/* ============================================================
   WEBDESK_MOBILE_ACCENT_ROUNDED_V9_MARKER
   Rounded accent stripe matching the original mobile concept.
   ============================================================ */

@media (max-width:768px) {

  .group-card {
    position:relative !important;
    isolation:isolate !important;
  }

  .group-card > .wd-group-accent-bar {
    display:block !important;
    position:absolute !important;

    z-index:20 !important;

    left:0 !important;
    top:0 !important;
    bottom:0 !important;

    width:7px !important;
    height:auto !important;

    border-radius:18px 0 0 18px !important;

    background:var(--wd-site-accent) !important;

    box-shadow:
      3px 0 14px color-mix(
        in srgb,
        var(--wd-site-accent) 32%,
        transparent
      ) !important;

    pointer-events:none !important;
  }
}

@media (max-width:480px) {

  .group-card > .wd-group-accent-bar {
    width:6px !important;
    border-radius:17px 0 0 17px !important;
  }
}


/* ========================================================================
   WEBDESK_MOBILE_DEVICE_CARDS_V10_MARKER
   Professional compact mobile device cards.
   Mobile only. No desktop/backend/action functionality changes.
   ======================================================================== */

@media (max-width:768px) {

  /* ------------------------------------------------------------
     DEVICE CARD
     ------------------------------------------------------------ */

  .group-card .mobile-cards .device-card {
    position:relative !important;

    margin:0 0 12px 0 !important;
    padding:16px !important;

    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:17px !important;

    background:
      radial-gradient(
        circle at 94% 8%,
        rgba(212,173,74,.055),
        transparent 28%
      ),
      linear-gradient(
        180deg,
        rgba(27,28,34,.98),
        rgba(12,13,17,.99)
      ) !important;

    box-shadow:
      0 7px 18px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  .group-card .mobile-cards .device-card:last-child {
    margin-bottom:0 !important;
  }


  /* ------------------------------------------------------------
     HOSTNAME + STATUS
     ------------------------------------------------------------ */

  .mobile-cards .device-card-top {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;

    gap:12px !important;

    min-height:38px !important;

    margin:0 0 12px 0 !important;
    padding:0 !important;
  }

  .mobile-cards .device-card-headline {
    display:flex !important;
    align-items:center !important;

    min-width:0 !important;
    flex:1 1 auto !important;

    gap:0 !important;
  }

  /* Avatar is redundant inside the site card on mobile. */
  .mobile-cards .device-avatar {
    display:none !important;
  }

  .mobile-cards .device-card-headline > div:last-child {
    min-width:0 !important;
    width:100% !important;
  }

  .mobile-cards .device-card-title,
  .mobile-cards .device-card-title.wd-device-hostname {
    display:flex !important;
    align-items:center !important;

    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    background:none !important;
    border:0 !important;

    color:var(--text) !important;

    font-size:20px !important;
    font-weight:750 !important;
    line-height:1.15 !important;
    letter-spacing:-.025em !important;

    white-space:nowrap !important;
  }

  .mobile-cards
  .device-card-title.wd-device-hostname
  > span:first-child {
    display:block !important;

    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .mobile-device-open-chevron {
    margin-left:8px !important;

    color:#8f9aad !important;

    font-size:22px !important;
    font-weight:400 !important;
    line-height:1 !important;

    flex:0 0 auto !important;
  }


  /* ------------------------------------------------------------
     DEVICE STATUS
     ------------------------------------------------------------ */

  .mobile-cards .device-card-top > .status {
    display:inline-flex !important;
    align-items:center !important;

    gap:8px !important;

    margin:0 !important;
    padding:0 !important;

    flex:0 0 auto !important;

    background:none !important;
    border:0 !important;

    font-size:16px !important;
    font-weight:750 !important;
    line-height:1 !important;
    letter-spacing:.015em !important;
  }

  .mobile-cards .device-card-top > .status::before {
    width:10px !important;
    height:10px !important;

    margin:0 !important;

    flex:0 0 10px !important;
  }


  /* ------------------------------------------------------------
     ALIAS
     ------------------------------------------------------------ */

  .mobile-cards .device-subtitle {
    margin-top:4px !important;

    color:var(--muted) !important;

    font-size:11px !important;
    line-height:1.2 !important;
  }

  .mobile-cards .device-subtitle:empty {
    display:none !important;
  }


  /* ------------------------------------------------------------
     TAGS
     ------------------------------------------------------------ */

  .mobile-cards .device-tags {
    display:flex !important;
    flex-wrap:wrap !important;

    gap:6px !important;

    margin:0 0 13px 0 !important;
    padding:0 !important;
  }

  .mobile-cards .device-tags .tag {
    display:inline-flex !important;
    align-items:center !important;

    min-height:25px !important;

    margin:0 !important;
    padding:3px 10px !important;

    border:1px solid rgba(87,123,255,.23) !important;
    border-radius:999px !important;

    background:rgba(50,72,145,.10) !important;

    color:#b7c0d1 !important;

    font-size:11px !important;
    font-weight:500 !important;
    line-height:1 !important;

    white-space:nowrap !important;
  }


  /* ------------------------------------------------------------
     ACTION BAR
     Keep all seven existing actions/functions.
     ------------------------------------------------------------ */

  .mobile-cards .device-card .actions.actions-redesign {
    display:grid !important;
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;

    width:100% !important;

    gap:8px !important;

    margin:0 !important;
    padding:0 !important;

    align-items:stretch !important;
  }

  .mobile-cards
  .device-card
  .actions.actions-redesign
  > .btn-action,

  .mobile-cards
  .device-card
  .actions.actions-redesign
  > .action-more {
    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;
  }

  .mobile-cards
  .device-card
  .actions.actions-redesign
  > .btn-action,

  .mobile-cards
  .device-card
  .actions.actions-redesign
  > .action-more
  > .btn-more {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-width:0 !important;
    height:54px !important;

    margin:0 !important;
    padding:0 !important;

    border-radius:13px !important;
  }

  /*
   * Text labels stay hidden on mobile.
   * Existing icon markup/functions remain untouched.
   */
  .mobile-cards
  .device-card
  .actions.actions-redesign
  > .btn-action
  > span:last-child:not(:only-child) {
    font-size:0 !important;
  }


  /* ------------------------------------------------------------
     DISABLED ACTIONS
     Clearly unavailable without making the whole card look disabled.
     ------------------------------------------------------------ */

  .mobile-cards .device-card .btn-disabled {
    opacity:.34 !important;
    filter:saturate(.35) !important;
  }


  /* ------------------------------------------------------------
     REMOVE UNUSED MOBILE METRIC/FIELD SPACE
     Existing behavior remains unchanged.
     ------------------------------------------------------------ */

  .mobile-cards .device-card .mini-metrics {
    margin-top:0 !important;
  }

}


/* ========================================================================
   SMALL PHONES
   ======================================================================== */

@media (max-width:480px) {

  .group-card .mobile-cards .device-card {
    margin-bottom:10px !important;
    padding:14px !important;
    border-radius:16px !important;
  }

  .mobile-cards .device-card-top {
    gap:8px !important;
    margin-bottom:11px !important;
  }

  .mobile-cards .device-card-title,
  .mobile-cards .device-card-title.wd-device-hostname {
    font-size:18px !important;
  }

  .mobile-cards .device-card-top > .status {
    gap:6px !important;
    font-size:14px !important;
  }

  .mobile-cards .device-card-top > .status::before {
    width:9px !important;
    height:9px !important;
    flex-basis:9px !important;
  }

  .mobile-cards .device-tags {
    gap:5px !important;
    margin-bottom:11px !important;
  }

  .mobile-cards .device-tags .tag {
    min-height:23px !important;
    padding:3px 9px !important;
    font-size:10px !important;
  }

  .mobile-cards .device-card .actions.actions-redesign {
    gap:6px !important;
  }

  .mobile-cards
  .device-card
  .actions.actions-redesign
  > .btn-action,

  .mobile-cards
  .device-card
  .actions.actions-redesign
  > .action-more
  > .btn-more {
    height:50px !important;
    border-radius:12px !important;
  }
}


/* ========================================================================
   WEBDESK_MOBILE_DEVICE_CARDS_V10_1_MARKER
   Final mobile device-card polish:
   - normalize More button
   - remove unwanted divider/edge
   - tighten tags -> actions spacing
   - preserve all functionality
   ======================================================================== */

@media (max-width:768px) {

  /* ------------------------------------------------------------
     Slightly tighter vertical rhythm inside device cards
     ------------------------------------------------------------ */

  .mobile-cards .device-card .device-tags {
    margin-bottom:10px !important;
  }

  .mobile-cards .device-card .actions.actions-redesign {
    margin-top:0 !important;
  }


  /* ------------------------------------------------------------
     MORE BUTTON
     Make the final button identical in geometry to the other actions.
     ------------------------------------------------------------ */

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more {
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:0 !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-left:0 !important;
    border-right:0 !important;

    background:transparent !important;
    box-shadow:none !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more::before,
  .mobile-cards .device-card
  .actions.actions-redesign > .action-more::after {
    display:none !important;
    content:none !important;
  }


  /* Actual More button */
  .mobile-cards .device-card
  .actions.actions-redesign > .action-more > .btn-more {
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    height:100% !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:12px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.035),
        rgba(255,255,255,.012)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 4px 12px rgba(0,0,0,.12) !important;

    overflow:hidden !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more > .btn-more::before,
  .mobile-cards .device-card
  .actions.actions-redesign > .action-more > .btn-more::after {
    border:0 !important;
  }


  /* ------------------------------------------------------------
     Ensure all seven action cells remain geometrically identical.
     ------------------------------------------------------------ */

  .mobile-cards .device-card .actions.actions-redesign {
    align-items:stretch !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action,
  .mobile-cards .device-card
  .actions.actions-redesign > .action-more {
    align-self:stretch !important;
  }


  /* ------------------------------------------------------------
     Remove any legacy divider inherited by last action
     ------------------------------------------------------------ */

  .mobile-cards .device-card
  .actions.actions-redesign > :last-child {
    border-left:0 !important;
    border-right:0 !important;
  }

}


/* Compact phones */
@media (max-width:480px) {

  .mobile-cards .device-card .device-tags {
    margin-bottom:8px !important;
  }

}


/* ========================================================================
   WEBDESK_MOBILE_DEVICE_ACTIONS_V11_MARKER
   Professional mobile action bar:
   icon button + readable label below
   Existing links, icons and functionality stay untouched.
   ======================================================================== */

@media (max-width:768px) {

  /* Seven equal action columns. */
  .mobile-cards .device-card .actions.actions-redesign {
    display:grid !important;
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    align-items:start !important;

    width:100% !important;

    column-gap:7px !important;
    row-gap:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }


  /* ============================================================
     STANDARD SIX ACTIONS
     ============================================================ */

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;
    box-shadow:none !important;

    overflow:visible !important;

    text-decoration:none !important;
  }


  /*
   * The icon itself becomes the visual button.
   * Existing icon colors remain intact.
   */
  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action
  > :first-child:not(:last-child) {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;

    width:100% !important;
    height:54px !important;
    min-height:54px !important;

    margin:0 0 6px 0 !important;
    padding:0 !important;

    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:13px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.040),
        rgba(255,255,255,.012)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 4px 12px rgba(0,0,0,.12) !important;
  }


  /* ============================================================
     LABELS
     Undo the old mobile font-size:0 rule.
     ============================================================ */

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action
  > span:last-child:not(:only-child) {
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#929aaa !important;

    font-size:10px !important;
    font-weight:500 !important;
    line-height:1.15 !important;
    letter-spacing:0 !important;

    text-align:center !important;
    white-space:nowrap !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }


  /* RustDesk is presented as Remote in the mobile UI. */
  .mobile-cards .device-card
  .actions.actions-redesign > .btn-rustdesk-action
  > span:last-child {
    font-size:0 !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-rustdesk-action
  > span:last-child::after {
    content:"RustDesk" !important;

    color:#929aaa !important;

    font-size:10px !important;
    font-weight:500 !important;
    line-height:1.15 !important;
  }


  /* ============================================================
     MORE
     Same geometry as the other six actions.
     ============================================================ */

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more {
    position:relative !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    overflow:visible !important;
  }


  .mobile-cards .device-card
  .actions.actions-redesign > .action-more > .btn-more {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;

    width:100% !important;
    height:54px !important;
    min-height:54px !important;

    margin:0 0 6px 0 !important;
    padding:0 !important;

    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:13px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.040),
        rgba(255,255,255,.012)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 4px 12px rgba(0,0,0,.12) !important;

    color:#aeb7c9 !important;

    font-size:16px !important;
    line-height:1 !important;

    overflow:hidden !important;
  }


  /* Label underneath More. */
  .mobile-cards .device-card
  .actions.actions-redesign > .action-more::after {
    content:"More" !important;

    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    color:#929aaa !important;

    font-size:10px !important;
    font-weight:500 !important;
    line-height:1.15 !important;

    text-align:center !important;
    white-space:nowrap !important;

    pointer-events:none !important;
  }


  /* ============================================================
     ICON SIZING
     Keep the existing artwork but make visual weight consistent.
     ============================================================ */

  .mobile-cards .device-card
  .actions.actions-redesign .action-terminal-icon,
  .mobile-cards .device-card
  .actions.actions-redesign .action-globe,
  .mobile-cards .device-card
  .actions.actions-redesign .action-edit-icon {
    font-size:20px !important;
    line-height:1 !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign svg {
    max-width:24px !important;
    max-height:24px !important;
  }


  /* ============================================================
     DISABLED
     Keep label readable; fade primarily the button/icon.
     ============================================================ */

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-disabled {
    opacity:1 !important;
    filter:none !important;
    cursor:default !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-disabled
  > :first-child:not(:last-child) {
    opacity:.34 !important;
    filter:saturate(.35) !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-disabled
  > span:last-child:not(:only-child) {
    opacity:.55 !important;
  }


  /* Slightly more room below tags before the labelled action row. */
  .mobile-cards .device-card .device-tags {
    margin-bottom:12px !important;
  }

}


/* ========================================================================
   COMPACT PHONES
   ======================================================================== */

@media (max-width:480px) {

  .mobile-cards .device-card
  .actions.actions-redesign {
    column-gap:5px !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action
  > :first-child:not(:last-child),

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more > .btn-more {
    height:48px !important;
    min-height:48px !important;

    margin-bottom:5px !important;

    border-radius:11px !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action
  > span:last-child:not(:only-child),

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more::after {
    font-size:9px !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-rustdesk-action
  > span:last-child::after {
    font-size:9px !important;
  }

}


/* ========================================================================
   WEBDESK_MOBILE_DEVICE_ACTIONS_V12_MARKER
   Final mobile action layout:
   - 7 equal columns
   - full action element is the button
   - readable label below each button
   - no changes to links/functions
   ======================================================================== */

@media (max-width:768px) {

  .mobile-cards .device-card .actions.actions-redesign {
    display:grid !important;
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    align-items:start !important;
    gap:7px !important;

    width:100% !important;
    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }


  /* ------------------------------------------------------------
     SIX STANDARD ACTIONS
     ------------------------------------------------------------ */

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action {
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;

    width:100% !important;
    min-width:0 !important;

    height:54px !important;
    min-height:54px !important;

    margin:0 0 22px 0 !important;
    padding:0 !important;

    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:13px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.040),
        rgba(255,255,255,.012)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 4px 12px rgba(0,0,0,.12) !important;

    overflow:visible !important;

    text-decoration:none !important;
  }


  /*
   * Undo V11 styling applied to the icon itself.
   * Icon returns to being only an icon.
   */
  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action
  > :first-child:not(:last-child) {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:0 !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;
    box-shadow:none !important;

    overflow:visible !important;
  }


  /*
   * Hide original text visually inside the button.
   * We keep it in the HTML and use CSS labels below.
   */
  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action
  > span:last-child:not(:only-child) {
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    margin:-1px !important;
    padding:0 !important;

    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;

    border:0 !important;
  }


  /* ------------------------------------------------------------
     LABELS BELOW BUTTONS
     ------------------------------------------------------------ */

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action::after {
    position:absolute !important;

    left:50% !important;
    top:calc(100% + 6px) !important;

    transform:translateX(-50%) !important;

    display:block !important;

    width:max-content !important;
    max-width:calc(100% + 10px) !important;

    color:#929aaa !important;

    font-size:10px !important;
    font-weight:500 !important;
    line-height:1.1 !important;
    letter-spacing:0 !important;

    text-align:center !important;
    white-space:nowrap !important;

    pointer-events:none !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-ssh::after {
    content:"SSH" !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-epoptes::after {
    content:"Epoptes" !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-web::after {
    content:"WEB" !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-rustdesk-action::after {
    content:"RustDesk" !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-anydesk::after {
    content:"AnyDesk" !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-edit::after {
    content:"Edit" !important;
  }


  /* ------------------------------------------------------------
     MORE
     ------------------------------------------------------------ */

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more {
    position:relative !important;

    display:block !important;

    box-sizing:border-box !important;

    width:100% !important;
    min-width:0 !important;

    height:54px !important;
    min-height:54px !important;

    margin:0 0 22px 0 !important;
    padding:0 !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    overflow:visible !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more > .btn-more {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    box-sizing:border-box !important;

    width:100% !important;
    height:54px !important;
    min-height:54px !important;

    margin:0 !important;
    padding:0 !important;

    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:13px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.040),
        rgba(255,255,255,.012)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 4px 12px rgba(0,0,0,.12) !important;

    color:#aeb7c9 !important;

    font-size:16px !important;
    line-height:1 !important;

    overflow:hidden !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more::after {
    content:"More" !important;

    position:absolute !important;

    left:50% !important;
    top:calc(100% + 6px) !important;

    transform:translateX(-50%) !important;

    display:block !important;

    width:max-content !important;

    margin:0 !important;
    padding:0 !important;

    color:#929aaa !important;

    font-size:10px !important;
    font-weight:500 !important;
    line-height:1.1 !important;

    text-align:center !important;
    white-space:nowrap !important;

    pointer-events:none !important;
  }


  /* ------------------------------------------------------------
     DISABLED
     Keep button geometry identical; dim only unavailable content.
     ------------------------------------------------------------ */

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-disabled {
    opacity:.38 !important;
    filter:saturate(.35) !important;
  }


  /* Space required by labels. */
  .mobile-cards .device-card .actions.actions-redesign {
    padding-bottom:2px !important;
  }

}


/* Compact phones */
@media (max-width:480px) {

  .mobile-cards .device-card
  .actions.actions-redesign {
    gap:6px !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action,

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more {
    height:50px !important;
    min-height:50px !important;
    margin-bottom:21px !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more > .btn-more {
    height:50px !important;
    min-height:50px !important;
  }

  .mobile-cards .device-card
  .actions.actions-redesign > .btn-action::after,

  .mobile-cards .device-card
  .actions.actions-redesign > .action-more::after {
    top:calc(100% + 5px) !important;
    font-size:9px !important;
  }

}



/* ========================================================================
   WEBDESK_DESKTOP_GROUP_CARDS_V1_MARKER
   Desktop site cards aligned visually with the approved mobile design.
   Desktop only — mobile layout remains untouched.
   ======================================================================== */

@media (min-width:769px) {

  /* ------------------------------------------------------------
     SITE CARD
     ------------------------------------------------------------ */

  .group-card {
    --wd-desktop-accent:var(--wd-site-accent, #39d8ca);

    position:relative !important;
    isolation:isolate !important;

    margin-bottom:14px !important;

    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:18px !important;

    background:
      radial-gradient(
        circle at 3% 50%,
        color-mix(in srgb, var(--wd-desktop-accent) 7%, transparent),
        transparent 18%
      ),
      linear-gradient(
        180deg,
        rgba(29,30,36,.96),
        rgba(14,15,19,.98)
      ) !important;

    box-shadow:
      0 8px 22px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.025) !important;

    overflow:hidden !important;

    transition:
      border-color .16s ease,
      box-shadow .16s ease !important;
  }

  .group-card:hover {
    border-color:
      color-mix(
        in srgb,
        var(--wd-desktop-accent) 32%,
        rgba(255,255,255,.10)
      ) !important;

    box-shadow:
      0 10px 28px rgba(0,0,0,.25),
      0 0 22px
        color-mix(
          in srgb,
          var(--wd-desktop-accent) 7%,
          transparent
        ),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }


  /* ------------------------------------------------------------
     SITE ACCENT
     ------------------------------------------------------------ */

  .group-card > .wd-group-accent-bar {
    display:block !important;

    position:absolute !important;
    z-index:5 !important;

    left:0 !important;
    top:0 !important;
    bottom:0 !important;

    width:5px !important;

    border-radius:18px 0 0 18px !important;

    background:var(--wd-desktop-accent) !important;

    box-shadow:
      3px 0 15px
      color-mix(
        in srgb,
        var(--wd-desktop-accent) 30%,
        transparent
      ) !important;

    pointer-events:none !important;
  }


  /* ------------------------------------------------------------
     HEADER
     ------------------------------------------------------------ */

  .group-card > .group-header {
    position:relative !important;

    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto 24px !important;
    align-items:center !important;

    gap:18px !important;

    min-height:86px !important;

    padding:14px 18px 14px 20px !important;

    border:0 !important;
    border-bottom:1px solid transparent !important;

    background:transparent !important;

    cursor:pointer !important;
  }

  .group-card:not(.collapsed) > .group-header {
    border-bottom-color:rgba(255,255,255,.08) !important;
  }


  /* ------------------------------------------------------------
     LEFT IDENTITY
     ------------------------------------------------------------ */

  .group-header-left {
    display:flex !important;
    align-items:center !important;

    min-width:0 !important;

    gap:14px !important;
  }

  .wd-group-heading {
    min-width:0 !important;
    flex:1 1 auto !important;
  }


  /* ------------------------------------------------------------
     SERVER / SITE ICON
     ------------------------------------------------------------ */

  .wd-group-site-icon {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;

    flex:0 0 48px !important;

    width:48px !important;
    height:48px !important;

    gap:4px !important;

    border:1px solid
      color-mix(
        in srgb,
        var(--wd-desktop-accent) 58%,
        rgba(255,255,255,.10)
      ) !important;

    border-radius:13px !important;

    background:
      color-mix(
        in srgb,
        var(--wd-desktop-accent) 9%,
        rgba(255,255,255,.025)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 0 18px
        color-mix(
          in srgb,
          var(--wd-desktop-accent) 8%,
          transparent
        ) !important;
  }

  .wd-group-site-icon > span {
    display:block !important;

    position:relative !important;

    width:25px !important;
    height:6px !important;

    border:1.5px solid var(--wd-desktop-accent) !important;
    border-radius:2px !important;

    background:transparent !important;
  }

  .wd-group-site-icon > span::before,
  .wd-group-site-icon > span::after {
    content:"" !important;

    position:absolute !important;
    top:50% !important;

    width:2px !important;
    height:2px !important;

    border-radius:50% !important;

    background:var(--wd-desktop-accent) !important;

    transform:translateY(-50%) !important;
  }

  .wd-group-site-icon > span::before {
    left:4px !important;
  }

  .wd-group-site-icon > span::after {
    left:8px !important;
  }


  /* ------------------------------------------------------------
     TITLE + META + PROFIT
     ------------------------------------------------------------ */

  .group-title {
    margin:0 !important;

    color:var(--text) !important;

    font-size:20px !important;
    font-weight:800 !important;
    line-height:1.15 !important;
    letter-spacing:-.02em !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .wd-group-meta {
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;

    min-width:0 !important;

    gap:7px !important;

    margin-top:6px !important;

    color:#aeb6c7 !important;

    font-size:12px !important;
    line-height:1.2 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
  }

  .wd-group-profit {
    min-width:0 !important;

    color:#9ca6b9 !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .wd-group-profit strong {
    color:#dfe4ee !important;
    font-weight:800 !important;
  }

  .wd-group-profit-separator {
    color:#596274 !important;
  }

  .wd-group-profit-eur {
    color:#929caf !important;
  }

  /*
   * Coverage gets its own small footer on mobile.
   * On desktop the existing inline coverage is enough.
   */
  .wd-group-profit-coverage {
    color:#778195 !important;
    font-size:11px !important;
  }


  /* ------------------------------------------------------------
     ONLINE / OFFLINE
     ------------------------------------------------------------ */

  .wd-group-status {
    display:grid !important;
    grid-template-columns:92px 92px !important;

    gap:8px !important;

    width:auto !important;

    margin:0 !important;

    text-align:left !important;
  }

  .wd-group-status-box {
    display:grid !important;
    grid-template-columns:auto auto !important;
    align-items:center !important;
    justify-content:start !important;

    column-gap:7px !important;

    min-width:92px !important;
    min-height:48px !important;

    padding:8px 10px !important;

    border:1px solid rgba(255,255,255,.085) !important;
    border-radius:12px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.035),
        rgba(255,255,255,.012)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.018) !important;
  }

  .wd-group-status-label {
    display:flex !important;
    align-items:center !important;

    gap:5px !important;

    grid-column:1/-1 !important;

    color:#929caf !important;

    font-size:9px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
  }

  .wd-group-status-dot {
    display:block !important;

    flex:0 0 7px !important;

    width:7px !important;
    height:7px !important;

    border-radius:50% !important;
  }

  .wd-group-status-online .wd-group-status-dot {
    background:#35df91 !important;
    box-shadow:0 0 9px rgba(53,223,145,.42) !important;
  }

  .wd-group-status-offline .wd-group-status-dot {
    background:#ff5364 !important;
    box-shadow:0 0 9px rgba(255,83,100,.42) !important;
  }

  .wd-group-status-value {
    grid-column:1/-1 !important;

    margin-top:2px !important;

    font-size:18px !important;
    font-weight:800 !important;
    line-height:1 !important;
  }

  .wd-group-status-online .wd-group-status-value {
    color:#3ce095 !important;
  }

  .wd-group-status-offline .wd-group-status-value {
    color:#ff5968 !important;
  }


  /* ------------------------------------------------------------
     CHEVRON
     ------------------------------------------------------------ */

  .wd-group-chevron {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    grid-column:3 !important;
    grid-row:1 !important;

    width:24px !important;
    height:44px !important;

    margin:0 !important;

    color:#aeb8ca !important;

    font-size:31px !important;
    font-weight:300 !important;
    line-height:1 !important;

    transition:transform .16s ease,color .16s ease !important;
  }

  .group-card:not(.collapsed) .wd-group-chevron {
    transform:rotate(90deg) !important;
    color:var(--wd-desktop-accent) !important;
  }


  /* ------------------------------------------------------------
     MOBILE-ONLY FOOTER MUST STAY HIDDEN ON DESKTOP
     ------------------------------------------------------------ */

  .wd-group-mobile-footer {
    display:none !important;
  }


  /* ------------------------------------------------------------
     EXPANDED TABLE
     ------------------------------------------------------------ */

  .group-card > .group-body {
    position:relative !important;
    z-index:2 !important;

    background:rgba(8,9,12,.50) !important;
  }

}


/* Slightly tighter desktop cards on medium-width screens. */
@media (min-width:769px) and (max-width:1150px) {

  .group-card > .group-header {
    grid-template-columns:minmax(0,1fr) auto 20px !important;
    gap:12px !important;
    padding-right:14px !important;
  }

  .wd-group-site-icon {
    flex-basis:44px !important;
    width:44px !important;
    height:44px !important;
  }

  .group-title {
    font-size:18px !important;
  }

  .wd-group-status {
    grid-template-columns:82px 82px !important;
    gap:6px !important;
  }

  .wd-group-status-box {
    min-width:82px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}


/* ========================================================================
   WEBDESK_DESKTOP_SITE_COLORS_V1_MARKER
   Desktop site identity colors.
   Uses the same accent palette/principle as the mobile site cards.
   ======================================================================== */

@media (min-width:769px) {

  .group-card {
    --wd-site-accent:#3dc8ff;
  }

  .group-card:nth-of-type(4n+1) {
    --wd-site-accent:#3dc8ff;
  }

  .group-card:nth-of-type(4n+2) {
    --wd-site-accent:#a45cff;
  }

  .group-card:nth-of-type(4n+3) {
    --wd-site-accent:#27d6c5;
  }

  .group-card:nth-of-type(4n+4) {
    --wd-site-accent:#f1bc43;
  }

  /* Colored accent stripe */
  .group-card > .wd-group-accent-bar {
    display:block !important;
    position:absolute !important;
    z-index:5 !important;

    left:0 !important;
    top:0 !important;
    bottom:0 !important;

    width:5px !important;

    border-radius:20px 0 0 20px !important;

    background:var(--wd-site-accent) !important;

    box-shadow:
      3px 0 14px
      color-mix(
        in srgb,
        var(--wd-site-accent) 30%,
        transparent
      ) !important;

    pointer-events:none !important;
  }

  /* Server icon */
  .group-card .wd-group-site-icon {
    border-color:
      color-mix(
        in srgb,
        var(--wd-site-accent) 42%,
        rgba(255,255,255,.08)
      ) !important;

    background:
      color-mix(
        in srgb,
        var(--wd-site-accent) 9%,
        rgba(255,255,255,.025)
      ) !important;

    color:var(--wd-site-accent) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 0 18px
      color-mix(
        in srgb,
        var(--wd-site-accent) 8%,
        transparent
      ) !important;
  }

  /* Very subtle site-color glow in header */
  .group-card > .group-header {
    background:
      radial-gradient(
        circle at 0% 50%,
        color-mix(
          in srgb,
          var(--wd-site-accent) 7%,
          transparent
        ),
        transparent 24%
      ),
      linear-gradient(
        180deg,
        color-mix(in srgb, var(--panel-2) 92%, white 8%),
        var(--panel)
      ) !important;
  }
}


/* ========================================================================
   WEBDESK_DESKTOP_GROUP_STATUS_V2_MARKER
   Compact desktop ONLINE / OFFLINE status cluster.
   Desktop only - mobile remains unchanged.
   ======================================================================== */

@media (min-width:769px) {

  /* Keep complete right-side cluster compact. */
  .group-card > .group-header {
    grid-template-columns:minmax(0,1fr) auto 22px !important;
    column-gap:10px !important;
  }

  .group-card > .group-header > .wd-group-status {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    gap:7px !important;

    width:auto !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;
  }

  /* Equal compact status cards. */
  .group-card .wd-group-status-box {
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;

    gap:5px !important;

    width:82px !important;
    min-width:82px !important;
    height:52px !important;
    min-height:52px !important;

    box-sizing:border-box !important;

    padding:7px 10px !important;

    border:1px solid rgba(255,255,255,.085) !important;
    border-radius:11px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.035),
        rgba(255,255,255,.012)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.02) !important;
  }

  .group-card .wd-group-status-label {
    display:flex !important;
    align-items:center !important;

    gap:5px !important;

    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    color:#929caf !important;

    font-size:8px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:.075em !important;
  }

  .group-card .wd-group-status-dot {
    display:block !important;

    width:6px !important;
    height:6px !important;
    flex:0 0 6px !important;

    margin:0 !important;

    border-radius:50% !important;
  }

  .group-card .wd-group-status-value {
    display:block !important;

    width:auto !important;

    margin:0 !important;
    padding:0 !important;

    font-size:17px !important;
    font-weight:800 !important;
    line-height:1 !important;
  }

  .group-card .wd-group-status-online .wd-group-status-value {
    color:#3ce095 !important;
  }

  .group-card .wd-group-status-offline .wd-group-status-value {
    color:#ff5968 !important;
  }

  /* Chevron directly beside the status cluster. */
  .group-card .wd-group-chevron {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:22px !important;
    height:52px !important;

    margin:0 !important;
    padding:0 !important;

    color:#aeb8ca !important;

    font-size:29px !important;
    font-weight:300 !important;
    line-height:1 !important;
  }

  /*
   * Coverage already exists next to Total profit.
   * Do not allow a duplicate/empty desktop fragment on the right.
   */
  .group-card > .group-header > .wd-group-status
  + .wd-group-profit-coverage {
    display:none !important;
  }
}


/* Medium desktop keeps the same compact geometry. */
@media (min-width:769px) and (max-width:1150px) {

  .group-card > .group-header {
    grid-template-columns:minmax(0,1fr) auto 20px !important;
    column-gap:8px !important;
  }

  .group-card .wd-group-status-box {
    width:78px !important;
    min-width:78px !important;
  }
}


/* ========================================================================
   WEBDESK_DESKTOP_GROUP_STATUS_DOT_FIX_V3_MARKER
   Remove legacy trailing dot from ONLINE status on desktop.
   ======================================================================== */

@media (min-width:769px) {
  .group-card .wd-group-status-online::after {
    content:none !important;
    display:none !important;
  }
}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_APPLE_V1_MARKER
   Refined desktop device table.
   Desktop only — mobile cards remain untouched.
   ======================================================================== */

@media (min-width:769px) {

  /* ------------------------------------------------------------
     TABLE SURFACE
     ------------------------------------------------------------ */

  .group-card > .group-body {
    padding:0 !important;
    background:rgba(7,8,11,.42) !important;
  }

  .group-card .desktop-table {
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
    table-layout:fixed !important;
    background:transparent !important;
  }


  /* ------------------------------------------------------------
     TABLE HEADER
     ------------------------------------------------------------ */

  .group-card .desktop-table thead th {
    height:38px !important;
    box-sizing:border-box !important;

    padding:0 10px !important;

    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.075) !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.025),
        rgba(255,255,255,.008)
      ) !important;

    color:#7f899c !important;

    font-size:9px !important;
    font-weight:700 !important;
    line-height:1 !important;
    letter-spacing:.075em !important;
    text-transform:uppercase !important;

    vertical-align:middle !important;
  }


  /* ------------------------------------------------------------
     DEVICE ROWS
     ------------------------------------------------------------ */

  .group-card .desktop-table tbody > tr:not(.edit-row) > td {
    height:52px !important;
    box-sizing:border-box !important;

    padding:7px 10px !important;

    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.045) !important;

    background:rgba(255,255,255,.004) !important;

    color:#b6becd !important;

    font-size:11px !important;
    line-height:1.2 !important;

    vertical-align:middle !important;

    transition:
      background .14s ease,
      border-color .14s ease !important;
  }

  .group-card .desktop-table tbody > tr:not(.edit-row):last-child > td {
    border-bottom:0 !important;
  }

  .group-card .desktop-table tbody > tr:not(.edit-row):hover > td {
    background:rgba(255,255,255,.026) !important;
    border-bottom-color:rgba(255,255,255,.065) !important;
  }


  /* ------------------------------------------------------------
     STATUS
     ------------------------------------------------------------ */

  .group-card .desktop-table .wd-status-dot-cell {
    text-align:center !important;
  }

  .group-card .desktop-table .wd-status-dot-only {
    display:inline-block !important;

    width:8px !important;
    min-width:8px !important;
    height:8px !important;

    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    border-radius:50% !important;
  }

  .group-card .desktop-table .wd-status-dot-only.online {
    background:#35df91 !important;
    box-shadow:0 0 9px rgba(53,223,145,.38) !important;
  }

  .group-card .desktop-table .wd-status-dot-only.offline {
    background:#ff5364 !important;
    box-shadow:0 0 8px rgba(255,83,100,.32) !important;
  }


  /* ------------------------------------------------------------
     HOSTNAME — PRIMARY IDENTITY
     ------------------------------------------------------------ */

  .group-card .desktop-table .wd-device-hostname {
    padding:0 !important;
    margin:0 !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#eef2f8 !important;

    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.15 !important;
    letter-spacing:-.01em !important;

    text-decoration:none !important;
  }

  .group-card .desktop-table .wd-device-hostname:hover {
    color:#ffffff !important;
  }


  /* ------------------------------------------------------------
     REMOTE IDs
     ------------------------------------------------------------ */

  .group-card .desktop-table .col-rustdesk,
  .group-card .desktop-table .col-anydesk {
    color:#aab3c2 !important;
  }

  .group-card .desktop-table .rustdesk-id-link,
  .group-card .desktop-table .anydesk-id-link {
    min-height:0 !important;

    padding:0 !important;
    margin:0 !important;

    color:#aeb7c6 !important;

    font-size:10.5px !important;
    font-weight:500 !important;
    line-height:1 !important;
  }

  .group-card .desktop-table .rustdesk-id-link:hover,
  .group-card .desktop-table .anydesk-id-link:hover {
    color:#e9edf5 !important;
  }

  .group-card .desktop-table .remote-id-status-dot {
    width:6px !important;
    min-width:6px !important;
    height:6px !important;

    margin-right:6px !important;
  }


  /* ------------------------------------------------------------
     DEPOT / VERSION / LAST SEEN
     ------------------------------------------------------------ */

  .group-card .desktop-table .depot-cell,
  .group-card .desktop-table .version-cell {
    color:#9da7b8 !important;

    font-size:10.5px !important;
    font-weight:500 !important;
  }

  .group-card .desktop-table td:nth-child(10) {
    color:#8f99aa !important;
    font-size:10.5px !important;
  }


  /* ------------------------------------------------------------
     MINI GRAPHS
     ------------------------------------------------------------ */

  .group-card .desktop-table .table-mini-graph {
    gap:7px !important;
  }

  .group-card .desktop-table .table-mini-track {
    height:5px !important;

    border:0 !important;
    border-radius:999px !important;

    background:rgba(255,255,255,.075) !important;

    overflow:hidden !important;
  }

  .group-card .desktop-table .table-mini-track > span {
    border-radius:999px !important;
  }

  .group-card .desktop-table .table-mini-value {
    color:#9da6b5 !important;

    font-size:9.5px !important;
    font-weight:600 !important;
  }


  /* ------------------------------------------------------------
     TAGS
     ------------------------------------------------------------ */

  .group-card .desktop-table .tag {
    display:inline-flex !important;
    align-items:center !important;

    min-height:20px !important;

    margin:1px 3px 1px 0 !important;
    padding:2px 7px !important;

    border:1px solid rgba(255,255,255,.075) !important;
    border-radius:999px !important;

    background:rgba(255,255,255,.035) !important;

    color:#aeb6c5 !important;

    font-size:9px !important;
    font-weight:600 !important;
    line-height:1 !important;

    box-shadow:none !important;
  }


  /* ------------------------------------------------------------
     ACTIONS
     ------------------------------------------------------------ */

  .group-card .desktop-table .actions-redesign {
    display:flex !important;
    align-items:center !important;

    gap:5px !important;

    overflow:visible !important;
  }

  .group-card .desktop-table .actions-redesign > .btn-action,
  .group-card .desktop-table .actions-redesign > .action-more > .btn-more {
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;

    height:32px !important;
    min-height:32px !important;

    flex:0 0 32px !important;

    padding:0 !important;
    margin:0 !important;

    border-radius:9px !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.035),
        rgba(255,255,255,.012)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025) !important;

    transition:
      background .14s ease,
      border-color .14s ease,
      opacity .14s ease !important;
  }

  .group-card .desktop-table .actions-redesign > .btn-action:hover:not(.btn-disabled),
  .group-card .desktop-table .actions-redesign > .action-more > .btn-more:hover {
    background:rgba(255,255,255,.065) !important;
  }

  .group-card .desktop-table .actions-redesign > .btn-disabled {
    opacity:.28 !important;
  }


  /* ------------------------------------------------------------
     COLUMN BALANCE
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width:52px !important;
  }

  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width:125px !important;
  }

  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3),
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width:116px !important;
  }

  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width:86px !important;
  }

  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:118px !important;
  }

  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7),
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8),
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width:104px !important;
  }

  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width:100px !important;
  }

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:110px !important;
  }

  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:258px !important;
    min-width:258px !important;
    max-width:258px !important;

    padding-left:9px !important;
    padding-right:9px !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_APPLE_V2_MARKER
   Final desktop spacing / Actions / offline metrics refinement.
   ======================================================================== */

@media (min-width:769px) {

  /* Status needs only the dot. */
  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    text-align:center !important;
  }

  /* Give Actions enough deterministic room. */
  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:246px !important;
    min-width:246px !important;
    max-width:246px !important;

    padding-left:8px !important;
    padding-right:8px !important;

    overflow:visible !important;
    text-overflow:clip !important;
  }

  .group-card .desktop-table th:last-child {
    text-align:right !important;
    padding-right:18px !important;
  }

  .group-card .desktop-table .actions-redesign {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    width:100% !important;
    max-width:none !important;

    gap:4px !important;

    overflow:visible !important;
  }

  .group-card .desktop-table .actions-redesign > .btn-action,
  .group-card .desktop-table .actions-redesign > .action-more > .btn-more {
    width:29px !important;
    min-width:29px !important;
    max-width:29px !important;

    height:29px !important;
    min-height:29px !important;

    flex:0 0 29px !important;

    border-radius:9px !important;
  }

  .group-card .desktop-table .actions-redesign > .action-more {
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:29px !important;
    min-width:29px !important;
    max-width:29px !important;

    height:29px !important;
    min-height:29px !important;

    flex:0 0 29px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }

  /* Keep dropdown outside the table cell when opened. */
  .group-card .desktop-table .action-menu {
    z-index:1000 !important;
  }


  /* ------------------------------------------------------------
     OFFLINE METRICS
     Empty CPU/RAM/Disk cells get a quiet Apple-style dash.
     Online graph contents remain untouched.
     ------------------------------------------------------------ */

  .group-card .desktop-table tbody > tr:not(.edit-row)
  > td.table-graph-cell:empty::after {
    content:"—";

    color:rgba(174,183,198,.36);

    font-size:11px;
    font-weight:500;
  }


  /* ------------------------------------------------------------
     REBALANCE INFORMATION COLUMNS
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width:116px !important;
  }

  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width:112px !important;
  }

  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width:112px !important;
  }

  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width:96px !important;
  }

  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:116px !important;
  }

  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7),
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8),
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width:96px !important;
  }

  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width:96px !important;
  }

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:96px !important;
  }


  /* More subtle row hover. */
  .group-card .desktop-table tbody > tr:not(.edit-row):hover > td {
    background:rgba(255,255,255,.021) !important;
  }

}


/* On normal laptop/desktop widths keep every action visible. */
@media (min-width:769px) and (max-width:1450px) {

  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:224px !important;
    min-width:224px !important;
    max-width:224px !important;

    padding-left:6px !important;
    padding-right:6px !important;
  }

  .group-card .desktop-table .actions-redesign {
    gap:3px !important;
  }

  .group-card .desktop-table .actions-redesign > .btn-action,
  .group-card .desktop-table .actions-redesign > .action-more,
  .group-card .desktop-table .actions-redesign > .action-more > .btn-more {
    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;

    height:27px !important;
    min-height:27px !important;

    flex-basis:27px !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_APPLE_V3_MARKER
   Correct 12-column desktop layout.
   Keep all 7 Actions inside the rounded site card.
   ======================================================================== */

@media (min-width:769px) {

  /* ------------------------------------------------------------
     TABLE
     Let the browser distribute the remaining width after the
     deterministic columns below.
     ------------------------------------------------------------ */

  .group-card > .group-body {
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
  }

  .group-card .desktop-table {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    table-layout:fixed !important;

    margin:0 !important;
  }


  /* ------------------------------------------------------------
     1 STATUS
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width:46px !important;
    min-width:0 !important;
    max-width:none !important;

    padding-left:8px !important;
    padding-right:8px !important;

    text-align:center !important;
  }


  /* ------------------------------------------------------------
     2 HOSTNAME
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width:116px !important;
    min-width:0 !important;
    max-width:none !important;
  }


  /* ------------------------------------------------------------
     3 RUSTDESK
     4 ANYDESK
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3),
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width:112px !important;
    min-width:0 !important;
    max-width:none !important;
  }


  /* ------------------------------------------------------------
     5 DEPOT
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width:112px !important;
    min-width:0 !important;
    max-width:none !important;
  }


  /* ------------------------------------------------------------
     6 VERSION
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:120px !important;
    min-width:0 !important;
    max-width:none !important;
  }


  /* ------------------------------------------------------------
     7 CPU
     8 RAM
     9 DISK
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7),
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8),
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width:96px !important;
    min-width:0 !important;
    max-width:none !important;
  }


  /* ------------------------------------------------------------
     10 LAST SEEN
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width:100px !important;
    min-width:0 !important;
    max-width:none !important;
  }


  /* ------------------------------------------------------------
     11 TAGS
     Flexible information column.
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:auto !important;
    min-width:120px !important;
    max-width:none !important;

    overflow:hidden !important;
  }


  /* ------------------------------------------------------------
     12 ACTIONS
     7 × 29px + 6 × 4px = 227px.
     16px horizontal padding gives a safe 243px column.
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12),
  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:243px !important;
    min-width:243px !important;
    max-width:243px !important;

    box-sizing:border-box !important;

    padding-left:8px !important;
    padding-right:8px !important;

    overflow:visible !important;
    text-overflow:clip !important;
  }

  .group-card .desktop-table th:nth-child(12) {
    text-align:right !important;
    padding-right:12px !important;
  }


  /* ------------------------------------------------------------
     ACTION BAR
     ------------------------------------------------------------ */

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    display:flex !important;
    flex-flow:row nowrap !important;

    align-items:center !important;
    justify-content:flex-end !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    gap:4px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }


  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .btn-action,

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more {

    width:29px !important;
    min-width:29px !important;
    max-width:29px !important;

    height:29px !important;
    min-height:29px !important;
    max-height:29px !important;

    flex:0 0 29px !important;

    box-sizing:border-box !important;

    margin:0 !important;
  }


  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more > .btn-more {

    width:29px !important;
    min-width:29px !important;
    max-width:29px !important;

    height:29px !important;
    min-height:29px !important;
    max-height:29px !important;

    box-sizing:border-box !important;

    margin:0 !important;
  }


  /* ------------------------------------------------------------
     OFFLINE CPU / RAM / DISK
     :empty is unreliable because Jinja leaves whitespace.
     Show dash only when no graph exists.
     ------------------------------------------------------------ */

  .group-card .desktop-table
  td.table-graph-cell:not(:has(.table-mini-graph))::after {
    content:"—" !important;

    color:rgba(174,183,198,.32) !important;

    font-size:11px !important;
    font-weight:500 !important;
  }

}


/* ========================================================================
   Laptop desktop
   Keep desktop table usable without shrinking Actions into tiny controls.
   ======================================================================== */

@media (min-width:769px) and (max-width:1450px) {

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12),
  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:225px !important;
    min-width:225px !important;
    max-width:225px !important;

    padding-left:6px !important;
    padding-right:6px !important;
  }

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    gap:3px !important;
  }

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .btn-action,

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more,

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more > .btn-more {

    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;

    height:27px !important;
    min-height:27px !important;
    max-height:27px !important;

    flex-basis:27px !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_APPLE_V4_MARKER
   Larger typography + tighter content-based column rhythm.
   ======================================================================== */

@media (min-width:769px) {

  /* Slightly larger, clearer header */
  .group-card .desktop-table thead th {
    height:40px !important;

    padding-left:8px !important;
    padding-right:8px !important;

    font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.065em !important;
  }

  /* Larger device data */
  .group-card .desktop-table tbody > tr:not(.edit-row) > td {
    height:54px !important;

    padding-left:8px !important;
    padding-right:8px !important;

    font-size:12px !important;
  }

  .group-card .desktop-table .wd-device-hostname {
    font-size:12.5px !important;
    font-weight:750 !important;
  }

  .group-card .desktop-table .rustdesk-id-link,
  .group-card .desktop-table .anydesk-id-link,
  .group-card .desktop-table .depot-cell,
  .group-card .desktop-table .version-cell,
  .group-card .desktop-table td:nth-child(10) {
    font-size:11.5px !important;
  }

  .group-card .desktop-table .table-mini-value {
    font-size:10.5px !important;
  }

  .group-card .desktop-table .tag {
    min-height:22px !important;
    padding:3px 8px !important;

    font-size:10px !important;
  }


  /* ============================================================
     COMPACT COLUMN RHYTHM
     Width follows the actual kind of information in each column.
     ============================================================ */

  /* STATUS */
  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
  }

  /* HOSTNAME */
  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width:128px !important;
    min-width:128px !important;
    max-width:128px !important;
  }

  /* RUSTDESK */
  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width:118px !important;
    min-width:118px !important;
    max-width:118px !important;
  }

  /* ANYDESK */
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width:116px !important;
    min-width:116px !important;
    max-width:116px !important;
  }

  /* DEPOT */
  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width:142px !important;
    min-width:142px !important;
    max-width:142px !important;
  }

  /* VERSION */
  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;
  }

  /* CPU / RAM / DISK */
  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7),
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8),
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width:104px !important;
    min-width:104px !important;
    max-width:104px !important;
  }

  /* LAST SEEN */
  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width:105px !important;
    min-width:105px !important;
    max-width:105px !important;
  }

  /*
   * TAGS receives the remaining width.
   * This removes the artificial gaps between the information columns.
   */
  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:auto !important;
    min-width:150px !important;
    max-width:none !important;

    padding-left:8px !important;
    padding-right:8px !important;
  }

  /* ACTIONS stays deterministic */
  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12),
  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:243px !important;
    min-width:243px !important;
    max-width:243px !important;
  }


  /* ============================================================
     ALIGNMENT
     ============================================================ */

  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    text-align:center !important;
  }

  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table th:nth-child(9) {
    text-align:left !important;
  }

  .group-card .desktop-table th:nth-child(12) {
    text-align:right !important;
  }


  /* Give mini graphs a little more visual weight. */
  .group-card .desktop-table .table-mini-track {
    height:6px !important;
  }

  .group-card .desktop-table .table-mini-graph {
    gap:6px !important;
  }

}


/* Normal laptop width */
@media (min-width:769px) and (max-width:1450px) {

  .group-card .desktop-table thead th {
    font-size:9px !important;
  }

  .group-card .desktop-table tbody > tr:not(.edit-row) > td {
    font-size:11px !important;
  }

  .group-card .desktop-table .wd-device-hostname {
    font-size:11.5px !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_TAGS_ACTIONS_V5_MARKER
   Hard separation between TAGS and ACTIONS.
   Nothing may overlap between these two columns.
   ======================================================================== */

@media (min-width:769px) {

  /* ------------------------------------------------------------
     TAGS
     Give tags their own protected area.
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:auto !important;
    min-width:250px !important;
    max-width:none !important;

    box-sizing:border-box !important;

    padding-left:10px !important;
    padding-right:18px !important;

    overflow:hidden !important;
    text-overflow:clip !important;
  }

  .group-card .desktop-table td:nth-child(11) {
    white-space:nowrap !important;
  }

  /* Tag container must never draw into Actions. */
  .group-card .desktop-table td:nth-child(11) > * {
    max-width:100% !important;
  }

  .group-card .desktop-table td:nth-child(11) .tag {
    position:relative !important;
    z-index:1 !important;

    display:inline-flex !important;
    vertical-align:middle !important;

    margin-right:5px !important;
  }


  /* ------------------------------------------------------------
     ACTIONS
     Fixed protected action area.
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12),
  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:270px !important;
    min-width:270px !important;
    max-width:270px !important;

    box-sizing:border-box !important;

    padding-left:14px !important;
    padding-right:10px !important;

    overflow:visible !important;
  }

  /* Visual separator also guarantees a clear boundary. */
  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    border-left:1px solid rgba(255,255,255,.055) !important;
  }

  .group-card .desktop-table th:last-child {
    text-align:center !important;
  }

  .group-card .desktop-table .actions-redesign {
    position:relative !important;
    z-index:2 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    width:100% !important;
    max-width:100% !important;

    gap:5px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
    white-space:nowrap !important;
  }

  .group-card .desktop-table .actions-redesign > .btn-action,
  .group-card .desktop-table .actions-redesign > .action-more {
    flex-shrink:0 !important;
  }

  .group-card .desktop-table .actions-redesign > .action-more {
    position:relative !important;
    width:29px !important;
    min-width:29px !important;
    max-width:29px !important;
  }


  /* ------------------------------------------------------------
     ROW CLIPPING
     A normal cell must never paint across its neighbour.
     Actions are the only exception because its dropdown needs it.
     ------------------------------------------------------------ */

  .group-card .desktop-table tbody > tr:not(.edit-row) > td:not(:last-child) {
    overflow:hidden !important;
  }

  .group-card .desktop-table tbody > tr:not(.edit-row) > td:last-child {
    overflow:visible !important;
  }

}


/* On smaller desktop/laptop screens keep the same separation.
   Horizontal table scrolling is preferable to overlapping content. */
@media (min-width:769px) and (max-width:1450px) {

  .group-card .desktop-table {
    min-width:1500px !important;
  }

  .group-card > .group-body {
    overflow-x:auto !important;
    overflow-y:visible !important;
  }

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    min-width:235px !important;
  }

  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:260px !important;
    min-width:260px !important;
    max-width:260px !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_TABLE_BALANCE_V6_MARKER
   Final desktop column geometry.
   - compact content columns
   - protected TAGS area
   - protected ACTIONS area
   - no overlap between cells
   ======================================================================== */

@media (min-width:769px) {

  /* ============================================================
     TABLE GEOMETRY
     ============================================================ */

  .group-card > .group-body {
    width:100% !important;
    max-width:100% !important;

    overflow-x:auto !important;
    overflow-y:visible !important;

    scrollbar-width:thin;
  }

  .group-card .desktop-table {
    width:100% !important;
    max-width:none !important;

    /*
       Let the browser distribute the small remaining space,
       while the explicit widths below define the real proportions.
    */
    table-layout:fixed !important;

    border-collapse:separate !important;
    border-spacing:0 !important;
  }


  /* ============================================================
     COLUMN WIDTHS
     ============================================================ */

  /* 1 STATUS */
  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width:58px !important;
    min-width:58px !important;
    max-width:58px !important;
  }

  /* 2 HOSTNAME */
  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width:140px !important;
    min-width:140px !important;
    max-width:140px !important;
  }

  /* 3 RUSTDESK */
  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width:140px !important;
    min-width:140px !important;
    max-width:140px !important;
  }

  /* 4 ANYDESK */
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width:140px !important;
    min-width:140px !important;
    max-width:140px !important;
  }

  /* 5 DEPOT */
  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;
  }

  /* 6 VERSION */
  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;
  }

  /* 7 CPU */
  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7) {
    width:135px !important;
    min-width:135px !important;
    max-width:135px !important;
  }

  /* 8 RAM */
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8) {
    width:135px !important;
    min-width:135px !important;
    max-width:135px !important;
  }

  /* 9 DISK */
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width:135px !important;
    min-width:135px !important;
    max-width:135px !important;
  }

  /* 10 LAST SEEN */
  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width:125px !important;
    min-width:125px !important;
    max-width:125px !important;
  }

  /* 11 TAGS */
  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:310px !important;
    min-width:310px !important;
    max-width:310px !important;

    box-sizing:border-box !important;

    padding-left:12px !important;
    padding-right:16px !important;

    overflow:hidden !important;
    white-space:nowrap !important;
  }

  /* 12 ACTIONS */
  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    width:270px !important;
    min-width:270px !important;
    max-width:270px !important;

    box-sizing:border-box !important;

    padding-left:12px !important;
    padding-right:10px !important;
  }


  /* ============================================================
     CELL PROTECTION
     Nothing from one column may paint over another column.
     ============================================================ */

  .group-card .desktop-table tbody > tr:not(.edit-row) > td {
    position:relative !important;

    box-sizing:border-box !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /* Action cell itself stays clipped to its allocated 270px. */
  .group-card .desktop-table tbody > tr:not(.edit-row) > td:nth-child(12) {
    overflow:visible !important;
    text-overflow:clip !important;
  }


  /* ============================================================
     TAGS
     ============================================================ */

  .group-card .desktop-table td:nth-child(11) {
    display:table-cell !important;
  }

  .group-card .desktop-table td:nth-child(11) .tag {
    display:inline-flex !important;
    align-items:center !important;

    position:relative !important;

    max-width:100% !important;

    margin:0 5px 0 0 !important;

    vertical-align:middle !important;
  }


  /* ============================================================
     ACTIONS
     ============================================================ */

  .group-card .desktop-table th:nth-child(12) {
    text-align:center !important;
  }

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    border-left:1px solid rgba(255,255,255,.055) !important;
  }

  .group-card .desktop-table .actions-redesign {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;

    width:100% !important;
    max-width:100% !important;

    gap:5px !important;

    margin:0 !important;
    padding:0 !important;

    white-space:nowrap !important;
  }

  .group-card .desktop-table .actions-redesign > .btn-action,
  .group-card .desktop-table .actions-redesign > .action-more {
    flex-shrink:0 !important;
  }


  /* ============================================================
     TYPOGRAPHY
     Keep the new readable desktop size.
     ============================================================ */

  .group-card .desktop-table tbody td {
    font-size:13px !important;
    line-height:1.25 !important;
  }

  .group-card .desktop-table thead th {
    font-size:10.5px !important;
    line-height:1.15 !important;
  }

  .group-card .desktop-table .wd-device-hostname {
    font-size:13px !important;
  }

  .group-card .desktop-table .rustdesk-id-link,
  .group-card .desktop-table .anydesk-id-link {
    font-size:12px !important;
  }


  /* ============================================================
     ROW HEIGHT / PADDING
     ============================================================ */

  .group-card .desktop-table tbody > tr:not(.edit-row) > td {
    height:54px !important;

    padding-top:8px !important;
    padding-bottom:8px !important;
  }


  /* ============================================================
     GRAPHS
     Keep graph inside its own column.
     ============================================================ */

  .group-card .desktop-table .table-mini-graph {
    width:100% !important;
    max-width:105px !important;
  }

  .group-card .desktop-table .graph-tooltip-wrap {
    max-width:100% !important;
  }

}


/* ========================================================================
   Smaller desktop / laptop

   The full data set has a real minimum width.
   Do NOT crush columns and do NOT overlap them.
   Scroll horizontally instead.
   ======================================================================== */

@media (min-width:769px) and (max-width:1800px) {

  .group-card .desktop-table {
    min-width:1970px !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_APPLE_V7_MARKER
   Fit complete desktop device table inside group card.
   No overlap between Tags / Actions and no forced horizontal table width.
   ======================================================================== */

@media (min-width:769px) {

  /* ------------------------------------------------------------
     TABLE MUST FIT THE GROUP CARD
     ------------------------------------------------------------ */

  .group-card > .group-body {
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .group-card .desktop-table {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    table-layout:fixed !important;

    margin:0 !important;
  }


  /* ------------------------------------------------------------
     BASE CELL SPACING
     ------------------------------------------------------------ */

  .group-card .desktop-table th,
  .group-card .desktop-table td {
    box-sizing:border-box !important;

    padding-left:8px !important;
    padding-right:8px !important;

    min-width:0 !important;
  }


  /* ------------------------------------------------------------
     COLUMN 1 — STATUS
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width:5% !important;
  }


  /* ------------------------------------------------------------
     COLUMN 2 — HOSTNAME
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width:8.5% !important;
  }


  /* ------------------------------------------------------------
     COLUMN 3 — RUSTDESK
     COLUMN 4 — ANYDESK
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3),
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width:8.5% !important;
  }


  /* ------------------------------------------------------------
     COLUMN 5 — DEPOT
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width:11.5% !important;
  }


  /* ------------------------------------------------------------
     COLUMN 6 — VERSION
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:11.5% !important;
  }


  /* ------------------------------------------------------------
     COLUMNS 7–9 — CPU / RAM / DISK
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7),
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8),
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width:8% !important;
  }


  /* Make graph itself use available column space. */

  .group-card .desktop-table .table-mini-graph {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .group-card .desktop-table .table-mini-track {
    min-width:0 !important;
  }


  /* ------------------------------------------------------------
     COLUMN 10 — LAST SEEN
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width:8% !important;
  }


  /* ------------------------------------------------------------
     COLUMN 11 — TAGS
     Strict boundary. Tags must never enter Actions.
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:13.5% !important;

    min-width:0 !important;
    max-width:none !important;

    overflow:hidden !important;
    text-overflow:clip !important;
    white-space:nowrap !important;

    padding-right:10px !important;
  }

  .group-card .desktop-table td:nth-child(11) .tag {
    display:inline-flex !important;

    margin-right:4px !important;
    margin-bottom:0 !important;

    max-width:100% !important;

    vertical-align:middle !important;
  }


  /* ------------------------------------------------------------
     COLUMN 12 — ACTIONS
     Completely independent from Tags.
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12),
  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:16.5% !important;

    min-width:0 !important;
    max-width:none !important;

    box-sizing:border-box !important;

    padding-left:8px !important;
    padding-right:10px !important;

    overflow:visible !important;
  }

  .group-card .desktop-table th:nth-child(12) {
    text-align:right !important;
  }

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    gap:4px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }


  /* Seven controls must fit inside Actions. */

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .btn-action,

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more > .btn-more {
    width:29px !important;
    min-width:29px !important;
    max-width:29px !important;

    height:29px !important;
    min-height:29px !important;

    flex:0 0 29px !important;
  }

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more {
    width:29px !important;
    min-width:29px !important;
    max-width:29px !important;

    flex:0 0 29px !important;
  }


  /* ------------------------------------------------------------
     TEXT SAFETY
     Long Depot / Version may truncate, but NEVER overlap.
     ------------------------------------------------------------ */

  .group-card .desktop-table td:nth-child(5),
  .group-card .desktop-table td:nth-child(6) {
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }


  /* IDs stay on one line inside their own columns. */

  .group-card .desktop-table td:nth-child(3),
  .group-card .desktop-table td:nth-child(4) {
    overflow:hidden !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

}


/* Slightly tighter action controls only when desktop width becomes limited. */
@media (min-width:769px) and (max-width:1450px) {

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .btn-action,

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more > .btn-more {
    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;

    height:27px !important;
    min-height:27px !important;

    flex-basis:27px !important;
  }

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more {
    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;

    flex-basis:27px !important;
  }

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    gap:3px !important;
  }

}



/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_COMPACT_V9_MARKER
   Compact balanced desktop table.
   Keeps fixed layout / no overlap / no horizontal scroll.
   ======================================================================== */

@media (min-width:769px) {

  /*
   * Keep the proven V7 fixed-layout model.
   * Percentages total exactly 100%.
   */
  .group-card .desktop-table {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }

  /*
   * Slightly larger and clearer table typography.
   */
  .group-card .desktop-table tbody td {
    font-size:12.5px !important;
  }

  .group-card .desktop-table thead th {
    font-size:10.5px !important;
  }

  /*
   * Less dead space inside every cell.
   */
  .group-card .desktop-table th,
  .group-card .desktop-table td {
    padding-left:6px !important;
    padding-right:6px !important;
  }


  /* 1 STATUS */
  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width:4% !important;
  }


  /* 2 HOSTNAME */
  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width:8% !important;
  }


  /* 3 RUSTDESK */
  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width:7.5% !important;
  }


  /* 4 ANYDESK */
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width:7.5% !important;
  }


  /* 5 DEPOT
     Needs room for prod/no-certificate. */
  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width:10% !important;
  }


  /* 6 VERSION
     Long 7.4.xx-develop.xxxx values. */
  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:10.5% !important;
  }


  /* 7 CPU */
  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7) {
    width:7% !important;
  }


  /* 8 RAM */
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8) {
    width:7% !important;
  }


  /* 9 DISK */
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width:7% !important;
  }


  /* 10 LAST SEEN */
  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width:7% !important;
  }


  /* 11 TAGS */
  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:13% !important;

    overflow:hidden !important;
    white-space:nowrap !important;

    padding-left:7px !important;
    padding-right:7px !important;
  }


  /* 12 ACTIONS */
  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12),
  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:11.5% !important;

    min-width:0 !important;
    max-width:none !important;

    padding-left:4px !important;
    padding-right:6px !important;

    overflow:visible !important;
  }


  /*
   * Actions remain completely inside their own column.
   */
  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    width:100% !important;
    max-width:100% !important;

    gap:3px !important;

    overflow:visible !important;
  }


  /*
   * Compact Apple-style action controls.
   * 7 × 27px + gaps fit in the reserved Actions area.
   */
  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .btn-action,

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more > .btn-more {
    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;

    height:27px !important;
    min-height:27px !important;

    flex:0 0 27px !important;
  }

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more {
    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;

    flex:0 0 27px !important;
  }


  /*
   * Long textual values stay inside their cells.
   */
  .group-card .desktop-table td:nth-child(5),
  .group-card .desktop-table td:nth-child(6) {
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }


  /*
   * Tags stay strictly inside Tags.
   */
  .group-card .desktop-table td:nth-child(11) .tag {
    margin-right:3px !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_FINE_TUNE_V10_MARKER
   Fine tuning on top of stable V9.
   Tighter spacing, balanced columns, no overlap, no horizontal scroll.
   ======================================================================== */

@media (min-width:769px) {

  /* Keep the stable V9 table model. */
  .group-card .desktop-table {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }


  /* ------------------------------------------------------------
     GLOBAL CELL SPACING
     ------------------------------------------------------------ */

  .group-card .desktop-table th,
  .group-card .desktop-table td {
    padding-left:5px !important;
    padding-right:5px !important;
  }


  /* ------------------------------------------------------------
     1 STATUS
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width:3.5% !important;
  }


  /* ------------------------------------------------------------
     2 HOSTNAME
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width:8% !important;
  }


  /* ------------------------------------------------------------
     3 RUSTDESK
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width:7.5% !important;
  }


  /* ------------------------------------------------------------
     4 ANYDESK
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width:7.5% !important;
  }


  /* ------------------------------------------------------------
     5 DEPOT
     Still fits prod/no-certificate.
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width:9.5% !important;
  }


  /* ------------------------------------------------------------
     6 VERSION
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:10% !important;
  }


  /* ------------------------------------------------------------
     7 CPU
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7) {
    width:7% !important;
  }


  /* ------------------------------------------------------------
     8 RAM
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8) {
    width:7% !important;
  }


  /* ------------------------------------------------------------
     9 DISK
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width:7% !important;
  }


  /* ------------------------------------------------------------
     10 LAST SEEN
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width:6.5% !important;
  }


  /* ------------------------------------------------------------
     11 TAGS
     More useful space for 4 tags / longer tag names.
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:15% !important;

    min-width:0 !important;
    max-width:none !important;

    padding-left:6px !important;
    padding-right:6px !important;

    overflow:hidden !important;
    white-space:nowrap !important;
  }

  .group-card .desktop-table td:nth-child(11) .tag {
    margin-right:3px !important;
  }


  /* ------------------------------------------------------------
     12 ACTIONS
     Dedicated space, independent from Tags.
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12),
  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:11.5% !important;

    min-width:0 !important;
    max-width:none !important;

    padding-left:4px !important;
    padding-right:5px !important;

    overflow:visible !important;
  }

  .group-card .desktop-table th:nth-child(12) {
    text-align:right !important;
  }


  /* ------------------------------------------------------------
     ACTION CONTROLS
     ------------------------------------------------------------ */

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    gap:3px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .btn-action,

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more > .btn-more {
    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;

    height:27px !important;
    min-height:27px !important;

    flex:0 0 27px !important;
  }

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more {
    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;

    flex:0 0 27px !important;
  }


  /* ------------------------------------------------------------
     TEXT SAFETY
     ------------------------------------------------------------ */

  .group-card .desktop-table td:nth-child(5),
  .group-card .desktop-table td:nth-child(6) {
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

}


/*
 * At smaller desktop/laptop widths preserve the same structure,
 * but make Actions slightly more compact.
 */
@media (min-width:769px) and (max-width:1450px) {

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .btn-action,

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more > .btn-more {
    width:25px !important;
    min-width:25px !important;
    max-width:25px !important;

    height:25px !important;
    min-height:25px !important;

    flex:0 0 25px !important;
  }

  .group-card .desktop-table td:nth-child(12)
  .actions-redesign > .action-more {
    width:25px !important;
    min-width:25px !important;
    max-width:25px !important;

    flex:0 0 25px !important;
  }

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    gap:2px !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_MICRO_V11_MARKER
   Final desktop table micro polish.
   - center Status header + dot
   - normalize CPU/RAM/DISK graph geometry
   - preserve V10 column widths, Tags and Actions
   ======================================================================== */

@media (min-width:769px) {

  /* ------------------------------------------------------------
     STATUS
     Header and status dot use exactly the same center line.
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    text-align:center !important;
    padding-left:4px !important;
    padding-right:4px !important;
  }

  .group-card .desktop-table td:nth-child(1).wd-status-dot-cell {
    text-align:center !important;
    vertical-align:middle !important;
  }

  .group-card .desktop-table td:nth-child(1)
  .wd-status-dot-only {
    display:inline-block !important;

    margin:0 auto !important;

    vertical-align:middle !important;
  }


  /* ------------------------------------------------------------
     CPU / RAM / DISK
     All three metric cells use identical geometry.
     ------------------------------------------------------------ */

  .group-card .desktop-table td:nth-child(7),
  .group-card .desktop-table td:nth-child(8),
  .group-card .desktop-table td:nth-child(9) {
    vertical-align:middle !important;
  }

  .group-card .desktop-table td:nth-child(7) .graph-tooltip-wrap,
  .group-card .desktop-table td:nth-child(8) .graph-tooltip-wrap,
  .group-card .desktop-table td:nth-child(9) .graph-tooltip-wrap {
    width:100% !important;
    max-width:100% !important;
  }

  .group-card .desktop-table td:nth-child(7) .table-mini-graph,
  .group-card .desktop-table td:nth-child(8) .table-mini-graph,
  .group-card .desktop-table td:nth-child(9) .table-mini-graph {
    display:grid !important;
    grid-template-columns:minmax(38px, 1fr) 30px !important;

    align-items:center !important;

    width:100% !important;
    max-width:100% !important;

    gap:6px !important;

    margin:0 !important;
  }

  .group-card .desktop-table td:nth-child(7) .table-mini-track,
  .group-card .desktop-table td:nth-child(8) .table-mini-track,
  .group-card .desktop-table td:nth-child(9) .table-mini-track {
    display:block !important;

    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    height:6px !important;

    margin:0 !important;
  }

  .group-card .desktop-table td:nth-child(7) .table-mini-value,
  .group-card .desktop-table td:nth-child(8) .table-mini-value,
  .group-card .desktop-table td:nth-child(9) .table-mini-value {
    width:30px !important;

    margin:0 !important;

    text-align:left !important;
    white-space:nowrap !important;
  }


  /* Offline dash follows the same visual center as an online graph. */

  .group-card .desktop-table td:nth-child(7):empty::after,
  .group-card .desktop-table td:nth-child(8):empty::after,
  .group-card .desktop-table td:nth-child(9):empty::after {
    display:block !important;

    width:100% !important;

    text-align:center !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_4K_V12_MARKER
   Desktop / 4K readability pass.
   - metric bars removed; percentage only
   - history hover preserved
   - larger unified table typography
   - existing column geometry and Actions preserved
   ======================================================================== */

@media (min-width:769px) {

  /* ------------------------------------------------------------
     GENERAL TABLE TYPOGRAPHY
     ------------------------------------------------------------ */

  .group-card .desktop-table {
    font-size:14px !important;
  }

  .group-card .desktop-table tbody td {
    font-size:14px !important;
    line-height:1.25 !important;
  }

  .group-card .desktop-table thead th {
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.15 !important;

    letter-spacing:.055em !important;
  }


  /* ------------------------------------------------------------
     HOSTNAME
     ------------------------------------------------------------ */

  .group-card .desktop-table .wd-device-hostname {
    font-size:14.5px !important;
    font-weight:750 !important;
    line-height:1.2 !important;
  }


  /* ------------------------------------------------------------
     RUSTDESK / ANYDESK
     ------------------------------------------------------------ */

  .group-card .desktop-table td:nth-child(3),
  .group-card .desktop-table td:nth-child(4),
  .group-card .desktop-table td:nth-child(3) a,
  .group-card .desktop-table td:nth-child(4) a {
    font-size:13.5px !important;
    line-height:1.2 !important;
  }


  /* ------------------------------------------------------------
     DEPOT / VERSION / LAST SEEN
     ------------------------------------------------------------ */

  .group-card .desktop-table td:nth-child(5),
  .group-card .desktop-table td:nth-child(6),
  .group-card .desktop-table td:nth-child(10) {
    font-size:13.5px !important;
    line-height:1.2 !important;
  }


  /* ------------------------------------------------------------
     CPU / RAM / DISK
     Percentage only. Keep graph-tooltip-wrap so history popup
     continues to work exactly as before.
     ------------------------------------------------------------ */

  .group-card .desktop-table td:nth-child(7) .table-mini-graph,
  .group-card .desktop-table td:nth-child(8) .table-mini-graph,
  .group-card .desktop-table td:nth-child(9) .table-mini-graph {
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    gap:0 !important;
  }

  /* Hide only the visual bar. */
  .group-card .desktop-table td:nth-child(7) .table-mini-track,
  .group-card .desktop-table td:nth-child(8) .table-mini-track,
  .group-card .desktop-table td:nth-child(9) .table-mini-track {
    display:none !important;
  }

  /* Percentage becomes the complete visible metric. */
  .group-card .desktop-table td:nth-child(7) .table-mini-value,
  .group-card .desktop-table td:nth-child(8) .table-mini-value,
  .group-card .desktop-table td:nth-child(9) .table-mini-value {
    display:block !important;

    width:auto !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    color:#c8d0df !important;

    font-size:14px !important;
    font-weight:700 !important;
    line-height:1 !important;

    text-align:center !important;
    white-space:nowrap !important;
  }

  .group-card .desktop-table td:nth-child(7) .graph-tooltip-wrap,
  .group-card .desktop-table td:nth-child(8) .graph-tooltip-wrap,
  .group-card .desktop-table td:nth-child(9) .graph-tooltip-wrap {
    display:block !important;

    width:100% !important;

    text-align:center !important;

    cursor:default !important;
  }


  /* ------------------------------------------------------------
     TAGS
     ------------------------------------------------------------ */

  .group-card .desktop-table td:nth-child(11) .tag {
    font-size:12px !important;
    font-weight:650 !important;
    line-height:1 !important;

    padding:6px 10px !important;
  }


  /* ------------------------------------------------------------
     STATUS DOT
     Slightly easier to read on high-resolution displays.
     ------------------------------------------------------------ */

  .group-card .desktop-table .wd-status-dot-only::before {
    width:11px !important;
    height:11px !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_4K_RING_V14_MARKER
   Final 4K readability.
   CPU / RAM / DISK = compact circular progress indicators.
   ======================================================================== */

@media (min-width:769px) {

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  .group-card .desktop-table tbody td {
    font-size:15px !important;
    line-height:1.25 !important;
  }

  .group-card .desktop-table thead th {
    font-size:12.5px !important;
    font-weight:700 !important;
    line-height:1.15 !important;
    letter-spacing:.05em !important;
  }

  .group-card .desktop-table .wd-device-hostname {
    font-size:15.5px !important;
    font-weight:750 !important;
    line-height:1.2 !important;
  }

  .group-card .desktop-table td:nth-child(3),
  .group-card .desktop-table td:nth-child(4),
  .group-card .desktop-table td:nth-child(3) a,
  .group-card .desktop-table td:nth-child(4) a,
  .group-card .desktop-table td:nth-child(5),
  .group-card .desktop-table td:nth-child(6),
  .group-card .desktop-table td:nth-child(10) {
    font-size:14.5px !important;
  }


  /* ============================================================
     METRIC COLUMNS
     ============================================================ */

  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7),
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8),
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width:6.25% !important;

    padding-left:5px !important;
    padding-right:5px !important;

    text-align:center !important;
  }

  .group-card .desktop-table td:nth-child(7) .table-mini-track,
  .group-card .desktop-table td:nth-child(8) .table-mini-track,
  .group-card .desktop-table td:nth-child(9) .table-mini-track {
    display:none !important;
  }

  .group-card .desktop-table td:nth-child(7) .table-mini-graph,
  .group-card .desktop-table td:nth-child(8) .table-mini-graph,
  .group-card .desktop-table td:nth-child(9) .table-mini-graph {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    gap:0 !important;
  }

  .group-card .desktop-table td:nth-child(7) .graph-tooltip-wrap,
  .group-card .desktop-table td:nth-child(8) .graph-tooltip-wrap,
  .group-card .desktop-table td:nth-child(9) .graph-tooltip-wrap {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;

    text-align:center !important;
  }


  /* ============================================================
     CIRCULAR MINI GRAPH
     ============================================================ */

  .group-card .desktop-table .wd-metric-ring {
    --wd-ring-color:#72a7ff;

    position:relative !important;

    display:grid !important;
    place-items:center !important;

    box-sizing:border-box !important;

    width:46px !important;
    min-width:46px !important;
    height:46px !important;

    margin:0 auto !important;
    padding:0 !important;

    border-radius:50% !important;

    background:
      conic-gradient(
        var(--wd-ring-color) calc(var(--wd-metric) * 1%),
        rgba(255,255,255,.075) 0
      ) !important;

    color:#d8deea !important;

    font-size:11px !important;
    font-weight:750 !important;
    line-height:1 !important;

    text-align:center !important;

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.025),
      0 2px 8px rgba(0,0,0,.16) !important;
  }


  /* Inner hole creates the ring. */

  .group-card .desktop-table .wd-metric-ring::before {
    content:"" !important;

    position:absolute !important;
    inset:4px !important;

    border-radius:50% !important;

    background:#101116 !important;

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.055) !important;
  }

  .group-card .desktop-table .wd-metric-ring > span {
    position:relative !important;
    z-index:1 !important;

    font-size:11px !important;
    font-weight:750 !important;
    letter-spacing:-.02em !important;

    white-space:nowrap !important;
  }


  /* CPU */

  .group-card .desktop-table td:nth-child(7) .wd-metric-ring {
    --wd-ring-color:#f0c744;
  }


  /* RAM */

  .group-card .desktop-table td:nth-child(8) .wd-metric-ring {
    --wd-ring-color:#eadf9d;
  }


  /* DISK */

  .group-card .desktop-table td:nth-child(9) .wd-metric-ring {
    --wd-ring-color:#78a7ff;
  }


  /* ============================================================
     REDISTRIBUTE RECOVERED SPACE
     ============================================================ */

  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width:9.5% !important;
  }

  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:10.5% !important;
  }

  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width:7.25% !important;
  }

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:15.75% !important;
  }


  /* ============================================================
     TAGS
     ============================================================ */

  .group-card .desktop-table td:nth-child(11) .tag {
    font-size:13px !important;
    font-weight:650 !important;
    line-height:1 !important;

    padding:6px 10px !important;
    margin-right:4px !important;
  }


  /* ============================================================
     TEXT SAFETY
     ============================================================ */

  .group-card .desktop-table td:nth-child(5),
  .group-card .desktop-table td:nth-child(6),
  .group-card .desktop-table td:nth-child(10),
  .group-card .desktop-table td:nth-child(11) {
    overflow:hidden !important;
    white-space:nowrap !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_METRIC_RING_V15_MARKER
   True circular CPU/RAM/DISK indicators.
   ======================================================================== */

@media (min-width:769px) {

  .group-card .desktop-table .table-mini-value.wd-metric-ring {
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:42px !important;
    min-width:42px !important;
    max-width:42px !important;

    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;

    aspect-ratio:1 / 1 !important;

    box-sizing:border-box !important;

    margin:0 auto !important;
    padding:0 !important;

    border:0 !important;
    border-radius:50% !important;

    overflow:hidden !important;

    background:
      conic-gradient(
        from 0deg,
        var(--wd-ring-color) 0 calc(var(--wd-metric) * 1%),
        rgba(255,255,255,.075) calc(var(--wd-metric) * 1%) 100%
      ) !important;

    box-shadow:
      0 0 0 1px rgba(255,255,255,.035),
      0 3px 10px rgba(0,0,0,.20) !important;

    line-height:1 !important;
  }


  /* Dark center / ring thickness */

  .group-card .desktop-table .table-mini-value.wd-metric-ring::before {
    content:"" !important;

    position:absolute !important;

    inset:4px !important;

    width:auto !important;
    height:auto !important;

    border-radius:50% !important;

    background:#101116 !important;

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.045) !important;

    z-index:1 !important;
  }


  /* Percentage exactly in the center */

  .group-card .desktop-table .table-mini-value.wd-metric-ring > span {
    position:absolute !important;

    top:50% !important;
    left:50% !important;

    transform:translate(-50%, -50%) !important;

    z-index:2 !important;

    display:block !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    color:#dce2ed !important;

    font-size:11px !important;
    font-weight:800 !important;
    line-height:1 !important;

    letter-spacing:-.03em !important;

    text-align:center !important;
    white-space:nowrap !important;

    pointer-events:none !important;
  }


  /* Keep all three metric cells perfectly centered */

  .group-card .desktop-table td:nth-child(7) .table-mini-graph,
  .group-card .desktop-table td:nth-child(8) .table-mini-graph,
  .group-card .desktop-table td:nth-child(9) .table-mini-graph {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_TAGS_ACTIONS_GAP_V16_MARKER
   Clean visual boundary between Tags and Actions.
   ======================================================================== */

@media (min-width:769px) {

  /* TAGS: keep content safely away from Actions */
  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    padding-left:10px !important;
    padding-right:18px !important;

    overflow:hidden !important;
    white-space:nowrap !important;
  }

  /* Slightly tighter tag pills */
  .group-card .desktop-table td:nth-child(11) .tag {
    margin-right:3px !important;
  }


  /* ACTIONS: create a clear visual start */
  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    padding-left:14px !important;
    padding-right:10px !important;

    border-left:1px solid rgba(255,255,255,.045) !important;
  }


  /* Keep action controls fully inside their own column */
  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    justify-content:flex-end !important;

    width:100% !important;
    max-width:100% !important;

    gap:4px !important;

    margin:0 !important;
    padding:0 !important;
  }

}


/* On narrower desktop screens reduce the separator space slightly. */
@media (min-width:769px) and (max-width:1450px) {

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    padding-right:12px !important;
  }

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    padding-left:10px !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_TAGS_ACTIONS_BOUNDARY_V17_MARKER
   Reserve real space between Tags and Actions.
   Tags + Actions total remains 26.5%, so other columns do not move.
   ======================================================================== */

@media (min-width:769px) {

  /* ------------------------------------------------------------
     TAGS
     15% -> 13.5%
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:13.5% !important;

    min-width:0 !important;
    max-width:none !important;

    box-sizing:border-box !important;

    padding-left:8px !important;
    padding-right:12px !important;

    overflow:hidden !important;
    white-space:nowrap !important;
  }

  .group-card .desktop-table td:nth-child(11) .tag {
    margin-right:3px !important;
  }


  /* ------------------------------------------------------------
     ACTIONS
     11.5% -> 13%
     ------------------------------------------------------------ */

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12),
  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:13% !important;

    min-width:0 !important;
    max-width:none !important;

    box-sizing:border-box !important;

    padding-left:12px !important;
    padding-right:8px !important;

    overflow:visible !important;

    border-left:1px solid rgba(255,255,255,.05) !important;
  }

  .group-card .desktop-table th:nth-child(12) {
    text-align:right !important;
  }


  /* ------------------------------------------------------------
     ACTION BUTTON GROUP
     ------------------------------------------------------------ */

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    gap:4px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }

}


/* Keep the same clean boundary on smaller desktop widths. */
@media (min-width:769px) and (max-width:1450px) {

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    padding-right:10px !important;
  }

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    padding-left:10px !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_TAGS_NO_ELLIPSIS_V18_MARKER
   Tags are clipped cleanly at the Tags/Actions boundary.
   Never render browser-generated "..." inside the Tags column.
   ======================================================================== */

@media (min-width:769px) {

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    overflow:hidden !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_TAGS_FULL_V19_MARKER
   Final desktop Tags layout.
   - no browser-generated ellipsis
   - more real space for Tags
   - preserve complete Actions toolbar
   - preserve CPU/RAM/DISK circular indicators
   ======================================================================== */

@media (min-width:769px) {

  /* STATUS */
  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width:3.5% !important;
  }

  /* HOSTNAME */
  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width:8% !important;
  }

  /* RUSTDESK */
  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width:7.25% !important;
  }

  /* ANYDESK */
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width:7.25% !important;
  }

  /* DEPOT */
  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width:8.5% !important;
  }

  /* VERSION */
  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:9.5% !important;
  }

  /* CPU / RAM / DISK */
  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7),
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8),
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width:5.5% !important;
  }

  /* LAST SEEN */
  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width:6.5% !important;
  }

  /* ============================================================
     TAGS
     Give tags real physical space and NEVER generate "...".
     ============================================================ */

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:17% !important;

    min-width:0 !important;
    max-width:none !important;

    box-sizing:border-box !important;

    padding-left:10px !important;
    padding-right:10px !important;

    overflow:hidden !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

  .group-card .desktop-table td:nth-child(11) .tag {
    display:inline-flex !important;
    align-items:center !important;

    max-width:none !important;

    margin:0 4px 0 0 !important;

    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

  /* ============================================================
     ACTIONS
     Keep complete toolbar isolated from Tags.
     ============================================================ */

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12),
  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:15.5% !important;

    min-width:0 !important;
    max-width:none !important;

    box-sizing:border-box !important;

    padding-left:12px !important;
    padding-right:8px !important;

    overflow:visible !important;
    text-overflow:clip !important;

    border-left:1px solid rgba(255,255,255,.05) !important;
  }

  .group-card .desktop-table th:nth-child(12) {
    text-align:right !important;
  }

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    width:100% !important;
    max-width:100% !important;

    gap:4px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }

}

/*
 * On normal laptop/desktop widths keep the layout compact.
 * 4K / wide desktop gets the full 17% Tags column above.
 */
@media (min-width:769px) and (max-width:1450px) {

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:15% !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    width:17.5% !important;
    padding-left:8px !important;
    padding-right:6px !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_FINAL_V20_MARKER
   Final desktop table balance:
   - full RUSTDESK ID / ANYDESK ID headers
   - fit complete tag set without ellipsis
   - preserve CPU/RAM/DISK rings
   - preserve complete Actions toolbar
   - desktop only
   ======================================================================== */

@media (min-width:769px) {

  .group-card .desktop-table {
    width:100% !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  /* STATUS */
  .group-card .desktop-table th:nth-child(1),
  .group-card .desktop-table td:nth-child(1) {
    width:3.5% !important;
  }

  /* HOSTNAME */
  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width:8% !important;
  }

  /* RUSTDESK ID */
  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width:8.5% !important;
  }

  /* ANYDESK ID */
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width:8.5% !important;
  }

  /* DEPOT */
  .group-card .desktop-table th:nth-child(5),
  .group-card .desktop-table td:nth-child(5) {
    width:7.5% !important;
  }

  /* VERSION */
  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:8.5% !important;
  }

  /* CPU / RAM / DISK */
  .group-card .desktop-table th:nth-child(7),
  .group-card .desktop-table td:nth-child(7),
  .group-card .desktop-table th:nth-child(8),
  .group-card .desktop-table td:nth-child(8),
  .group-card .desktop-table th:nth-child(9),
  .group-card .desktop-table td:nth-child(9) {
    width:5.25% !important;
    padding-left:3px !important;
    padding-right:3px !important;
  }

  /* LAST SEEN */
  .group-card .desktop-table th:nth-child(10),
  .group-card .desktop-table td:nth-child(10) {
    width:6.25% !important;
  }

  /* TAGS */
  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:19% !important;
    min-width:0 !important;
    max-width:none !important;

    padding-left:7px !important;
    padding-right:7px !important;

    overflow:hidden !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

  .group-card .desktop-table td:nth-child(11) .tag {
    display:inline-flex !important;
    align-items:center !important;

    min-height:22px !important;
    max-width:none !important;

    margin:0 3px 0 0 !important;
    padding:4px 7px !important;

    font-size:11.5px !important;
    font-weight:650 !important;
    line-height:1 !important;

    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

  /* ACTIONS */
  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12),
  .group-card .desktop-table th:last-child,
  .group-card .desktop-table td:last-child {
    width:14% !important;
    min-width:0 !important;
    max-width:none !important;

    padding-left:8px !important;
    padding-right:6px !important;

    overflow:visible !important;
    text-overflow:clip !important;

    border-left:1px solid rgba(255,255,255,.05) !important;
  }

  .group-card .desktop-table th:nth-child(12) {
    text-align:right !important;
  }

  .group-card .desktop-table td:nth-child(12) .actions-redesign {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;

    width:100% !important;
    max-width:100% !important;

    gap:3px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }

  /* Header text must remain readable. */
  .group-card .desktop-table thead th:nth-child(3),
  .group-card .desktop-table thead th:nth-child(4) {
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }
}

/* Normal desktop / laptop */
@media (min-width:769px) and (max-width:1450px) {

  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3),
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width:8.75% !important;
  }

  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:18% !important;
  }

  .group-card .desktop-table th:nth-child(12),
  .group-card .desktop-table td:nth-child(12) {
    width:14.5% !important;
  }

  .group-card .desktop-table td:nth-child(11) .tag {
    padding-left:6px !important;
    padding-right:6px !important;
    margin-right:2px !important;
    font-size:11px !important;
  }
}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_FONT_V21_MARKER
   Match DEPOT, VERSION and LAST SEEN typography with the other row values.
   ======================================================================== */

@media (min-width:769px) {

  .group-card .desktop-table td:nth-child(5),
  .group-card .desktop-table td:nth-child(6),
  .group-card .desktop-table td:nth-child(10) {
    font-size:15px !important;
    font-weight:400 !important;
    line-height:1.25 !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_FONT_V22_MARKER
   Unified desktop row typography:
   DEPOT / VERSION / LAST SEEN = same size as normal device values.
   ======================================================================== */

@media (min-width:769px) {

  .group-card .desktop-table td:nth-child(5),
  .group-card .desktop-table td:nth-child(5) .depot-cell,
  .group-card .desktop-table td:nth-child(5) > *,

  .group-card .desktop-table td:nth-child(6),
  .group-card .desktop-table td:nth-child(6) .version-cell,
  .group-card .desktop-table td:nth-child(6) > *,

  .group-card .desktop-table td:nth-child(10),
  .group-card .desktop-table td:nth-child(10) > * {
    font-size:15px !important;
    line-height:1.25 !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_FONT_V23_MARKER
   Visual typography normalization for DEPOT / VERSION / LAST SEEN.
   ======================================================================== */

@media (min-width:769px) {

  .group-card .desktop-table tbody td:nth-child(5),
  .group-card .desktop-table tbody td:nth-child(6),
  .group-card .desktop-table tbody td:nth-child(10) {
    font-family:inherit !important;
    font-size:15px !important;
    font-weight:400 !important;
    line-height:1.25 !important;
    letter-spacing:normal !important;
    color:inherit !important;
  }

}


/* ========================================================================
   WEBDESK_DESKTOP_DEVICE_TABLE_FONT_V24_MARKER
   DEPOT / VERSION / LAST SEEN use the same 15.5px size as HOSTNAME.
   ======================================================================== */

@media (min-width:769px) {

  .group-card .desktop-table tbody td.depot-cell,
  .group-card .desktop-table tbody td.version-cell,
  .group-card .desktop-table tbody td:nth-child(10) {
    font-family:inherit !important;
    font-size:15.5px !important;
    line-height:1.2 !important;
    letter-spacing:-.01em !important;
  }

}


/* WEBDESK_DESKTOP_FONT_MATCH_TEST_V25_MARKER */
@media (min-width:769px) {
  .group-card .desktop-table tbody td.depot-cell,
  .group-card .desktop-table tbody td.version-cell,
  .group-card .desktop-table tbody td:nth-child(10) {
    font-family:inherit !important;
    font-size:15.5px !important;
    font-weight:750 !important;
    line-height:1.2 !important;
    letter-spacing:-.01em !important;
    color:#eef2f8 !important;
  }
}

/* ========================================================================
   WEBDESK_DESKTOP_FONT_MATCH_V26_MARKER
   DEPOT / VERSION / LAST SEEN = exact HOSTNAME typography.
   Override .mono font-family for these desktop table cells only.
   ======================================================================== */
@media (min-width:769px) {

  .group-card .desktop-table tbody td.depot-cell,
  .group-card .desktop-table tbody td.version-cell,
  .group-card .desktop-table tbody td:nth-child(10) {
    font-family:Inter, "Segoe UI", Arial, sans-serif !important;
    font-size:15.5px !important;
    font-weight:750 !important;
    line-height:1.2 !important;
    letter-spacing:-.01em !important;
    font-style:normal !important;
    font-variant:normal !important;
    text-transform:none !important;
    color:#eef2f8 !important;
  }

}

/* ========================================================================
   WEBDESK_DEVICE_PRIMARY_TEXT_V27_MARKER
   DEPOT / VERSION / LAST SEEN — exact HOSTNAME text typography.
   ======================================================================== */
@media (min-width:769px) {

  .group-card .desktop-table .wd-device-primary-text {
    display:inline-block !important;

    font-family:Inter, "Segoe UI", Arial, sans-serif !important;
    font-size:15.5px !important;
    font-weight:750 !important;
    line-height:1.2 !important;
    letter-spacing:-.01em !important;

    font-style:normal !important;
    font-variant:normal !important;
    text-transform:none !important;

    color:#eef2f8 !important;
    -webkit-text-fill-color:#eef2f8 !important;
  }

}

/* WEBDESK_DEVICE_PRIMARY_TEXT_NORMAL_WEIGHT_V28_MARKER */
@media (min-width:769px) {
  .group-card .desktop-table .wd-device-primary-text {
    font-weight:400 !important;
  }
}

/* ========================================================================
   WEBDESK_DESKTOP_ROW_TEXT_COLOR_V29_MARKER
   Unified text color for normal device-row values.
   HOSTNAME remains primary/bold. Tags, metrics and actions stay untouched.
   ======================================================================== */
@media (min-width:769px) {

  /* RustDesk + AnyDesk */
  .group-card .desktop-table tbody td:nth-child(3),
  .group-card .desktop-table tbody td:nth-child(3) a,
  .group-card .desktop-table tbody td:nth-child(4),
  .group-card .desktop-table tbody td:nth-child(4) a,

  /* Depot + Version + Last Seen */
  .group-card .desktop-table .wd-device-primary-text {
    color:#c8ceda !important;
    -webkit-text-fill-color:#c8ceda !important;
  }

  /* Keep hostname as primary identity */
  .group-card .desktop-table .wd-device-hostname {
    color:#eef2f8 !important;
    -webkit-text-fill-color:#eef2f8 !important;
  }

}

/* ========================================================================
   WEBDESK_DESKTOP_VERSION_WIDTH_V30_MARKER
   More room for full VERSION text; take space only from TAGS.
   ======================================================================== */
@media (min-width:769px) {

  /* VERSION */
  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:10.5% !important;
  }

  /* TAGS */
  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:17% !important;
  }

  /* Never ellipsize VERSION */
  .group-card .desktop-table td:nth-child(6),
  .group-card .desktop-table td:nth-child(6) .wd-device-primary-text {
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

}

/* ========================================================================
   WEBDESK_DESKTOP_STATUS_CENTER_V31_MARKER
   Physically center status indicator inside STATUS column.
   ======================================================================== */
@media (min-width:769px) {

  .group-card .desktop-table tbody td.wd-status-dot-cell {
    display:table-cell !important;
    text-align:center !important;
    vertical-align:middle !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .group-card .desktop-table tbody td.wd-status-dot-cell > .wd-status-dot-only {
    position:relative !important;
    left:0 !important;
    right:auto !important;

    display:block !important;
    width:11px !important;
    min-width:11px !important;
    max-width:11px !important;
    height:11px !important;
    min-height:11px !important;
    max-height:11px !important;

    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    gap:0 !important;
  }

}

/* ========================================================================
   WEBDESK_DESKTOP_STATUS_CENTER_V31_MARKER
   Physically center status indicator inside STATUS column.
   ======================================================================== */
@media (min-width:769px) {

  .group-card .desktop-table tbody td.wd-status-dot-cell {
    display:table-cell !important;
    text-align:center !important;
    vertical-align:middle !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .group-card .desktop-table tbody td.wd-status-dot-cell > .wd-status-dot-only {
    position:relative !important;
    left:0 !important;
    right:auto !important;

    display:block !important;
    width:11px !important;
    min-width:11px !important;
    max-width:11px !important;
    height:11px !important;
    min-height:11px !important;
    max-height:11px !important;

    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    gap:0 !important;
  }

}

/* ========================================================================
   WEBDESK_DESKTOP_STATUS_CENTER_V31_MARKER
   Physically center status indicator inside STATUS column.
   ======================================================================== */
@media (min-width:769px) {

  .group-card .desktop-table tbody td.wd-status-dot-cell {
    display:table-cell !important;
    text-align:center !important;
    vertical-align:middle !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .group-card .desktop-table tbody td.wd-status-dot-cell > .wd-status-dot-only {
    position:relative !important;
    left:0 !important;
    right:auto !important;

    display:block !important;
    width:11px !important;
    min-width:11px !important;
    max-width:11px !important;
    height:11px !important;
    min-height:11px !important;
    max-height:11px !important;

    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    gap:0 !important;
  }

}

/* ========================================================================
   WEBDESK_DESKTOP_STATUS_SINGLE_DOT_V32_MARKER
   One physical status dot only. Remove legacy ::before indicator.
   ======================================================================== */
@media (min-width:769px) {

  .group-card .desktop-table .wd-status-dot-only::before,
  .group-card .desktop-table .wd-status-dot-only::after {
    display:none !important;
    content:none !important;
    width:0 !important;
    height:0 !important;
  }

  .group-card .desktop-table .wd-status-dot-only {
    width:11px !important;
    min-width:11px !important;
    max-width:11px !important;

    height:11px !important;
    min-height:11px !important;
    max-height:11px !important;

    border-radius:50% !important;
  }

  .group-card .desktop-table .wd-status-dot-only.online {
    background:#35df91 !important;
    box-shadow:0 0 12px rgba(53,223,145,.55) !important;
  }

  .group-card .desktop-table .wd-status-dot-only.offline {
    background:#ff5364 !important;
    box-shadow:0 0 12px rgba(255,83,100,.50) !important;
  }

}

/* ========================================================================
   WEBDESK_DESKTOP_HOSTNAME_DESCENDER_V33_MARKER
   Prevent clipping of descenders such as Y/g/j/p/q.
   ======================================================================== */
@media (min-width:769px) {

  .group-card .desktop-table .wd-device-hostname {
    line-height:1.35 !important;
    height:auto !important;
    min-height:0 !important;

    overflow:visible !important;
    text-overflow:clip !important;

    padding-top:2px !important;
    padding-bottom:2px !important;
  }

}

/* WEBDESK_DESKTOP_HOSTNAME_NORMAL_WEIGHT_V34_MARKER */
@media (min-width:769px) {
  .group-card .desktop-table .wd-device-hostname {
    font-weight:400 !important;
  }
}

/* WEBDESK_DESKTOP_HOSTNAME_NORMAL_WEIGHT_V34_MARKER */
@media (min-width:769px) {
  .group-card .desktop-table .wd-device-hostname {
    font-weight:400 !important;
  }
}

/* ========================================================================
   WEBDESK_DESKTOP_ROW_TYPOGRAPHY_V35_MARKER
   Exact same typography for all primary desktop row text:
   HOSTNAME / RUSTDESK / ANYDESK / DEPOT / VERSION / LAST SEEN
   ======================================================================== */
@media (min-width:769px) {

  .group-card .desktop-table .wd-device-hostname,

  .group-card .desktop-table tbody td:nth-child(3),
  .group-card .desktop-table tbody td:nth-child(3) a,

  .group-card .desktop-table tbody td:nth-child(4),
  .group-card .desktop-table tbody td:nth-child(4) a,

  .group-card .desktop-table tbody td:nth-child(5) .wd-device-primary-text,
  .group-card .desktop-table tbody td:nth-child(6) .wd-device-primary-text,
  .group-card .desktop-table tbody td:nth-child(10) .wd-device-primary-text {

    font-family:Inter, "Segoe UI", Arial, sans-serif !important;
    font-size:15.5px !important;
    font-weight:400 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;

    font-style:normal !important;
    font-variant:normal !important;
    text-transform:none !important;

    color:#c8ceda !important;
    -webkit-text-fill-color:#c8ceda !important;
  }

  /* Keep hostname descenders such as Y/g/j/p/q fully visible */
  .group-card .desktop-table .wd-device-hostname {
    height:auto !important;
    min-height:0 !important;
    padding-top:2px !important;
    padding-bottom:2px !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

}

/* ========================================================================
   WEBDESK_DESKTOP_HOSTNAME_WIDTH_V36_MARKER
   More room for longer hostnames such as TSM26-HUXLEY.
   ======================================================================== */
@media (min-width:769px) {

  /* HOSTNAME */
  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width:9% !important;
    overflow:visible !important;
  }

  .group-card .desktop-table .wd-device-hostname {
    max-width:none !important;
    width:auto !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

  /* Take the extra space from TAGS */
  .group-card .desktop-table th:nth-child(11),
  .group-card .desktop-table td:nth-child(11) {
    width:16% !important;
  }

}

/* ========================================================================
   WEBDESK_DESKTOP_VERSION_WIDTH_V37_MARKER
   Keep HOSTNAME at working width.
   Give VERSION more room by slightly reducing RustDesk + AnyDesk.
   ======================================================================== */
@media (min-width:769px) {

  /* HOSTNAME — keep V36 working width */
  .group-card .desktop-table th:nth-child(2),
  .group-card .desktop-table td:nth-child(2) {
    width:9% !important;
  }

  /* RUSTDESK */
  .group-card .desktop-table th:nth-child(3),
  .group-card .desktop-table td:nth-child(3) {
    width:8% !important;
  }

  /* ANYDESK */
  .group-card .desktop-table th:nth-child(4),
  .group-card .desktop-table td:nth-child(4) {
    width:8% !important;
  }

  /* VERSION */
  .group-card .desktop-table th:nth-child(6),
  .group-card .desktop-table td:nth-child(6) {
    width:11.5% !important;
  }

  .group-card .desktop-table td:nth-child(6),
  .group-card .desktop-table td:nth-child(6) .wd-device-primary-text {
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

}

/* ========================================================================
   WEBDESK_DESKTOP_CONTROL_CENTER_D_V1_MARKER
   Professional compact desktop control center.
   Authenticated desktop only — mobile and login remain untouched.
   ======================================================================== */
@media (min-width:769px) {

  /* ============================================================
     CONTROL CENTER SHELL
     ============================================================ */

  .wd-header.wd-authenticated {
    position:relative !important;
    margin:0 0 14px !important;
    padding:14px !important;

    border:1px solid rgba(255,255,255,.075) !important;
    border-radius:18px !important;

    background:
      radial-gradient(circle at 12% -40%, rgba(255,255,255,.045), transparent 32%),
      linear-gradient(180deg, rgba(19,20,24,.96), rgba(10,11,14,.96)) !important;

    box-shadow:
      0 14px 38px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.025) !important;

    overflow:visible !important;
  }


  /* ============================================================
     TOP ROW
     ============================================================ */

  .wd-header.wd-authenticated .wd-header-main {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;
    min-height:54px !important;

    margin:0 !important;
    padding:0 2px 13px !important;

    gap:24px !important;

    border-bottom:1px solid rgba(255,255,255,.065) !important;
  }

  .wd-header.wd-authenticated .wd-brand {
    display:flex !important;
    align-items:center !important;

    flex:0 0 auto !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;
  }

  .wd-header.wd-authenticated .wd-brand .brand-logo {
    display:block !important;

    width:auto !important;
    max-width:225px !important;
    height:43px !important;

    object-fit:contain !important;

    margin:0 !important;
  }


  /* ============================================================
     TOP-RIGHT CONTROLS
     ============================================================ */

  .wd-header.wd-authenticated .wd-header-tools {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;

    width:auto !important;
    min-width:0 !important;

    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .wd-header.wd-authenticated .wd-header-tools > .wd-control {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;

    width:auto !important;
    min-width:0 !important;
    min-height:38px !important;

    gap:8px !important;
    margin:0 !important;
    padding:5px 7px 5px 10px !important;

    border:1px solid rgba(255,255,255,.075) !important;
    border-radius:10px !important;

    background:rgba(255,255,255,.025) !important;
    box-shadow:none !important;
  }

  .wd-header.wd-authenticated .wd-control-label {
    margin:0 !important;

    font-size:10px !important;
    font-weight:600 !important;
    line-height:1 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;

    color:#858c99 !important;
    white-space:nowrap !important;
  }

  .wd-header.wd-authenticated .wd-control select,
  .wd-header.wd-authenticated .wd-control select.theme-select {
    width:auto !important;
    min-width:100px !important;
    max-width:145px !important;

    height:28px !important;
    min-height:28px !important;

    margin:0 !important;
    padding:0 25px 0 9px !important;

    border:0 !important;
    border-radius:7px !important;

    background-color:rgba(255,255,255,.045) !important;

    font-size:12px !important;
    font-weight:400 !important;

    color:#d8dce5 !important;
    box-shadow:none !important;
  }

  .wd-header.wd-authenticated .wd-header-tools > .btn,
  .wd-header.wd-authenticated .wd-user-box {
    min-height:38px !important;
    height:38px !important;

    margin:0 !important;

    border-radius:10px !important;
  }

  .wd-header.wd-authenticated .wd-header-tools > .btn {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 13px !important;

    font-size:12px !important;
    font-weight:500 !important;
  }


  /* ============================================================
     USER / LOGOUT
     ============================================================ */

  .wd-header.wd-authenticated .wd-user-box {
    display:flex !important;
    align-items:center !important;

    gap:9px !important;

    padding:4px 5px 4px 11px !important;

    border:1px solid rgba(255,255,255,.075) !important;
    background:rgba(255,255,255,.025) !important;
  }

  .wd-header.wd-authenticated .wd-user-dot {
    width:7px !important;
    height:7px !important;
    min-width:7px !important;

    border-radius:50% !important;

    background:#35df91 !important;
    box-shadow:0 0 8px rgba(53,223,145,.32) !important;
  }

  .wd-header.wd-authenticated .wd-user-text {
    font-size:12px !important;
    font-weight:400 !important;
    line-height:1 !important;

    color:#c8ceda !important;
    white-space:nowrap !important;
  }

  .wd-header.wd-authenticated .wd-user-box button {
    height:28px !important;

    margin:0 !important;
    padding:0 10px !important;

    border:1px solid rgba(255,255,255,.075) !important;
    border-radius:7px !important;

    background:rgba(255,255,255,.04) !important;

    font-size:11px !important;
    font-weight:500 !important;

    color:#c8ceda !important;
  }


  /* ============================================================
     FILTER TOOLBAR
     ============================================================ */

  .wd-header.wd-authenticated .wd-filterbar {
    display:flex !important;
    align-items:center !important;

    width:100% !important;

    gap:8px !important;

    margin:0 !important;
    padding:13px 2px 0 !important;

    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .wd-header.wd-authenticated .wd-search-wrap {
    flex:1 1 420px !important;
    min-width:260px !important;

    height:40px !important;

    margin:0 !important;

    border-radius:10px !important;
  }

  .wd-header.wd-authenticated .wd-search-wrap input {
    height:40px !important;

    font-size:12.5px !important;
    font-weight:400 !important;
  }

  .wd-header.wd-authenticated .wd-filterbar > select {
    flex:0 0 auto !important;

    height:40px !important;
    min-height:40px !important;

    margin:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;

    border-radius:10px !important;

    font-size:12px !important;
    font-weight:400 !important;
  }

  .wd-header.wd-authenticated #siteFilterSelect {
    min-width:150px !important;
  }

  .wd-header.wd-authenticated #stateFilterSelect {
    min-width:115px !important;
  }

  .wd-header.wd-authenticated #sortFilterSelect {
    min-width:145px !important;
  }


  /* ============================================================
     SITE ACTIONS
     ============================================================ */

  .wd-header.wd-authenticated .wd-site-actions {
    display:flex !important;
    align-items:center !important;

    flex:0 0 auto !important;

    gap:5px !important;

    margin:0 !important;
    padding:0 7px !important;

    border-left:1px solid rgba(255,255,255,.07) !important;
    border-right:1px solid rgba(255,255,255,.07) !important;
  }

  .wd-header.wd-authenticated .wd-site-actions .btn {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:40px !important;
    min-height:40px !important;

    margin:0 !important;
    padding:0 10px !important;

    border-radius:9px !important;

    font-size:11.5px !important;
    font-weight:400 !important;
    white-space:nowrap !important;
  }


  /* ============================================================
     APPLY / RESET
     ============================================================ */

  .wd-header.wd-authenticated .wd-apply,
  .wd-header.wd-authenticated .wd-clear-filters {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:40px !important;
    min-height:40px !important;

    margin:0 !important;
    padding:0 15px !important;

    border-radius:10px !important;

    font-size:12px !important;
    font-weight:600 !important;
  }


  /* ============================================================
     KPI / SUMMARY STRIP
     ============================================================ */

  body > .summary-grid {
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;

    gap:10px !important;

    margin:0 0 14px !important;
  }

  body > .summary-grid .summary-link {
    min-width:0 !important;
  }

  body > .summary-grid .summary-box {
    position:relative !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;
    min-height:72px !important;
    height:72px !important;

    margin:0 !important;
    padding:0 18px !important;

    box-sizing:border-box !important;

    border:1px solid rgba(255,255,255,.07) !important;
    border-radius:14px !important;

    background:
      linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.018),
      0 8px 24px rgba(0,0,0,.10) !important;
  }

  body > .summary-grid .summary-head {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:auto !important;

    gap:9px !important;
    margin:0 !important;
  }

  body > .summary-grid .summary-label {
    order:2 !important;

    font-size:10.5px !important;
    font-weight:600 !important;
    line-height:1 !important;
    letter-spacing:.065em !important;

    color:#8e95a2 !important;
  }

  body > .summary-grid .summary-indicator {
    order:1 !important;

    width:8px !important;
    height:8px !important;
    min-width:8px !important;

    margin:0 !important;
  }

  body > .summary-grid .summary-value {
    margin:0 !important;

    font-size:28px !important;
    font-weight:400 !important;
    line-height:1 !important;
    letter-spacing:-.03em !important;

    color:#e8ebf2 !important;
  }

  body > .summary-grid .summary-box:hover {
    transform:none !important;

    border-color:rgba(255,255,255,.12) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.018)) !important;
  }

}

/* ========================================================================
   WEBDESK_DESKTOP_CONTROL_CENTER_D_V2_MARKER
   Modern Control Center — reference layout
   Desktop authenticated dashboard only.
   ======================================================================== */
@media (min-width:769px) {

  /* ---------- MAIN CONTROL CENTER ---------- */

  .wd-header.wd-authenticated {
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;

    margin:0 0 18px !important;
    padding:18px 20px 20px !important;

    border:1px solid rgba(255,255,255,.075) !important;
    border-radius:18px !important;

    background:
      radial-gradient(circle at 9% -25%,
        rgba(212,175,55,.055),
        transparent 28%),
      linear-gradient(180deg,
        rgba(18,19,22,.98),
        rgba(8,9,11,.98)) !important;

    box-shadow:
      0 16px 45px rgba(0,0,0,.20),
      inset 0 1px 0 rgba(255,255,255,.025) !important;

    overflow:visible !important;
  }


  /* ---------- TOP ROW ---------- */

  .wd-header.wd-authenticated .wd-header-main {
    display:flex !important;
    grid-template-columns:none !important;

    align-items:center !important;
    justify-content:space-between !important;

    width:100% !important;
    min-height:62px !important;

    gap:24px !important;

    margin:0 !important;
    padding:0 0 16px !important;

    border-bottom:1px solid rgba(255,255,255,.065) !important;
  }


  /* ---------- BRAND ---------- */

  .wd-header.wd-authenticated .wd-brand {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    flex:0 0 auto !important;

    gap:17px !important;

    min-width:330px !important;

    margin:0 !important;
    padding:0 !important;
  }

  .wd-header.wd-authenticated .wd-brand .brand-logo {
    display:block !important;

    width:220px !important;
    min-width:220px !important;
    max-width:220px !important;

    height:auto !important;
    max-height:58px !important;

    object-fit:contain !important;

    margin:0 !important;
  }

  .wd-control-center-brand {
    display:flex !important;
    align-items:center !important;

    gap:15px !important;

    height:45px !important;
  }

  .wd-control-center-divider {
    display:block !important;

    width:1px !important;
    height:38px !important;

    background:linear-gradient(
      180deg,
      transparent,
      rgba(255,255,255,.16) 20%,
      rgba(255,255,255,.16) 80%,
      transparent
    ) !important;
  }

  .wd-control-center-copy {
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    gap:3px !important;

    white-space:nowrap !important;
  }

  .wd-control-center-title {
    font-size:17px !important;
    line-height:1 !important;
    font-weight:500 !important;
    letter-spacing:-.015em !important;

    color:#e5e8ef !important;
  }

  .wd-control-center-subtitle {
    font-size:9px !important;
    line-height:1 !important;
    font-weight:600 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;

    color:#727985 !important;
  }


  /* ---------- HEADER CONTROLS ---------- */

  .wd-header.wd-authenticated .wd-header-tools {
    display:flex !important;
    grid-template-columns:none !important;
    flex-direction:row !important;

    align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;

    width:auto !important;
    min-width:0 !important;

    gap:7px !important;

    margin:0 !important;
    padding:0 !important;
  }

  .wd-header.wd-authenticated .wd-header-tools > .wd-control {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;

    width:auto !important;
    min-width:0 !important;
    min-height:36px !important;
    height:36px !important;

    gap:7px !important;

    margin:0 !important;
    padding:4px 5px 4px 9px !important;

    border:1px solid rgba(255,255,255,.07) !important;
    border-radius:9px !important;

    background:rgba(255,255,255,.025) !important;
  }

  .wd-header.wd-authenticated .wd-control-label {
    font-size:9px !important;
    font-weight:600 !important;
    letter-spacing:.055em !important;
    line-height:1 !important;
    text-transform:uppercase !important;

    color:#767d89 !important;
  }

  .wd-header.wd-authenticated .wd-control select,
  .wd-header.wd-authenticated .wd-control select.theme-select {
    width:auto !important;
    min-width:84px !important;
    max-width:120px !important;

    height:26px !important;
    min-height:26px !important;

    padding:0 23px 0 8px !important;
    margin:0 !important;

    border:0 !important;
    border-radius:6px !important;

    background-color:rgba(255,255,255,.045) !important;

    font-size:11px !important;
    font-weight:400 !important;

    color:#d4d8e0 !important;

    box-shadow:none !important;
  }

  .wd-header.wd-authenticated .wd-header-tools > .btn {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex:0 0 auto !important;

    height:36px !important;
    min-height:36px !important;

    padding:0 11px !important;
    margin:0 !important;

    border-radius:9px !important;

    font-size:11px !important;
    font-weight:500 !important;

    white-space:nowrap !important;
  }


  /* ---------- USER ---------- */

  .wd-header.wd-authenticated .wd-user-box {
    display:flex !important;
    grid-template-columns:none !important;

    align-items:center !important;

    flex:0 0 auto !important;

    height:36px !important;
    min-height:36px !important;

    gap:7px !important;

    margin:0 !important;
    padding:3px 4px 3px 9px !important;

    border:1px solid rgba(255,255,255,.07) !important;
    border-radius:9px !important;

    background:rgba(255,255,255,.025) !important;
  }

  .wd-header.wd-authenticated .wd-user-dot {
    width:7px !important;
    min-width:7px !important;
    height:7px !important;

    border-radius:50% !important;

    background:#35df91 !important;

    box-shadow:0 0 8px rgba(53,223,145,.32) !important;
  }

  .wd-header.wd-authenticated .wd-user-text {
    font-size:11px !important;
    font-weight:400 !important;

    color:#bec4cf !important;

    white-space:nowrap !important;
  }

  .wd-header.wd-authenticated .wd-user-box button {
    height:26px !important;

    padding:0 8px !important;
    margin:0 !important;

    border:1px solid rgba(255,255,255,.065) !important;
    border-radius:6px !important;

    background:rgba(255,255,255,.035) !important;

    font-size:10px !important;

    color:#b8bec9 !important;
  }


  /* ---------- FILTER BAR ---------- */

  .wd-header.wd-authenticated .wd-filterbar {
    display:grid !important;

    grid-template-columns:
      minmax(260px,1fr)
      135px
      auto
      105px
      125px
      auto !important;

    align-items:center !important;

    width:100% !important;
    min-width:0 !important;

    gap:7px !important;

    margin:0 !important;
    padding:14px 0 !important;

    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.055) !important;

    background:transparent !important;

    box-shadow:none !important;
  }

  .wd-header.wd-authenticated .wd-search-wrap {
    width:100% !important;
    min-width:0 !important;

    height:38px !important;

    margin:0 !important;

    border-radius:9px !important;
  }

  .wd-header.wd-authenticated .wd-search-wrap input {
    width:100% !important;
    height:38px !important;

    padding-top:0 !important;
    padding-bottom:0 !important;

    font-size:11.5px !important;
  }

  .wd-header.wd-authenticated .wd-filterbar > select {
    width:100% !important;
    min-width:0 !important;

    height:38px !important;
    min-height:38px !important;

    margin:0 !important;

    border-radius:9px !important;

    font-size:11px !important;
  }

  .wd-header.wd-authenticated #siteFilterSelect,
  .wd-header.wd-authenticated #stateFilterSelect,
  .wd-header.wd-authenticated #sortFilterSelect {
    min-width:0 !important;
  }


  /* ---------- SITE ACTION GROUP ---------- */

  .wd-header.wd-authenticated .wd-site-actions {
    display:flex !important;
    align-items:center !important;

    width:auto !important;
    min-width:0 !important;

    gap:5px !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
  }

  .wd-header.wd-authenticated .wd-site-actions .btn {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:0 !important;

    height:38px !important;
    min-height:38px !important;

    padding:0 9px !important;
    margin:0 !important;

    border-radius:8px !important;

    font-size:10.5px !important;
    font-weight:400 !important;

    white-space:nowrap !important;
  }


  /* ---------- APPLY ---------- */

  .wd-header.wd-authenticated .wd-apply,
  .wd-header.wd-authenticated .wd-clear-filters {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;

    height:38px !important;
    min-height:38px !important;

    padding:0 13px !important;
    margin:0 !important;

    border-radius:9px !important;

    font-size:11px !important;
    font-weight:600 !important;

    white-space:nowrap !important;
  }


  /* ---------- KPI ROW INSIDE CONTROL CENTER ---------- */

  .wd-header.wd-authenticated > .summary-grid {
    display:grid !important;

    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    width:100% !important;

    gap:10px !important;

    margin:0 !important;
    padding:14px 0 0 !important;
  }

  .wd-header.wd-authenticated > .summary-grid .summary-link {
    display:block !important;

    min-width:0 !important;

    margin:0 !important;

    text-decoration:none !important;
  }

  .wd-header.wd-authenticated > .summary-grid .summary-box {
    position:relative !important;

    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-rows:auto auto !important;

    align-items:center !important;

    width:100% !important;
    height:82px !important;
    min-height:82px !important;

    box-sizing:border-box !important;

    margin:0 !important;
    padding:13px 16px !important;

    overflow:hidden !important;

    border:1px solid rgba(255,255,255,.065) !important;
    border-top:1px solid rgba(255,255,255,.075) !important;
    border-radius:12px !important;

    background:
      radial-gradient(circle at 100% 100%,
        rgba(255,255,255,.025),
        transparent 42%),
      linear-gradient(180deg,
        rgba(255,255,255,.025),
        rgba(255,255,255,.012)) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.015),
      0 6px 18px rgba(0,0,0,.08) !important;
  }

  .wd-header.wd-authenticated > .summary-grid .summary-box::before {
    content:"" !important;

    position:absolute !important;

    left:0 !important;
    right:auto !important;
    top:15px !important;
    bottom:15px !important;

    width:2px !important;
    height:auto !important;

    border-radius:999px !important;

    background:#c9a53a !important;

    opacity:.72 !important;
  }

  .wd-header.wd-authenticated > .summary-grid .live-box::before {
    background:#35d58a !important;
  }

  .wd-header.wd-authenticated > .summary-grid .offline-box::before {
    background:#ed626c !important;
  }

  .wd-header.wd-authenticated > .summary-grid .summary-head {
    grid-column:1 !important;
    grid-row:1 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    width:auto !important;

    gap:7px !important;

    margin:0 !important;
    padding:0 !important;
  }

  .wd-header.wd-authenticated > .summary-grid .summary-label {
    order:2 !important;

    font-size:9.5px !important;
    font-weight:600 !important;
    line-height:1 !important;

    letter-spacing:.08em !important;
    text-transform:uppercase !important;

    color:#7e8591 !important;
  }

  .wd-header.wd-authenticated > .summary-grid .summary-indicator {
    order:1 !important;

    width:7px !important;
    min-width:7px !important;
    height:7px !important;

    margin:0 !important;
  }

  .wd-header.wd-authenticated > .summary-grid .summary-value {
    grid-column:1 !important;
    grid-row:2 !important;

    align-self:end !important;

    margin:5px 0 0 !important;

    font-size:30px !important;
    font-weight:400 !important;
    line-height:.9 !important;
    letter-spacing:-.035em !important;

    color:#e7eaf0 !important;
  }


  /* decorative Control Center telemetry line */

  .wd-header.wd-authenticated > .summary-grid .summary-box::after {
    content:"" !important;

    position:absolute !important;

    right:14px !important;
    bottom:17px !important;

    width:78px !important;
    height:25px !important;

    opacity:.18 !important;

    background:
      linear-gradient(
        135deg,
        transparent 0 8%,
        #c9a53a 9% 11%,
        transparent 12% 25%,
        #c9a53a 26% 28%,
        transparent 29% 42%,
        #c9a53a 43% 45%,
        transparent 46% 58%,
        #c9a53a 59% 61%,
        transparent 62%
      ) !important;

    pointer-events:none !important;
  }

  .wd-header.wd-authenticated > .summary-grid .live-box::after {
    background:
      linear-gradient(
        135deg,
        transparent 0 8%,
        #35d58a 9% 11%,
        transparent 12% 25%,
        #35d58a 26% 28%,
        transparent 29% 42%,
        #35d58a 43% 45%,
        transparent 46% 58%,
        #35d58a 59% 61%,
        transparent 62%
      ) !important;
  }

  .wd-header.wd-authenticated > .summary-grid .offline-box::after {
    background:
      linear-gradient(
        135deg,
        transparent 0 8%,
        #ed626c 9% 11%,
        transparent 12% 25%,
        #ed626c 26% 28%,
        transparent 29% 42%,
        #ed626c 43% 45%,
        transparent 46% 58%,
        #ed626c 59% 61%,
        transparent 62%
      ) !important;
  }

  .wd-header.wd-authenticated > .summary-grid .summary-box:hover {
    transform:none !important;

    border-color:rgba(255,255,255,.12) !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.038),
        rgba(255,255,255,.018)
      ) !important;
  }

}


/* ========================================================================
   Keep the existing mobile dashboard layout unchanged.
   New Control Center brand is desktop-only.
   ======================================================================== */

@media (max-width:768px) {

  .wd-control-center-brand {
    display:none !important;
  }

  .wd-header.wd-authenticated > .summary-grid {
    margin-top:12px !important;
  }

}

/* WEBDESK_CONTROL_CENTER_LOGO_SCALE_V3_MARKER */
@media (min-width:769px) {

  .wd-header.wd-authenticated .wd-header-main {
    min-height:54px !important;
    padding-bottom:12px !important;
  }

  .wd-header.wd-authenticated .wd-brand {
    min-width:350px !important;
    gap:16px !important;
  }

  .wd-header.wd-authenticated .wd-brand .brand-logo {
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;

    height:auto !important;
    max-height:none !important;

    object-fit:contain !important;
  }

  .wd-header.wd-authenticated .wd-control-center-divider {
    height:34px !important;
  }

  .wd-header.wd-authenticated .wd-control-center-title {
    font-size:18px !important;
  }

  .wd-header.wd-authenticated .wd-control-center-subtitle {
    font-size:9px !important;
  }

}

/* ==========================================================
   WEBDESK_GLOBAL_PROFIT_UI_V1_CSS_MARKER
   Global Total Profit inside TOTAL DEVICES KPI
   ========================================================== */

.wd-global-profit {
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-top:5px;
  white-space:nowrap;
  line-height:1.15;
}

.wd-global-profit-label {
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  opacity:.58;
}

.wd-global-profit strong {
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
}

.wd-global-profit-devices {
  font-size:9px;
  opacity:.52;
}

@media (max-width:768px) {
  .wd-global-profit {
    gap:5px;
    margin-top:4px;
    flex-wrap:wrap;
    white-space:normal;
  }

  .wd-global-profit-label {
    font-size:8px;
  }

  .wd-global-profit strong {
    font-size:10px;
  }

  .wd-global-profit-devices {
    font-size:8px;
  }
}


/* ==========================================================
   WEBDESK_MOBILE_PROFIT_SPACE_V1_CSS_MARKER
   More horizontal room for site Total Profit on mobile
   ========================================================== */
@media (max-width:768px) {
  .group-card .wd-group-meta .wd-group-device-count {
    display:none !important;
  }

  .group-card .wd-group-meta .wd-group-profit-separator {
    display:none !important;
  }

  .group-card .wd-group-meta {
    width:100% !important;
  }

  .group-card .wd-group-profit {
    max-width:100% !important;
  }
}

/* ==========================================================
   WEBDESK_MOBILE_TOTAL_PROFIT_HEIGHT_V1_MARKER
   Let TOTAL DEVICES KPI grow to contain Global Total Profit
   ========================================================== */
@media (max-width:768px) {

  .wd-header.wd-authenticated > .summary-grid
  .summary-link:first-child {
    height:auto !important;
    min-height:0 !important;
  }

  .wd-header.wd-authenticated > .summary-grid
  .summary-link:first-child .summary-box {
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    padding-bottom:14px !important;
  }

  .wd-header.wd-authenticated > .summary-grid
  .summary-link:first-child .wd-global-profit {
    position:relative !important;
    z-index:2 !important;
    margin-top:5px !important;
    padding-bottom:0 !important;
  }
}


/* ==========================================================
   WEBDESK_MOBILE_SUMMARY_SYMMETRIC_V1_MARKER
   Equal-height mobile KPI cards
   ========================================================== */
@media (max-width:768px) {

  .wd-header.wd-authenticated > .summary-grid {
    align-items:stretch !important;
  }

  .wd-header.wd-authenticated > .summary-grid > .summary-link {
    height:100% !important;
    min-height:0 !important;
  }

  .wd-header.wd-authenticated > .summary-grid > .summary-link > .summary-box {
    height:100% !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    padding-bottom:14px !important;
  }

}

/* ==========================================================
   WEBDESK_MOBILE_PROFIT_SCROLL_V1_MARKER
   Slowly reveal long Total Profit text on mobile
   ========================================================== */
@media (max-width:768px) {

  .group-card .wd-group-meta {
    display:block !important;
    overflow:hidden !important;
    min-width:0 !important;
  }

  .group-card .wd-group-profit {
    display:inline-block !important;
    width:max-content !important;
    max-width:none !important;
    white-space:nowrap !important;

    animation:wdMobileProfitScroll 9s ease-in-out infinite;
  }

  @keyframes wdMobileProfitScroll {
    0%,
    18% {
      transform:translateX(0);
    }

    72%,
    88% {
      transform:translateX(
        min(0px, calc(100vw - 100% - 125px))
      );
    }

    100% {
      transform:translateX(0);
    }
  }

  @media (prefers-reduced-motion:reduce) {
    .group-card .wd-group-profit {
      animation:none !important;
    }
  }
}

/* ==========================================================
   WEBDESK_MOBILE_PROFIT_TYPOGRAPHY_V1_MARKER
   Unified Total Profit typography on all mobile site cards
   ========================================================== */
@media (max-width:768px) {

  .group-card .wd-group-meta {
    font-size:12px !important;
    line-height:1.25 !important;
  }

  .group-card .wd-group-profit {
    font-size:12px !important;
    line-height:1.25 !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
  }

  .group-card .wd-group-profit strong {
    font-size:12px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
  }

  .group-card .wd-group-profit-eur,
  .group-card .wd-group-profit-eur strong {
    font-size:12px !important;
    line-height:1.25 !important;
  }

}

/* ==========================================================
   WEBDESK_MOBILE_PROFIT_TEXT_AUTOSIZE_FIX_V1_MARKER
   Prevent iOS Safari from enlarging parts of marquee text
   ========================================================== */
@media (max-width:768px) {

  .group-card .wd-group-meta,
  .group-card .wd-group-profit,
  .group-card .wd-group-profit *,
  .group-card .wd-group-profit strong,
  .group-card .wd-group-profit-eur,
  .group-card .wd-group-profit-eur strong {
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

  .group-card .wd-group-profit,
  .group-card .wd-group-profit strong,
  .group-card .wd-group-profit-eur,
  .group-card .wd-group-profit-eur strong {
    font-size:12px !important;
    line-height:15px !important;
  }

}

/* ==========================================================
   WEBDESK_MOBILE_KPI_VALUE_ALIGN_V1_MARKER
   Align TOTAL / ONLINE / OFFLINE values on the same row
   ========================================================== */
@media (max-width:768px) {

  .wd-header.wd-authenticated > .summary-grid
  .summary-box {
    display:block !important;
  }

  .wd-header.wd-authenticated > .summary-grid
  .summary-box > .summary-value {
    margin-top:14px !important;
  }

  .wd-header.wd-authenticated > .summary-grid
  .total-box > .summary-value {
    margin-top:14px !important;
  }

  .wd-header.wd-authenticated > .summary-grid
  .live-box > .summary-value,
  .wd-header.wd-authenticated > .summary-grid
  .offline-box > .summary-value {
    margin-top:14px !important;
  }

}

/* WEBDESK_DEVICE_PROFIT_OVERVIEW_CSS_V1_MARKER */

.wd-device-profit-card {
  position:relative;
  overflow:hidden;
}

.wd-device-profit-main {
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-top:14px;
  min-width:0;
}

.wd-device-profit-main strong {
  font-size:22px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.02em;
  white-space:nowrap;
}

.wd-device-profit-main span {
  font-size:12px;
  font-weight:800;
  opacity:.72;
  white-space:nowrap;
}

.wd-device-profit-eur {
  margin-top:7px;
  font-size:14px;
  line-height:1.3;
  font-weight:700;
}

.wd-device-profit-updated {
  margin-top:10px;
  font-size:11px;
  line-height:1.35;
  opacity:.58;
}

@media (max-width:768px) {
  .wd-device-profit-main strong {
    font-size:20px;
  }
}


/* WEBDESK_DEVICE_PROFIT_HEADER_V2_CSS_MARKER */

.wd-device-profit-header {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 7px;
  margin-top:7px;
  min-height:17px;
  font-size:12px;
  line-height:1.35;
}

.wd-device-profit-header-label {
  color:rgba(255,255,255,.48);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.wd-device-profit-header > strong {
  color:rgba(255,255,255,.92);
  font-size:13px;
  font-weight:800;
}

.wd-device-profit-header-eur {
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:600;
}

.wd-device-profit-header-updated {
  color:rgba(255,255,255,.40);
  font-size:10px;
}

@media (max-width:768px) {
  .wd-device-profit-header {
    margin-top:6px;
    gap:3px 6px;
  }

  .wd-device-profit-header-updated {
    flex-basis:100%;
  }
}


/* WEBDESK_DEVICE_PROFIT_HEADER_TWO_LINES_V3_MARKER */

.wd-device-profit-header {
  display:grid !important;
  grid-template-columns:max-content max-content max-content max-content;
  align-items:baseline;
  justify-content:start;
  column-gap:7px;
  row-gap:4px;
}

.wd-device-profit-header-label,
.wd-device-profit-header > strong,
#wdvProfitCurrency,
.wd-device-profit-header-eur {
  grid-row:1;
  white-space:nowrap;
}

.wd-device-profit-header-updated {
  grid-row:2;
  grid-column:1 / -1;
  white-space:nowrap;
  margin:0 !important;
}

@media (max-width:768px) {
  .wd-device-profit-header {
    grid-template-columns:max-content max-content max-content max-content;
    column-gap:6px;
    row-gap:5px;
  }

  .wd-device-profit-header-updated {
    grid-column:1 / -1;
  }
}


/* WEBDESK_MOBILE_PROFIT_HEADER_NO_OVERLAP_V4_MARKER */

@media (max-width:760px) {

  .wd-device-dialog-header {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    align-items:start !important;
    column-gap:10px !important;
    row-gap:0 !important;
  }

  .wd-device-heading {
    grid-column:1 !important;
    min-width:0 !important;
    width:100% !important;
  }

  .wd-device-heading-text {
    min-width:0 !important;
    width:100% !important;
  }

  .wd-device-header-actions {
    grid-column:2 !important;
    grid-row:1 !important;

    align-self:center !important;

    margin-left:0 !important;
    flex:none !important;

    position:relative !important;
    z-index:2 !important;
  }

  /*
   * Profit is inside wd-device-heading-text, therefore keep its
   * first line inside the left column and away from the buttons.
   */
  .wd-device-profit-header {
    width:100% !important;
    max-width:100% !important;

    grid-template-columns:
      max-content
      max-content
      max-content
      minmax(0, max-content) !important;

    column-gap:6px !important;

    overflow:visible !important;
  }

  .wd-device-profit-header-label,
  .wd-device-profit-header > strong,
  #wdvProfitCurrency,
  .wd-device-profit-header-eur {
    white-space:nowrap !important;
  }

  .wd-device-profit-header-eur {
    min-width:0 !important;
  }

  .wd-device-profit-header-updated {
    grid-row:2 !important;
    grid-column:1 / -1 !important;
    white-space:nowrap !important;
  }
}


/* WEBDESK_DEVICE_PROFIT_HEADER_LAYOUT_V6_MARKER */

/* Desktop: heading left, actions right, profit below heading */
@media (min-width:761px) {

  .wd-device-dialog-header {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-template-rows:auto auto !important;
    column-gap:18px !important;
    row-gap:5px !important;
    align-items:center !important;
  }

  .wd-device-heading {
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
  }

  .wd-device-header-actions {
    grid-column:2 !important;
    grid-row:1 / 3 !important;
    align-self:center !important;
    margin-left:0 !important;
  }

  .wd-device-profit-header {
    grid-column:1 !important;
    grid-row:2 !important;

    margin-top:0 !important;
    margin-left:28px !important;

    width:max-content !important;
    max-width:100% !important;
  }
}


/* Mobile: profit gets its own full-width row below heading/actions */
@media (max-width:760px) {

  .wd-device-dialog-header {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-template-rows:auto auto !important;

    column-gap:10px !important;
    row-gap:8px !important;

    align-items:center !important;
  }

  .wd-device-heading {
    grid-column:1 !important;
    grid-row:1 !important;

    width:100% !important;
    min-width:0 !important;
  }

  .wd-device-header-actions {
    grid-column:2 !important;
    grid-row:1 !important;

    position:relative !important;

    margin:0 !important;
    align-self:center !important;

    z-index:2 !important;
  }

  .wd-device-profit-header {
    grid-column:1 / -1 !important;
    grid-row:2 !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding-left:42px !important;

    box-sizing:border-box !important;

    display:grid !important;
    grid-template-columns:
      max-content
      max-content
      max-content
      max-content !important;

    justify-content:start !important;
    align-items:baseline !important;

    column-gap:6px !important;
    row-gap:5px !important;

    overflow:visible !important;
  }

  .wd-device-profit-header-label,
  .wd-device-profit-header > strong,
  #wdvProfitCurrency,
  .wd-device-profit-header-eur {
    grid-row:1 !important;
    white-space:nowrap !important;
  }

  .wd-device-profit-header-updated {
    grid-row:2 !important;
    grid-column:1 / -1 !important;

    margin:0 !important;
    white-space:nowrap !important;
  }
}


/* WEBDESK_MOBILE_PROFIT_LEFT_ALIGN_V7_MARKER */
@media (max-width:760px) {
  .wd-device-profit-header {
    padding-left:0 !important;
    margin-left:0 !important;
  }
}


/* WEBDESK_MOBILE_PROFIT_ALIGN_WITH_SUBTITLE_V8_MARKER */
@media (max-width:760px) {
  .wd-device-profit-header {
    padding-left:42px !important;
    margin-left:0 !important;
  }
}


/* WEBDESK_MOBILE_PROFIT_ALIGN_SUBTITLE_V9_MARKER */
@media (max-width:760px) {
  .wd-device-dialog-header > .wd-device-profit-header {
    padding-left:42px !important;
    transform:translateX(-48px) !important;
  }
}

/* WEBDESK_MOBILE_PROFIT_FINAL_ALIGNMENT_V10_MARKER */
@media (max-width:760px) {
  .wd-device-dialog-header > .wd-device-profit-header {
    transform:none !important;
    padding-left:42px !important;
    margin-left:0 !important;
  }
}

/* WEBDESK_MOBILE_PROFIT_EXACT_DEVICE_POSITION_V11_MARKER */
@media (max-width:760px) {
  .wd-device-dialog-header > .wd-device-profit-header {
    transform:none !important;
    margin-left:0 !important;
    padding-left:29px !important;
  }
}

/* WEBDESK_MOBILE_PROFIT_EXACT_HEADING_ALIGN_V12_MARKER */
@media (max-width:760px) {
  .wd-device-dialog-header > .wd-device-profit-header {
    padding-left:19px !important;
    margin-left:0 !important;
    transform:none !important;
  }
}


/* ========================================================================
   WEBDESK_DESKTOP_COMPACT_METRIC_RINGS_V16_MARKER
   Compact CPU / RAM / DISK rings on desktop only.
   ======================================================================== */

@media (min-width:769px) {

  .group-card .desktop-table .table-mini-value.wd-metric-ring {
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;

    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;

    box-shadow:
      0 0 0 1px rgba(255,255,255,.035),
      0 2px 6px rgba(0,0,0,.18) !important;
  }

  .group-card .desktop-table .table-mini-value.wd-metric-ring::before {
    inset:3px !important;
  }

  .group-card .desktop-table .table-mini-value.wd-metric-ring > span {
    font-size:9px !important;
    font-weight:800 !important;
    letter-spacing:-.03em !important;
  }

  .group-card .desktop-table tbody td {
    padding-top:7px !important;
    padding-bottom:7px !important;
  }

}

/* WEBDESK_DESKTOP_COMPACT_METRIC_TEXT_V17_MARKER */
@media (min-width:769px) {
  .group-card .desktop-table .table-mini-value.wd-metric-ring > span {
    font-size:10px !important;
  }
}

/* WEBDESK_SITE_LOCAL_TIME_V1_CSS_MARKER */

.wd-group-local-time {
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

.wd-group-local-time-value {
  font-weight:800;
  color:rgba(255,255,255,.92);
}

.wd-group-local-time-separator {
  opacity:.45;
}

/* Mobile: keep local time visible even though device count is hidden */
@media (max-width:768px) {
  .wd-group-local-time {
    display:inline-flex;
    font-size:inherit;
  }

  .wd-group-local-time-value {
    font-weight:800;
  }

  /* device count is hidden on mobile, therefore its following separator
     must not become the first visible character */
  .wd-group-device-count + .wd-group-local-time-separator {
    display:none;
  }
}


/* WEBDESK_SITE_LOCAL_TIME_OWN_ROW_V2_CSS_MARKER */

.wd-group-heading > .wd-group-local-time {
  display:flex;
  width:100%;
  margin-top:5px;
  margin-bottom:5px;
  line-height:1.2;
  opacity:.92;
}

.wd-group-heading > .wd-group-local-time .wd-group-local-time-value {
  margin-left:4px;
  font-weight:800;
  color:rgba(255,255,255,.96);
}

/* Local time is now its own row; old separator is no longer used */
.wd-group-local-time-separator {
  display:none !important;
}

@media (max-width:768px) {
  .wd-group-heading > .wd-group-local-time {
    display:flex;
    width:100%;
    margin-top:3px;
    margin-bottom:4px;
  }
}


/* ==========================================================
   WEBDESK_MOBILE_LOCAL_TIME_TYPOGRAPHY_V3_MARKER
   Match Local time typography exactly to Total Profit
   ========================================================== */
@media (max-width:768px) {

  .group-card .wd-group-heading > .wd-group-local-time {
    font-size:12px !important;
    line-height:15px !important;
    font-weight:500 !important;
    letter-spacing:0 !important;
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

  .group-card .wd-group-heading > .wd-group-local-time .wd-group-local-time-value {
    font-size:12px !important;
    line-height:15px !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    -webkit-text-size-adjust:100% !important;
    text-size-adjust:100% !important;
  }

}



/* ============================================================
   WEBDESK PROFIT EXCEL EXPORT V1
   WEBDESK_PROFIT_EXCEL_EXPORT_CSS_V1_MARKER
   ============================================================ */

.wd-profit-export-button {
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(96,165,250,.42);
  border-radius:9px;
  background:rgba(59,130,246,.09);
  color:rgba(219,234,254,.98);
  font:inherit;
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  white-space:nowrap;
  transition:
    border-color .15s ease,
    background .15s ease,
    opacity .15s ease;
}

.wd-profit-export-button:hover {
  border-color:rgba(96,165,250,.82);
  background:rgba(59,130,246,.16);
}

.wd-profit-export-button:disabled {
  opacity:.55;
  cursor:wait;
}

@media (max-width:768px) {
  .wd-profit-export-button {
    min-height:34px;
    padding:0 10px;
    font-size:12px !important;
  }
}

/* ============================================================
   END WEBDESK PROFIT EXCEL EXPORT V1
   ============================================================ */

/* WEBDESK_DEVICE_HEADER_PROFIT_FINAL_V14_MARKER */
/* Desktop: heading owns its natural height; Profit starts only below it. */
@media (min-width:761px) {

  .wd-device-dialog-header {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) auto !important;
    grid-template-rows:auto auto !important;

    column-gap:18px !important;
    row-gap:8px !important;

    align-items:start !important;

    padding-top:12px !important;
    padding-bottom:11px !important;

    min-height:0 !important;
  }

  .wd-device-heading {
    grid-column:1 !important;
    grid-row:1 !important;

    display:flex !important;
    align-items:center !important;

    position:relative !important;

    width:auto !important;
    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
  }

  .wd-device-heading-text {
    position:relative !important;

    display:block !important;

    width:auto !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;
  }

  .wd-device-subtitle,
  .wd-device-position {
    position:static !important;
    transform:none !important;
  }

  .wd-device-position {
    display:block !important;
    margin-top:2px !important;
    line-height:1.25 !important;
  }

  .wd-device-profit-header {
    grid-column:1 !important;
    grid-row:2 !important;

    position:relative !important;
    inset:auto !important;
    transform:none !important;

    align-self:start !important;
    justify-self:start !important;

    margin:0 0 0 30px !important;
    padding:0 !important;

    width:max-content !important;
    max-width:calc(100% - 30px) !important;

    clear:both !important;
  }

  .wd-device-header-actions {
    grid-column:2 !important;
    grid-row:1 / 3 !important;

    position:relative !important;

    align-self:center !important;

    margin:0 !important;
  }
}


/* WEBDESK_DEVICE_DIALOG_FLEX_STABILITY_V15_MARKER */
/* Desktop: dynamic Counters content must never shrink header or tabs. */
@media (min-width:761px) {

  .wd-device-dialog > .wd-device-dialog-header {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  .wd-device-dialog > .wd-device-tabs {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  .wd-device-dialog > .wd-device-loading {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  .wd-device-dialog > .wd-device-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

}

/* WEBDESK_LOGOUT_COMPACT_V1_MARKER */
@media (min-width:769px) {
  .wd-header.wd-authenticated .wd-user-box button {
    height:22px !important;
    min-height:22px !important;
    padding:0 7px !important;
    margin:0 !important;
    border-radius:5px !important;
    font-size:10px !important;
    line-height:20px !important;
  }
}

/* ==========================================================
   WEBDESK_SEARCH_DROPDOWN_LAYER_V1_MARKER
   Keep live search results above Control Center KPI cards.
   ========================================================== */
.wd-header.wd-authenticated .wd-filterbar {
  position: relative !important;
  z-index: 1000 !important;
}

.wd-header.wd-authenticated .wd-search-wrap {
  position: relative !important;
  z-index: 1001 !important;
}

.wd-header.wd-authenticated .wd-live-search {
  z-index: 10000 !important;
}

/* ==========================================================
   WEBDESK_GLOBAL_NORMAL_FONT_WEIGHT_V1_MARKER
   Use normal font weight throughout the WebDesk interface.
   ========================================================== */
html,
body,
body *,
body *::before,
body *::after {
  font-weight: 400 !important;
}

/* ==========================================================================
   WEBDESK_CYLINDER_CONTROL_CSS_V1_MARKER
   Roulette Cylinder Control
   ========================================================================== */

.cylinder-control-dialog {
  position: relative;
  width: min(680px, 94vw);
  max-height: 90vh;
  overflow: auto;
  padding: 20px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(25,26,30,.99), rgba(10,11,14,.99));
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

.cylinder-control-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
  padding: 12px 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}

.cylinder-control-target span {
  color: var(--muted);
  font-size: 11px !important;
}

.cylinder-control-target strong {
  font-size: 13px !important;
  text-align: right;
}

.cylinder-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cylinder-control-action {
  min-height: 58px;
  width: 100%;
  font-size: 13px !important;
}

.cylinder-control-action:disabled {
  opacity: .45;
  cursor: wait;
}

.cylinder-control-output-card {
  margin-top: 16px !important;
  min-height: 0 !important;
}

.cylinder-control-output {
  min-height: 64px;
  padding: 12px;
  color: #dce6f4;
  font-family: Consolas, "Liberation Mono", monospace !important;
  font-size: 11px !important;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 600px) {
  .cylinder-control-dialog {
    width: 96vw;
    padding: 14px;
    border-radius: 16px;
  }

  .cylinder-control-grid {
    grid-template-columns: 1fr;
  }

  .cylinder-control-action {
    min-height: 52px;
  }
}