/* ===================================================================
   Camprodest Connect — admin panel glassmorphism theme
   Animated gradient background (from invite.camprodest.pl) + frosted glass
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --cp-bg1: rgb(25, 15, 90);
  --cp-bg2: rgb(8, 4, 25);
  --cp-color1: 50, 40, 160;
  --cp-color2: 70, 50, 180;
  --cp-color3: 90, 70, 220;
  --cp-color4: 200, 60, 120;
  --cp-color5: 35, 25, 120;
  --cp-interactive: 80, 60, 200;
  --cp-circle: 80%;
  --cp-blend: hard-light;
  --cp-accent: #5E66FF;
  --cp-accent2: #6A69F3;
  --cp-pink: #FEACAD;
  --cp-text: #E8E9F5;
  --cp-text-dim: rgba(232, 233, 245, 0.62);
  --cp-glass: rgba(20, 14, 74, 0.42);
  --cp-glass-strong: rgba(13, 6, 39, 0.6);
  --cp-border: rgba(94, 102, 255, 0.22);
  --cp-radius: 16px;
}

/* ---------- animated gradient background ---------- */
#cp-gradient-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
  background: linear-gradient(135deg, var(--cp-bg1), var(--cp-bg2));
  pointer-events: none;
}
#cp-gradient-bg .cp-gradients {
  filter: blur(82px);
  -webkit-filter: blur(82px);
  width: 100%;
  height: 100%;
  transform: translateZ(0);
}
@keyframes cpMoveInCircle { 0% { transform: rotate(0); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes cpMoveVertical { 0% { transform: translateY(-50%); } 50% { transform: translateY(50%); } 100% { transform: translateY(-50%); } }
@keyframes cpMoveHorizontal { 0% { transform: translateX(-50%) translateY(-10%); } 50% { transform: translateX(50%) translateY(10%); } 100% { transform: translateX(-50%) translateY(-10%); } }
#cp-gradient-bg .g1,#cp-gradient-bg .g2,#cp-gradient-bg .g3,#cp-gradient-bg .g4,#cp-gradient-bg .g5 {
  position: absolute;
  mix-blend-mode: var(--cp-blend);
  width: var(--cp-circle);
  height: var(--cp-circle);
  top: calc(50% - var(--cp-circle) / 2);
  left: calc(50% - var(--cp-circle) / 2);
  transform-origin: center center;
}
#cp-gradient-bg .g1 { background: radial-gradient(circle at center, rgba(var(--cp-color1),0.9) 0, rgba(var(--cp-color1),0) 50%) no-repeat; animation: cpMoveVertical 30s ease infinite; }
#cp-gradient-bg .g2 { background: radial-gradient(circle at center, rgba(var(--cp-color2),0.9) 0, rgba(var(--cp-color2),0) 50%) no-repeat; transform-origin: calc(50% - 400px); animation: cpMoveInCircle 20s reverse infinite; }
#cp-gradient-bg .g3 { background: radial-gradient(circle at center, rgba(var(--cp-color3),0.9) 0, rgba(var(--cp-color3),0) 50%) no-repeat; transform-origin: calc(50% + 400px); animation: cpMoveInCircle 40s linear infinite; top: calc(50% - var(--cp-circle) / 2 + 200px); left: calc(50% - var(--cp-circle) / 2 - 500px); }
#cp-gradient-bg .g4 { background: radial-gradient(circle at center, rgba(var(--cp-color4),0.7) 0, rgba(var(--cp-color4),0) 50%) no-repeat; transform-origin: calc(50% - 200px); animation: cpMoveHorizontal 40s ease infinite; opacity: 0.7; }
#cp-gradient-bg .g5 { background: radial-gradient(circle at center, rgba(var(--cp-color5),0.9) 0, rgba(var(--cp-color5),0) 50%) no-repeat; width: calc(var(--cp-circle) * 2); height: calc(var(--cp-circle) * 2); top: calc(50% - var(--cp-circle)); left: calc(50% - var(--cp-circle)); transform-origin: calc(50% - 800px) calc(50% + 200px); animation: cpMoveInCircle 20s ease infinite; }

/* keep app above the background */
#app { position: relative; z-index: 1; background: transparent !important; }
html, body { background: var(--cp-bg2) !important; color: var(--cp-text); }
body { font-feature-settings: "ss01"; }

/* ---------- glassmorphism: shells ---------- */
.el-container, .el-main, .el-header, .el-aside, .el-footer { background: transparent !important; }

.el-header, .layout-header, .navbar, .header {
  background: var(--cp-glass) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--cp-border) !important;
  box-shadow: none !important;
}
/* the tabs bar had a light-gray (#eee) bottom border — the "weird white line" */
.header-tags, .el-tabs__header, .tags-view, .tabs-view {
  border-bottom: 1px solid var(--cp-border) !important;
  background: transparent !important;
}
.el-aside, .sidebar, .sidebar-container, .layout-aside, aside.el-aside {
  background: var(--cp-glass) !important;
  background-color: var(--cp-glass) !important;
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  border-right: 1px solid var(--cp-border) !important;
}
/* Element-Plus menus are driven by CSS vars, not plain background */
.el-menu, .el-menu--vertical, .el-menu--collapse {
  --el-menu-bg-color: transparent !important;
  --el-menu-hover-bg-color: rgba(94,102,255,0.14) !important;
  --el-menu-active-color: #ffffff !important;
  --el-menu-text-color: var(--cp-text-dim) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-right: none !important;
}
.el-sub-menu .el-menu { background: transparent !important; }
/* the real opaque sidebar layer: an el-scrollbar inside the aside (#2d3a4b) */
.el-aside .el-scrollbar, .scroll-sidebar, .el-scrollbar.scroll-sidebar,
.el-aside .el-scrollbar__view, .el-aside .el-scrollbar__wrap {
  background: transparent !important; background-color: transparent !important;
}
.app-left, aside.app-left { background: var(--cp-glass) !important; }
.el-menu-item, .el-sub-menu__title { color: var(--cp-text-dim) !important; border-radius: 12px; margin: 4px 10px; }
.el-menu-item:hover, .el-sub-menu__title:hover { background: rgba(94,102,255,0.14) !important; color: var(--cp-text) !important; }
.el-menu-item.is-active { color: #fff !important; background: linear-gradient(90deg, rgba(94,102,255,0.45), rgba(106,105,243,0.16)) !important; box-shadow: 0 4px 16px rgba(94,102,255,0.28); }
.el-menu-item .el-icon, .el-sub-menu__title .el-icon { color: inherit !important; }

/* ---------- cards / panels ---------- */
.el-card, .el-table, .el-tabs__content, .box-card, .el-collapse, .el-descriptions {
  background: var(--cp-glass) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--cp-border) !important;
  border-radius: var(--cp-radius) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.16) !important; /* softer, no muddy halo */
  color: var(--cp-text) !important;
}
.el-card { overflow: hidden; }
.el-card__header { border-bottom: 1px solid var(--cp-border) !important; color: var(--cp-text) !important; }

/* ---------- tables ---------- */
.el-table, .el-table tr, .el-table th.el-table__cell, .el-table td.el-table__cell { background-color: transparent !important; color: var(--cp-text) !important; border-color: rgba(255,255,255,0.06) !important; }
.el-table th.el-table__cell { background: rgba(94,102,255,0.10) !important; color: var(--cp-text) !important; }
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell { background: rgba(94,102,255,0.10) !important; }
.el-table::before, .el-table__inner-wrapper::before { background: transparent !important; }

/* ---------- buttons ---------- */
.el-button { border-radius: 12px !important; border: 1px solid var(--cp-border) !important; background: rgba(255,255,255,0.05) !important; color: var(--cp-text) !important; font-weight: 500 !important; transition: filter .15s, background .15s, transform .12s; }
/* guarantee readable text on gradient buttons */
.el-button--primary, .login-card .el-button { text-shadow: 0 1px 2px rgba(0,0,0,0.28); font-weight: 600 !important; }
/* only NON-gradient buttons get the fill-hover; gradient buttons keep their gradient */
.el-button:not(.el-button--primary):not(.is-disabled):hover {
  background: rgba(94,102,255,0.20) !important; color: #fff !important; border-color: var(--cp-accent) !important;
}
/* dashboard primary buttons: indigo gradient = strong white-text contrast */
.el-button--primary {
  background: linear-gradient(90deg, #5E66FF, #6A69F3) !important;
  border: none !important; color: #fff !important; box-shadow: 0 8px 20px rgba(94,102,255,0.32) !important;
}
.el-button--primary:hover { background: linear-gradient(90deg, #6A69F3, #5E66FF) !important; filter: brightness(1.08); transform: translateY(-1px); }
/* login button keeps the indigo→pink brand gradient (large, reads fine) */
.login-card .el-button {
  background: linear-gradient(90deg, #5E66FF, #FEACAD) !important;
  border: none !important; color: #fff !important; box-shadow: 0 8px 20px rgba(94,102,255,0.32) !important;
}
.login-card .el-button:hover { background: linear-gradient(90deg, #5E66FF, #FEACAD) !important; filter: brightness(1.08); transform: translateY(-1px); }
.el-button:active { transform: translateY(0); }

/* ---------- inputs ---------- */
.el-input__wrapper, .el-textarea__inner, .el-select__wrapper {
  background: rgba(13,6,39,0.55) !important;
  background-color: rgba(13,6,39,0.55) !important;
  box-shadow: 0 0 0 1px var(--cp-border) inset !important;
  border-radius: 12px !important;
}
.el-input, .el-input__inner, .el-textarea__inner {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--cp-text) !important;
  -webkit-text-fill-color: var(--cp-text) !important;
}
.el-input__inner::placeholder { color: var(--cp-text-dim) !important; }
.el-input__wrapper.is-focus, .el-input__wrapper:hover { box-shadow: 0 0 0 1px var(--cp-accent) inset !important; }
.el-input__suffix, .el-input__prefix, .el-input__icon { color: var(--cp-text-dim) !important; }
/* kill Chrome/Edge autofill white/lavender background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px rgba(13,6,39,0.85) inset !important;
  box-shadow: 0 0 0 1000px rgba(13,6,39,0.85) inset !important;
  -webkit-text-fill-color: var(--cp-text) !important;
  caret-color: var(--cp-text) !important;
  transition: background-color 99999s ease-in-out 0s !important;
}

/* ---------- dialogs / dropdowns / popovers ---------- */
.el-dialog, .el-message-box, .el-drawer, .el-dropdown-menu, .el-popper, .el-select-dropdown {
  background: var(--cp-glass-strong) !important;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid var(--cp-border) !important;
  border-radius: var(--cp-radius) !important;
  color: var(--cp-text) !important;
}
.el-dialog__title, .el-dialog__body, .el-message-box__title, .el-message-box__content { color: var(--cp-text) !important; }
.el-overlay { background: rgba(2,5,12,0.55) !important; }
.el-dropdown-menu__item { color: var(--cp-text-dim) !important; }
.el-dropdown-menu__item:hover { background: rgba(94,102,255,0.16) !important; color: #fff !important; }

/* ---------- misc text / links / tags ---------- */
.el-tabs__item { color: var(--cp-text-dim) !important; }
.el-tabs__item.is-active { color: #fff !important; }
.el-tabs__active-bar { background: var(--cp-accent) !important; }
a, .el-link { color: var(--cp-accent) !important; }
.el-tag { background: rgba(94,102,255,0.16) !important; border-color: var(--cp-border) !important; color: var(--cp-text) !important; }
.el-pagination, .el-pagination button, .el-pager li { background: transparent !important; color: var(--cp-text-dim) !important; }
.el-pager li.is-active { color: #fff !important; background: var(--cp-accent) !important; border-radius: 8px; }
.el-checkbox__label, .el-radio__label, .el-form-item__label, label { color: var(--cp-text) !important; }
.el-divider { border-color: var(--cp-border) !important; }

/* ---------- login screen polish ---------- */
/* the panel's full-screen slate wrapper that hides the animated bg */
.login-container { background: transparent !important; background-color: transparent !important; }
.el-container.is-vertical, .common-layout, .app-wrapper, .app-main, .main-container { background: transparent !important; }
.login-container, .login, [class*="login"] { color: var(--cp-text); }
/* ONLY the outer card is a box — gradient border exactly like the example push-card */
.login-card {
  background-image: linear-gradient(rgb(20,14,74), rgb(16,9,52)),
                    repeating-linear-gradient(90deg,#5c3b86 0%,#c287be 33%,#53314a 66%,#5e66ff 100%) !important;
  background-clip: padding-box, border-box !important;
  background-origin: border-box !important;
  border: 1.5px solid transparent !important;
  border-radius: 22px !important;
  box-shadow: 0 26px 70px rgba(0,0,0,0.5) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  padding: 40px 38px !important;
  width: 380px !important;
}
/* the inner form must NOT be its own box (kills the nested rectangle) */
.login-form, .login-box, .login-card .el-form, .login-card form, .login-card > div {
  background: transparent !important; background-color: transparent !important;
  border: none !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* ---------- login brand logo (mark + wordmark, like invite.camprodest.pl) ---------- */
.login-logo { display: none !important; } /* hide original RustDesk logo slot */
#cp-login-brand {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0 0 22px; user-select: none;
}
#cp-login-brand img { width: 44px; height: 44px; display: block; }
#cp-login-brand span {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 31px; font-weight: 300; letter-spacing: 1.1px; text-transform: lowercase;
  background: linear-gradient(90deg, #936496, #f4d0fe, #f8d0f8, #fffdfc, #665371, #936496);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: cpShine 7s linear infinite;
}
@keyframes cpShine { to { background-position: 200% center; } }

/* ---------- table density / action buttons fit ---------- */
.el-table .el-button { padding: 5px 9px !important; font-size: 12px !important; margin: 2px !important; border-radius: 8px !important; }
.el-table .el-button + .el-button { margin-left: 2px !important; }
.el-table .cell { line-height: 1.3 !important; }
.el-table th.el-table__cell { font-weight: 600 !important; white-space: nowrap; }
/* NUKE every internal table border/line, then re-add only clean dividers */
.el-table { overflow: hidden; }
.el-table, .el-table *, .el-table *::before, .el-table *::after { border: 0 !important; }
/* the 1px lines Element-Plus draws via background pseudo-elements */
.el-table::before, .el-table::after,
.el-table__inner-wrapper::before, .el-table__inner-wrapper::after,
.el-table__fixed::before, .el-table__fixed-right::before,
.el-table__border-left-patch { display: none !important; background: transparent !important; }
.el-table__fixed, .el-table__fixed-right { background: transparent !important; box-shadow: none !important; }
/* re-add ONLY: a header underline + subtle row dividers (full width, no breaks) */
.el-table thead th.el-table__cell { border-bottom: 1px solid rgba(255,255,255,0.10) !important; }
.el-table tbody .el-table__row:not(:last-child) td.el-table__cell { border-bottom: 1px solid rgba(255,255,255,0.06) !important; }

/* ---------- header polish ---------- */
.el-header { display: flex; align-items: center; }
.el-tabs__header { background: transparent !important; }
.el-tabs__nav, .el-tabs--card > .el-tabs__header .el-tabs__item {
  background: var(--cp-glass) !important; border-color: var(--cp-border) !important; color: var(--cp-text-dim) !important;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active { background: rgba(94,102,255,0.22) !important; color: #fff !important; }

/* switches / toggles use accent */
.el-switch.is-checked .el-switch__core { background: var(--cp-accent) !important; border-color: var(--cp-accent) !important; }
/* remove the dark/light theme toggle in the header (not needed — forced Camprodest theme) */
.app-header .el-switch { display: none !important; }
.app-header .setting .menu-item:has(.el-switch) { display: none !important; }

/* route-change progress bar (the thin top "white line") → brand color, slim */
#nprogress .bar { background: linear-gradient(90deg,#5E66FF,#FEACAD) !important; height: 2px !important; box-shadow: none !important; }
#nprogress .peg, #nprogress .spinner, #nprogress .spinner-icon { display: none !important; }

/* inline filter labels: auto width + nowrap so they never overlap the field */
.el-form--inline .el-form-item { display: inline-flex !important; align-items: center; margin-right: 18px !important; }
.el-form--inline .el-form-item__label, .el-form-item__label { width: auto !important; white-space: nowrap !important; padding: 0 10px 0 0 !important; overflow: visible !important; }
.el-form--inline .el-form-item__content { flex: 0 0 auto; }

/* ---------- checkboxes / radios (were unstyled dark squares) ---------- */
.el-checkbox__inner, .el-radio__inner {
  background-color: rgba(13,6,39,0.55) !important;
  border: 1px solid var(--cp-border) !important;
}
.el-checkbox:hover .el-checkbox__inner, .el-radio:hover .el-radio__inner { border-color: var(--cp-accent) !important; }
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  background: var(--cp-accent) !important; border-color: var(--cp-accent) !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner::after { border-color: #fff !important; }
.el-radio__input.is-checked .el-radio__inner::after { background: #fff !important; }
.el-checkbox__label, .el-radio__label { color: var(--cp-text) !important; }
/* table header text: no underline, clean */
.el-table th .cell, .el-table th a, .el-table th .caret-wrapper { text-decoration: none !important; }
.el-table th .cell { color: var(--cp-text) !important; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(94,102,255,0.35); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }