/*

Volos Janusz Skotarczak

*/
/* Global */
/* forms */
/* Universal */
/* login */
/* main */
/*welcome*/
/* nav */
/* popup */
/* application */
/* scroll_div_list */
/* position table */
/* additionals table */
/* messages */
/* icons */
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-family: 'Open Sans', sans-serif;
}

pre {
  font-family: monospace;
  font-size: 12pt;
}

.pointer:hover {
  cursor: pointer;
  cursor: pointer;
}

p {
  margin-top: 10px;
  margin-bottom: 10px;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h4 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h5 {
  margin-top: 20px;
  margin-bottom: 10px;
}

h6 {
  margin-top: 20px;
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #1f3a5e;
}

a:hover {
  cursor: pointer;
}

small {
  font-size: 0.7em;
}

hr {
  margin-top: 10px;
  margin-bottom: 10px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

li {
  margin-left: 15px;
}

body {
  min-width: 1024px;
  background-color: #eee;
}

.hidden {
  display: none;
}

input {
  display: block;
  width: 100%;
  padding: 5px;
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-color: #999;
  height: 35px;
}

input:focus {
  outline: 0px;
}

input:-moz-read-only {
  background-color: #eee;
}

input:read-only {
  background-color: #eee;
}

textarea {
  display: block;
  width: 100%;
  padding: 5px;
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-color: #999;
  height: 35px;
  min-height: 100px;
  min-width: 100%;
  max-width: 100%;
  font-size: 0.8em;
  text-align: left;
}

button {
  display: block;
  width: 100%;
  padding: 5px;
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-color: #999;
  height: 35px;
  margin-top: 5px;
  margin-bottom: 5px;
  height: 35px;
  background: #1f3a5e;
  background: linear-gradient(10deg, #1f3a5e 0%, #42698c 100%);
  color: #fff;
}

button:focus {
  outline: 0px;
  background: #365f95;
  background: linear-gradient(190deg, #1f3a5e 0%, #5b8bb7 100%);
}

button:disabled {
  background: #8c8c8c;
  background: linear-gradient(10deg, #8c8c8c 0%, #717171 100%);
}

button:disabled:hover {
  background: #8c8c8c;
  background: linear-gradient(10deg, #8c8c8c 0%, #717171 100%);
}

button:hover {
  cursor: pointer;
  background: #365f95;
  background: linear-gradient(10deg, #1f3a5e 0%, #5b8bb7 100%);
}

select {
  display: block;
  width: 100%;
  padding: 5px;
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-color: #999;
  height: 35px;
}

input[type=checkbox] {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 5px;
}

input[type=submit] {
  margin-top: 5px;
  margin-bottom: 5px;
  height: 35px;
  background: #1f3a5e;
  background: linear-gradient(10deg, #1f3a5e 0%, #42698c 100%);
  color: #fff;
}

input[type=submit]:disabled {
  background: #8c8c8c;
  background: linear-gradient(10deg, #8c8c8c 0%, #717171 100%);
}

input[type=submit]:disabled:hover {
  background: #8c8c8c;
  background: linear-gradient(10deg, #8c8c8c 0%, #717171 100%);
}

input[type=submit]:hover {
  cursor: pointer;
  background: #365f95;
  background: linear-gradient(10deg, #1f3a5e 0%, #5b8bb7 100%);
}

input[type=submit]:focus {
  background: #365f95;
  background: linear-gradient(190deg, #1f3a5e 0%, #5b8bb7 100%);
}

input[type=submit]:-moz-read-only {
  background-color: #42698c;
}

input[type=submit]:read-only {
  background-color: #42698c;
}

input[type=submit]:-moz-read-only:hover {
  background-color: #6e93b5;
}

input[type=submit]:read-only:hover {
  background-color: #6e93b5;
}

label {
  font-size: 0.8em;
}

.red_button {
  background: #7b1111;
  background: linear-gradient(10deg, #7b1111 0%, #db4545 100%);
  color: #fff;
}

.red_button:hover {
  background: #7b1111;
  background: linear-gradient(10deg, #7b1111 0%, #f57b7b 100%);
  color: #fff;
}

.red_button:focus {
  background: #7b1111;
  background: linear-gradient(190deg, #7b1111 0%, #db4545 100%);
  color: #fff;
}

.green_button {
  background: #346c2a;
  background: linear-gradient(10deg, #346c2a 0%, #45ba16 100%);
  color: #fff;
}

.green_button:hover {
  background: #346c2a;
  background: linear-gradient(10deg, #346c2a 0%, #80ff4d 100%);
  color: #fff;
}

.green_button:focus {
  background: #346c2a;
  background: linear-gradient(190deg, #346c2a 0%, #45ba16 100%);
  color: #fff;
}

.red {
  color: #ff4040 !important;
}

.orange {
  color: orange !important;
}

.yellow {
  color: yellow !important;
}

.green {
  color: #29c729 !important;
}

.blue {
  color: #29a9c7 !important;
}

.white {
  color: #fff !important;
}

.bigger {
  font-size: 1.5em;
}

.smaller {
  font-size: 0.8em;
}

.bgcolor {
  background-color: #42698c;
}

.bgcolor * {
  color: #fff;
}

.darkcolor {
  background-color: #000;
}

.darkcolor * {
  color: #fff;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.content {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px auto;
      grid-template-columns: 200px auto;
}

.cols_2 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 50%;
      grid-template-columns: auto 50%;
  -webkit-column-gap: 10px;
          column-gap: 10px;
}

.cols_3 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 33.33% 33.33%;
      grid-template-columns: auto 33.33% 33.33%;
  -webkit-column-gap: 10px;
          column-gap: 10px;
}

.cols_2-4 {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 25%;
      grid-template-columns: auto 25%;
  -webkit-column-gap: 10px;
          column-gap: 10px;
}

.scroll {
  overflow-y: scroll;
  height: 100vh;
}

.ghostlist li {
  list-style-type: none;
  margin-left: 0px;
}

/* ── Login page ─────────────────────────────────────────── */
.lgn-page { margin: 0; padding: 0; height: 100vh; overflow: hidden; background: #060e1a; }

.lgn-wrap {
  display: flex;
  height: 100vh;
}

/* Left illustration panel */
.lgn-left {
  flex: 1 1 60%;
  position: relative;
  background: url('../images/bg-machines.svg') center center / cover no-repeat, #0a1628;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.lgn-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6,14,26,.32) 0%, rgba(6,14,26,.08) 60%, rgba(6,14,26,.55) 100%);
}
.lgn-left-inner {
  position: relative;
  z-index: 1;
  padding: 48px 52px;
}
.lgn-logo-mark {
  width: 52px;
  height: 52px;
  color: rgba(255,255,255,.85);
  margin-bottom: 18px;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.4));
}
.lgn-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lgn-brand {
  font-size: 2.6rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
  line-height: 1;
}
.lgn-brand-row .topbar-logo-badge {
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: .04em;
  align-self: center;
  margin-top: 4px;
}
.lgn-brand-row .topbar-logo-ver {
  font-size: .68rem;
  color: rgba(255,255,255,.45);
  font-weight: 400;
  align-self: center;
  margin-top: 4px;
}
.lgn-tagline {
  margin-top: 10px;
  font-size: .92rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .02em;
}

/* Right form panel */
.lgn-right {
  flex: 0 0 420px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -8px 0 40px rgba(0,0,0,.18);
}
.lgn-form-wrap {
  width: 100%;
  max-width: 340px;
  padding: 0 24px;
}
.lgn-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
  letter-spacing: -.02em;
}
.lgn-subtitle {
  font-size: .85rem;
  color: #6b7280;
  margin: 0 0 28px;
}

.lgn-form { display: flex; flex-direction: column; gap: 18px; }

.lgn-field { display: flex; flex-direction: column; gap: 6px; }
.lgn-field label {
  font-size: .78rem;
  font-weight: 600;
  color: #374151;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.lgn-field input {
  padding: 11px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: .95rem;
  color: #111827;
  background: #f9fafb;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.lgn-field input:focus {
  border-color: #0078d4;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,120,212,.12);
}

.lgn-btn {
  display: block !important;
  width: 100% !important;
  margin-top: 6px !important;
  padding: 13px !important;
  height: auto !important;
  background: linear-gradient(135deg, #005fa3 0%, #0078d4 100%) !important;
  color: #fff !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer;
  letter-spacing: .02em;
  transition: opacity .15s, transform .1s;
  box-shadow: 0 2px 12px rgba(0,120,212,.3);
}
.lgn-btn:hover { opacity: .88 !important; transform: translateY(-1px); }
.lgn-btn:active { transform: translateY(0); opacity: 1 !important; }

.lgn-footer {
  margin-top: 36px;
  text-align: center;
  font-size: .75rem;
  color: #9ca3af;
}

/* Message in login */
.lgn-form-wrap .message-info,
.lgn-form-wrap .message-alert,
.lgn-form-wrap .message-ok {
  margin-bottom: 18px;
  border-radius: 8px;
  font-size: .88rem;
}

@media (max-width: 768px) {
  .lgn-left { display: none; }
  .lgn-right { flex: 1 1 100%; box-shadow: none; }
}

/* keep old loginbox classes compiling without breaking anything */
.loginbox_image, .loginbox_background, .loginbox_background .loginbox,
.loginbox_background .loginbox .content { display: none; }
.logotype { color: #fff; }

.welcome_image {
  height: 100vh;
  background-color: #42698c;
  background-image: url("public/images/background.jpg");
  background-position: center;
  background-size: cover;
}

.welcome_image .box {
  text-align: center;
  display: block;
  padding: 20px;
  background-color: white;
  background-color: white;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 13px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 13px 5px rgba(0, 0, 0, 0.5);
}

.welcome_background {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #42698c;
  background-color: rgba(66, 105, 140, 0.5);
  background-position: center;
  background-size: cover;
}

.welcome_scroll {
  padding: 50px;
  position: relative;
  max-height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-color: #eee white;
  scrollbar-width: none;
}

.blog {
  margin-top: 50px;
}

.blog .blog_post {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 20px;
  background: #fff;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.1)));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 25px;
}

.blog .blog_post p {
  margin-bottom: 10px;
}

.nav {
  background: #1f3a5e;
  background: linear-gradient(45deg, #1f3a5e 0%, #42698c 100%);
}

.nav button {
  background: #1f3a5e;
  background: linear-gradient(10deg, #1f3a5e 0%, #42698c 100%);
  color: #fff;
  margin: 0px;
  border: none;
  height: 40px;
}

.nav button:hover {
  background: #365f95;
  background: linear-gradient(10deg, #1f3a5e 0%, #5b8bb7 100%);
  color: #fff;
  margin: 0px;
}

.nav .title {
  text-align: center;
  color: #fff;
  padding-top: 20px;
  padding-bottom: 20px;
}

.popup {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  background-color: #42698c;
  background-color: rgba(66, 105, 140, 0.9);
  overflow-x: hidden;
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.popup_frame {
  width: 90%;
  min-height: 90vh;
  min-width: 1024px;
  background-color: #fff;
  border-radius: 25px;
  -webkit-box-shadow: 0px 0px 13px 5px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 13px 5px rgba(0, 0, 0, 0.5);
}

.popup_frame .popup_bar {
  text-align: right;
  padding: 3px;
  padding-right: 10px;
  background-color: #000;
  color: #ff7878;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.popup_frame .popup_bar:hover {
  color: red;
  cursor: pointer;
}

.popup_frame .popup_closebtn {
  font-size: 2em;
  color: #ff7878;
}

.popup_frame .popup_message {
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 10px;
  margin-right: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.popup_frame .popup_message div {
  position: absolute;
  width: 300px;
}

.popup_frame .popup_content {
  overflow-y: scroll;
  padding: 10px;
  margin: 10px;
  height: 80vh;
}

.application {
  background-color: #fff;
  padding: 20px;
  margin: 10px;
  border-radius: 20px;
  -webkit-box-shadow: 0px 0px 13px 5px rgba(0, 0, 0, 0.33);
  box-shadow: 0px 0px 13px 5px rgba(0, 0, 0, 0.33);
}

.application .fancyframe {
  background-color: #eee;
  padding: 20px;
  width: 100%;
}

.application .inner_menu {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 300px auto;
      grid-template-columns: 300px auto;
  -webkit-column-gap: 10px;
          column-gap: 10px;
}

.div_list {
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-color: #999;
}

.div_list .element {
  padding: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: #eee;
}

.div_list .element:hover {
  background-color: #eee;
}

.div_list h1 {
  margin-top: 0px;
}

.div_list h2 {
  margin-top: 0px;
}

.div_list h3 {
  margin-top: 0px;
}

.div_list h4 {
  margin-top: 0px;
}

.div_list h5 {
  margin-top: 0px;
}

.div_list h6 {
  margin-top: 0px;
}

.div_list p {
  margin-top: 5px;
  margin-bottom: 5px;
}

.div_list small {
  margin-top: 5px;
  margin-bottom: 5px;
}

.div_list .good {
  background: #c8f2d1;
  background: -webkit-gradient(linear, left top, right top, from(#c8f2d1), to(rgba(200, 242, 209, 0)));
  background: linear-gradient(90deg, #c8f2d1 0%, rgba(200, 242, 209, 0) 100%);
  border-color: #fff;
}

.div_list .good:hover {
  background: #c8f2d1;
}

.div_list .bad {
  background: #ffa8a8;
  background: -webkit-gradient(linear, left top, right top, from(#ffd8d3), to(rgba(255, 216, 211, 0)));
  background: linear-gradient(90deg, #ffd8d3 0%, rgba(255, 216, 211, 0) 100%);
  border-color: #fff;
}

.div_list .bad:hover {
  background: #ffd8d3;
}

.scroll_div_list {
  background-color: #fff;
  border-style: solid;
  border-width: 1px;
  border-color: #999;
  height: 300px;
  overflow-y: scroll;
}

.scroll_div_list .element {
  padding: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: #eee;
}

.scroll_div_list .element:hover {
  background-color: #eee;
}

.scroll_div_list .good {
  background: #c8f2d1;
  background: -webkit-gradient(linear, left top, right top, from(#c8f2d1), to(rgba(200, 242, 209, 0)));
  background: linear-gradient(90deg, #c8f2d1 0%, rgba(200, 242, 209, 0) 100%);
  border-color: #fff;
}

.scroll_div_list .good:hover {
  background: #c8f2d1;
}

.scroll_div_list .bad {
  background: #ffa8a8;
  background: -webkit-gradient(linear, left top, right top, from(#ffd8d3), to(rgba(255, 216, 211, 0)));
  background: linear-gradient(90deg, #ffd8d3 0%, rgba(255, 216, 211, 0) 100%);
  border-color: #fff;
}

.scroll_div_list .bad:hover {
  background: #ffd8d3;
}

.position_table {
  background-color: #eee;
}

.position_table .position_row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 4% auto 5% 12% 12% 12% 15%;
      grid-template-columns: 4% auto 5% 12% 12% 12% 15%;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #ddd;
}

.position_table .position_row .position_cell {
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: #999;
  min-height: 50px;
}

.position_table .position_row .position_cell p {
  margin: 5px 5px 0px 5px;
}

.position_table .position_row .position_cell small {
  color: #777;
  margin: 0px 5px 0px 5px;
}

.position_table .highlight:hover {
  background-color: #fff;
}

.position_table input {
  border: none;
  margin: 0px;
}

.position_table button {
  display: inline-block;
  width: 50%;
  border: none;
  margin: 0px;
  padding-left: 10px;
  padding-right: 10px;
}

.position_table .position_table_heading {
  background-color: #333;
  color: #eee;
  font-size: 12px;
}

.position_table .position_table_heading div {
  padding: 5px;
}

.additionals_table {
  background-color: #eee;
}

.additionals_table .additional_row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 3% auto 10% 10% 10% 10%;
      grid-template-columns: 3% auto 10% 10% 10% 10%;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #ddd;
}

.additionals_table input {
  border: none;
  margin: 0px;
}

.additionals_table .table_div {
  font-size: 0.8em;
  padding: 5px;
  padding-top: 10px;
}

.additionals_table button {
  display: inline-block;
  width: 100%;
  border: none;
  margin: 0px;
  padding-left: 10px;
  padding-right: 10px;
}

.additionals_table .additionals_table_heading {
  background-color: #333;
  color: #eee;
}

.additionals_table .additionals_table_heading div {
  padding: 5px;
}

.additionals_groups_table {
  background-color: #2b333a;
}
.additionals_groups_table .additionals_groups_row {
  display: grid;
  grid-template-columns: 3% auto 10% 10% 10% 10%;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #1d2124;
}
.additionals_groups_table input {
  border: none;
  margin: 0px;
}
.additionals_groups_table .table_div {
  font-size: 0.8em;
  padding: 5px;
  padding-top: 10px;
}
.additionals_groups_table button {
  display: inline-block;
  width: 100%;
  border: none;
  margin: 0px;
  padding-left: 10px;
  padding-right: 10px;
}
.additionals_groups_table .additionals_groups_table_heading {
  background-color: #333;
  color: #2b333a;
}
.additionals_groups_table .additionals_groups_table_heading div {
  padding: 5px;
}

.infos {
  position: fixed;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  overflow-x: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.message-info {
  margin-top: 10px;
  padding: 10px;
  background-color: #c8f0f2;
  border-color: black;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.message-alert {
  margin-top: 10px;
  padding: 10px;
  background-color: #fae782;
  border-color: black;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.message-warning {
  margin-top: 10px;
  padding: 10px;
  background: #ffd8d3;
  border-color: black;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.hint {
  position: relative;
  display: inline-block;
}

.hint .hint_text-top {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  position: absolute;
  z-index: 999;
  width: 200px;
  bottom: 20px;
  left: calc(50% + 8px);
  margin-left: -100px;
}

.hint .hint_text-bottom {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px;
  border-radius: 6px;
  position: absolute;
  z-index: 999;
  width: 200px;
  top: calc(100% + 20px);
  left: calc(50% + 8px);
  margin-left: -100px;
}

.hint:hover .hint_text-top {
  visibility: visible;
}

.hint:hover .hint_text-bottom {
  visibility: visible;
}

.icon_bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.icon_bar button {
  display: block;
  width: auto;
  margin: 5px;
}

.icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-item-align: center;
      align-self: center;
}

.icon svg {
  height: 1.5em;
  width: 1.5em;
  fill: currentColor;
}

.icon img {
  height: 1.5em;
  width: 1.5em;
  fill: currentColor;
  top: .125em;
  position: relative;
}

.icon.baseline svg {
  top: 0;
  position: relative;
}

.superadmin {
  background-color: #42698c;
  color: #fff;
  padding: 20px;
}

.superadmin .scroll {
  overflow-y: scroll;
  height: calc(100vh - 150px);
}

.superadmin input {
  background-color: #42698c;
  color: #fff;
  font-family: monospace;
  font-size: 12pt;
}

.superadmin button {
  margin: 0px;
  background: #fff;
  color: #42698c;
}
/*# sourceMappingURL=style.css.map */

/* === Popup bar flex === */
.popup_frame .popup_bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}
.popup_bar_left_actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 4px;
}
.popup_bar_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #aaa;
  border-radius: 6px;
  transition: background .15s;
  text-decoration: none;
}
.popup_bar_icon:hover { background: rgba(255,255,255,.15); color: #fff; }
.popup_bar_icon .icon { width: 18px; height: 18px; fill: currentColor; }
.popup_bar_icon .icon svg { width: 100%; height: 100%; }

/* ================================================
   Modern additionals table
   ================================================ */
.additionals_table.modern {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(128,128,128,.25);
  background: transparent;
}

/* 8-column grid — !important beats old 6-col base rule */
.additionals_table.modern .additional_row {
  display: grid !important;
  grid-template-columns: 40px 20px 30px minmax(0,1fr) 110px 110px 48px 38px !important;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid rgba(128,128,128,.15);
  transition: background .1s;
}
.additionals_table.modern .additional_row:last-child { border-bottom: none; }

.additionals_table.modern .additional_row:hover:not(.additionals_table_heading) {
  background: rgba(128,128,128,.07);
}

.additionals_table.modern .additionals_table_heading {
  background: rgba(0,0,0,.35);
  min-height: 34px;
  font-size: .75em;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.additionals_table.modern .additionals_table_heading div {
  padding: 0 6px;
}

/* LP counter — auto-updates on drag-and-drop reorder */
.additionals_table.modern {
  counter-reset: additional-lp;
}
.additionals_table.modern .additional_row:not(.additionals_table_heading) {
  counter-increment: additional-lp;
}
.additionals_table.modern .row-lp {
  justify-content: center;
  font-size: .78em;
  font-weight: 600;
  color: rgba(128,128,128,.65);
}
.additionals_table.modern .row-lp::before {
  content: counter(additional-lp);
}

/* drag handle */
.drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  cursor: grab;
  color: rgba(128,128,128,.6);
  font-size: 1.6em;
  user-select: none;
  padding: 0 2px;
}
.drag-handle:active { cursor: grabbing; color: rgba(128,128,128,.9); }

/* dirty indicator */
.dirty-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(128,128,128,.4);
  margin: auto;
  transition: all .2s;
  flex-shrink: 0;
}
.dirty-dot.is-dirty {
  background: #f0a411;
  border-color: #f0a411;
  box-shadow: 0 0 6px rgba(240,164,17,.6);
}

/* editable inputs — visible so user knows they're editable */
.additionals_table.modern input.add-input {
  display: block;
  width: 100%;
  padding: 5px 7px;
  font-size: .85em;
  background: rgba(128,128,128,.12);
  border: 1px solid rgba(128,128,128,.3) !important;
  border-radius: 5px;
  color: inherit;
  margin: 0;
  transition: border-color .15s, background .15s;
}
.additionals_table.modern input.add-input:focus {
  background: rgba(74,158,218,.12);
  border-color: #4a9eda !important;
  outline: none;
}

.additionals_table.modern .additional_row.dragging { opacity: .3; }
.additionals_table.modern .additional_row.drag-over {
  border-top: 2px solid #f0a411;
  background: rgba(240,164,17,.05);
}

/* delete cell */
.add-delete-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-delete-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background: rgba(220,53,69,.15) !important;
  border: 1px solid rgba(220,53,69,.3) !important;
  color: #dc3545 !important;
  cursor: pointer;
  transition: background .15s;
}
.add-delete-btn:hover { background: rgba(220,53,69,.35) !important; }
.add-delete-btn .icon { width: 14px; height: 14px; fill: currentColor; }
.add-delete-btn .icon svg { width: 100%; height: 100%; }

/* CSS toggle switch (replaces ON/OFF button) */
.add-toggle-btn {
  position: relative;
  display: inline-block !important;
  width: 40px !important;
  height: 22px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 11px !important;
  border: none !important;
  cursor: pointer;
  transition: background .2s;
  vertical-align: middle;
  flex-shrink: 0;
  font-size: 0;
  overflow: visible;
}
.add-toggle-btn::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: left .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  pointer-events: none;
}
.add-toggle-btn.toggle-on { background: #28a745 !important; }
.add-toggle-btn.toggle-on::after { left: 21px; }
.add-toggle-btn.toggle-off { background: #6c757d !important; }
.add-toggle-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(74,158,218,.5); }

/* save button */
.add-save-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  padding: 7px 18px !important;
  border-radius: 6px !important;
  background: #2c6fad !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.add-save-btn:hover { background: #235a8e !important; }
.add-save-btn .icon { width: 15px; height: 15px; fill: #fff; }
.add-save-btn .icon svg { width: 100%; height: 100%; }

/* footer row */
.additionals-footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0;
}

/* group info bar */
.group-info-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  flex-wrap: wrap;
}
.group-id-badge {
  background: rgba(0,0,0,.4);
  color: #fff;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .03em;
}
.group-name { font-weight: 600; }

/* group management section — bottom of popup */
.group-management-section {
  border-top: 1px solid rgba(128,128,128,.2);
  padding: 16px 0 4px;
  margin-top: 8px;
}

/* product editing module */
.pe-table { display: flex; flex-direction: column; gap: 2px; }
.pe-row {
  display: grid;
  grid-template-columns: 16px 64px 1fr 168px 90px 90px 48px 28px 28px;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,.03);
  border: 1px solid transparent;
  transition: border-color .15s, opacity .15s;
}
.pe-row:hover { border-color: rgba(0,0,0,.1); }
.pe-row--inactive { opacity: .45; }
.pe-heading { font-size: .8em; font-weight: 600; background: transparent; }
.pe-heading label { margin: 0; font-weight: 600; }
.pe-id { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.pe-id-top { display: flex; align-items: center; justify-content: space-between; gap: 3px; }
.pe-id-num { font-size: .8em; color: #888; font-variant-numeric: tabular-nums; line-height: 1; }
.pe-id-flag { font-size: .9em; line-height: 1; }
.pe-input {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: .92em;
  background: #fff;
  color: #222;
  box-sizing: border-box;
}
.pe-input:focus { border-color: #4a9eda; outline: none; box-shadow: 0 0 0 2px rgba(74,158,218,.2); }
.pe-input--short { max-width: 100%; }
.pe-input--num { text-align: right; }
.pe-input--rounded { border-color: #e53935 !important; color: #e53935 !important; background: rgba(229,57,53,.07) !important; }
.pe-list { padding: 4px; }
.pe-sticky-hdr {
  position: sticky; top: var(--topbar-h, 50px); z-index: 100;
  background: var(--c-card, #fff);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 20px; margin: -20px -20px 16px;
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid var(--c-border, #e5e7eb);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.pe-sticky-hdr h1 { margin: 0; font-size: 1.1em; }
/* ── Helpdesk modal ── */
.pe-hd-modal { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.45); align-items:center; justify-content:center; }
.pe-hd-box { background:#fff; border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,.28); overflow:hidden; }
.pe-hd-hdr { background:#3b82f6; color:#fff; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pe-hd-hdr-left { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.pe-hd-hdr-title { font-size:14px; font-weight:700; color:#fff; line-height:1.3; }
.pe-hd-hdr-sub { font-size:11px; color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; max-width:360px; }
.pe-hd-close { background:none !important; border:none; color:#fff; cursor:pointer; font-size:18px; line-height:1; padding:3px 8px; opacity:.8; flex-shrink:0; border-radius:4px; align-self:flex-start; width:auto !important; display:inline-flex; align-items:center; }
.pe-hd-close:hover { opacity:1 !important; background:rgba(255,255,255,.18) !important; color:#fff !important; }
.pe-hd-body { padding:20px; }
.pe-hd-lbl { font-size:12px; font-weight:600; color:#555; display:block; margin-bottom:6px; }
.pe-hd-ta { width:100%; box-sizing:border-box; border:1px solid #d0d5dd; border-radius:6px; padding:8px 10px; font-size:13px; font-family:inherit; resize:vertical; outline:none; transition:border .15s; background:#fff; color:#333; }
.pe-hd-ta:focus { border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,.15); }
.pe-hd-info { display:none; padding:10px 12px; border-radius:6px; border:1px solid; font-size:13px; margin-bottom:14px; }
.pe-hd-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.pe-hd-btn-cancel { padding:7px 16px; border-radius:6px; border:1px solid #d0d5dd; background:#fff !important; color:#333 !important; font-size:13px; cursor:pointer; }
.pe-hd-btn-cancel:hover { background:#f0f0f0 !important; color:#111 !important; }
.pe-hd-btn-submit { padding:7px 18px; background:#3b82f6 !important; color:#fff !important; border:none; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
.pe-hd-btn-submit:hover { background:#2563eb !important; color:#fff !important; }
.pe-hd-btn-submit:disabled { opacity:.6; cursor:not-allowed; background:#3b82f6 !important; }

.pe-helpdesk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px !important; height: 26px; padding: 0 !important; margin: 0 !important;
  border: none; border-radius: 4px; background: transparent; cursor: pointer;
  color: #94a3b8; transition: color .15s, background .15s; box-shadow: none !important;
  background-image: none !important;
}
.pe-helpdesk-btn:hover { color: #d97706; background: rgba(217,119,6,.1) !important; }
.pe-expand-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px !important; height: 26px; padding: 0 !important; margin: 0 !important;
  background: transparent !important; background-image: none !important;
  border: none; border-radius: 4px; cursor: pointer;
  color: #888; box-shadow: none !important;
  transition: color .15s, background .15s;
}
.pe-expand-btn svg { width: 16px; height: 16px; transition: transform .2s; }
.pe-expand-btn.is-open svg { transform: rotate(180deg); }
.pe-expand-btn:hover { color: #0078d4; background: rgba(0,120,212,.08) !important; }
.pe-details { grid-column: 1 / -1; }
.pe-details-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 12px 10px 68px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
  border-radius: 0 0 4px 4px;
  flex-wrap: wrap;
}
.pe-details-field { display: flex; flex-direction: column; gap: 3px; }
.pe-details-field label { font-size: .75em; font-weight: 600; color: #888; margin: 0; }
.pe-details-field span { font-size: .9em; color: #444; }
.pe-add-new-btn { padding: 7px 16px; border-radius: 6px; border: 2px solid #3b82f6; background: #fff; color: #3b82f6; font-weight: 600; font-size: .9em; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.pe-add-new-btn:hover, .pe-add-new-btn--active { background: #3b82f6; color: #fff; }
.pe-add-form { border: 2px solid #3b82f6; border-radius: 8px; padding: 16px; margin-bottom: 10px; background: #f0f6ff; }
.pe-add-form-title { font-weight: 700; font-size: .95em; color: #3b82f6; margin-bottom: 10px; }
.pe-add-form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 10px; }
.pe-add-form-row:last-child { margin-bottom: 0; }
.pe-add-form-col--wide { flex: 2; min-width: 200px; }
.pe-add-form-row > div { display: flex; flex-direction: column; gap: 4px; min-width: 80px; }
.pe-add-form-actions { display: flex; gap: 8px; align-items: flex-end; margin-left: auto; }
.pe-cancel-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid #ccc; background: #fff; color: #666; cursor: pointer; font-size: .88em; }
.pe-cancel-btn:hover { background: #f5f5f5; }
.pe-item { display: flex; flex-direction: column; border-radius: 6px; border: 2px solid transparent; transition: border-color .15s; }
.pe-item.is-open { border-color: #3b82f6; }
.pe-children { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #dde; }
.pe-children-header { font-size: .75em; font-weight: 600; color: #888; padding: 0 4px 4px; text-transform: uppercase; letter-spacing: .04em; }
.pe-child-row { background: #f4f5f8; }
.pe-child-details { background: #eef0f5; border-left: 3px solid #c8cce0; }
.pe-pdf-dot { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; align-items: center; justify-content: center; font-size: .55em; font-weight: 800; color: #fff; flex-shrink: 0; line-height: 1; cursor: default; }
.pe-id-dots { display: flex; gap: 2px; flex-wrap: nowrap; }
.pe-pdf-legend { display: flex; align-items: center; gap: 4px; padding: 5px 8px 5px; font-size: .8em; color: #666; flex-wrap: wrap; border-bottom: 1px solid #eee; margin-bottom: 4px; }
.pe-pdf-legend strong { color: #444; margin-right: 4px; }
.pe-pdf-legend-item { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border-radius: 5px; padding: 2px 8px 2px 4px; transition: background .12s; user-select: none; }
.pe-pdf-legend-item:hover { background: rgba(0,0,0,.06); }
.pe-pdf-legend-item.is-active { background: rgba(0,0,0,.09); font-weight: 600; }
.pe-pdf-legend-hint { font-size: .82em; color: #aaa; margin-left: 4px; font-style: italic; }
.pe-pdf-count { margin-left: auto; font-size: .82em; color: #666; white-space: nowrap; }
.pe-pdf-info { padding: 7px 12px; margin: 0 0 5px; border-radius: 0 0 6px 6px; font-size: .8em; line-height: 1.55; border-left: 3px solid #ccc; background: #f6f7f9; color: #444; }
.pe-pdf-info code { font-size: .92em; background: rgba(0,0,0,.06); padding: 0 3px; border-radius: 3px; }
.group-management-section h2 { margin-top: 0; }
.add-search-input {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(128,128,128,.3) !important;
  border-radius: 6px;
  font-size: .88em;
  background: rgba(128,128,128,.1);
  color: inherit;
  margin-bottom: 2px;
}
.add-search-input:focus { outline: none; border-color: #4a9eda !important; }

/* row padding + vertical centering inside each cell */
.additionals_table.modern .additional_row > div {
  display: flex;
  align-items: center;
  padding: 4px 6px;
}
.additionals_table.modern .additionals_table_heading > div {
  padding: 6px 6px;
}

/* action buttons (Dodaj / Utwórz grupę etc.) — flat blue, compact */
.add-form-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  padding: 8px 20px !important;
  border-radius: 6px !important;
  background: #2c6fad !important;
  background-image: none !important;
  border: none !important;
  color: #fff !important;
  font-size: .88em;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s;
}
.add-form-btn:hover { filter: brightness(1.12); }

/* ── Export module ──────────────────────────────────────── */
.export-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 16px; align-items: start; }
.export-col-left { display: flex; flex-direction: column; gap: 16px; }
.export-card { margin: 0; }
.export-card-title { font-size: 1em; font-weight: 700; margin-bottom: 12px; }
.export-card-title-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.export-card-title-row .export-card-title { margin-bottom: 0; }
.export-cat-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.export-toggle-label { display: flex; align-items: center; gap: 6px; font-size: .85em; }

.export-radio-group { display: flex; flex-direction: column; gap: 6px; }
.export-radio-label { display: flex !important; align-items: flex-start; gap: 10px; cursor: pointer; padding: 9px 10px; border-radius: 6px; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.export-radio-label:hover { background: rgba(0,0,0,.04); }
.export-radio-label:has(input:checked) { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); }
.export-radio-label input[type=radio] { display: inline-block !important; width: 16px !important; height: 16px !important; min-width: 16px; flex-shrink: 0; margin-top: 2px; padding: 0 !important; background: none !important; border: none !important; }
.export-radio-body { display: flex; flex-direction: column; gap: 3px; }

.export-check-group { display: flex; flex-direction: column; gap: 2px; }
.export-check-row { display: flex !important; align-items: center; gap: 8px; cursor: pointer; padding: 6px 8px; border-radius: 4px; transition: background .12s; width: 100%; }
.export-check-row:hover { background: rgba(0,0,0,.05); }

.export-hint { font-size: .8em; color: #888; }

.export-cat-list { display: flex; flex-direction: column; gap: 1px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
.export-cat-item { display: flex !important; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; cursor: pointer; transition: background .1s; }
.export-cat-item:hover { background: rgba(0,0,0,.06); }
.export-cat-id { font-size: .74em; color: #aaa; font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; flex-shrink: 0; }
.export-cat-name { font-size: .88em; }

.export-small-btn { display: inline-block !important; width: auto !important; height: auto !important; min-width: 0 !important; padding: 4px 12px !important; font-size: .8em !important; border-radius: 4px !important; margin: 0 !important; cursor: pointer; }
.export-actions { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.export-submit-btn { display: inline-block !important; width: auto !important; height: auto !important; padding: 9px 30px !important; font-size: 1em !important; font-weight: 600 !important; border-radius: 6px !important; cursor: pointer; background: #004970 !important; background-image: none !important; color: #fff !important; border: none !important; margin: 0 !important; transition: filter .15s; }
.export-submit-btn:hover { filter: brightness(1.2); background: #004970 !important; background-image: none !important; }
.export-submit-btn:disabled { opacity: .55 !important; cursor: not-allowed !important; filter: none !important; }
.export-status-text { font-size: .88em; color: #888; }
.export-section-divider { border: none; border-top: 1px solid #e0e0e0; margin: 28px 0; }
.export-filter-search { display: block !important; width: 100% !important; height: 30px !important; padding: 4px 8px !important; margin-bottom: 8px !important; font-size: .85em !important; border-radius: 4px !important; background: #f4f6f8 !important; border: 1px solid #c8d0d8 !important; color: #333 !important; box-sizing: border-box !important; }

@media (max-width: 900px) {
  .export-grid { grid-template-columns: 1fr; }
}

/* ── Users module ────────────────────────────────────────────── */
.users-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.users-table th, .users-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #ddd; vertical-align: middle; }
.users-table th { font-weight: 600; background-color: #e0e0e0; }
.users-table tr:hover td { background-color: #f5f5f5; }
.users-dot-on, .users-dot-off { display: inline-block; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; border: none; padding: 0; vertical-align: middle; }
.users-dot-on  { background-color: #4caf50; }
.users-dot-off { background-color: #e53935; }
.users-perm-group { margin-bottom: 16px; }
.users-perm-group-title { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #555; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #ccc; }
.users-perm-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.users-perm-row input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.users-perm-it-note { font-size: 11px; color: #e53935; margin-left: 4px; }

/* Users module — przyciski globalne */
.users-btn { display: inline-flex !important; align-items: center; gap: 5px !important; padding: 5px 11px !important; font-size: .78em !important; border-radius: 6px !important; cursor: pointer !important; width: auto !important; white-space: nowrap !important; font-weight: 500 !important; border: none !important; transition: filter .1s, background .12s !important; line-height: 1.3 !important; }
.users-btn-lg { padding: 7px 16px !important; font-size: .88em !important; }
.users-btn-blue    { background: #3b82f6 !important; color: #fff !important; border: none !important; }
.users-btn-blue:hover { filter: brightness(1.12) !important; }
.users-btn-outline { background: transparent !important; color: #3b82f6 !important; border: 1.5px solid #3b82f6 !important; }
.users-btn-outline:hover { background: #3b82f6 !important; color: #fff !important; }
.users-btn-ghost   { background: rgba(0,0,0,.07) !important; color: #444 !important; border: none !important; }
.users-btn-ghost:hover { background: rgba(0,0,0,.14) !important; }
.users-btn .icon   { width: 12px !important; height: 12px !important; flex-shrink: 0; }
.users-btn .icon svg { width: 100% !important; height: 100% !important; }


/* ═══════════════════════════════════════════════════════
   MODERN UI REFRESH  ·  CSS Variables & Global Overrides
   ═══════════════════════════════════════════════════════ */

/* ── Palette (Classic / Light) ──────────────────────── */
:root {
    --c-primary:      #3b82f6;
    --c-primary-h:    #2563eb;
    --c-primary-ring: rgba(59,130,246,.16);
    --c-bg:           #eef1f5;
    --c-card:         #ffffff;
    --c-input:        #ffffff;
    --c-input-ro:     #f3f4f6;
    --c-border:       #d1d5db;
    --c-border-f:     #3b82f6;
    --c-text:         #111827;
    --c-text-2:       #6b7280;
    --c-text-m:       #9ca3af;
    --c-r-sm:         5px;
    --c-r-md:         8px;
    --c-r-lg:         14px;
    --c-shadow:       0 1px 3px rgba(0,0,0,.09), 0 1px 2px rgba(0,0,0,.05);
    --c-ff-bg:        #f4f6f9;
    --c-ff-border:    #e5e7eb;
    --c-nav:          #1a2535;
    --c-nav-text:     #cedbec;
    --c-nav-hover:    rgba(255,255,255,.09);
}

/* ── Body ───────────────────────────────────────────── */
body { background-color: var(--c-bg) !important; }

/* ── Form elements ──────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=file]):not([type=color]),
select,
textarea {
    border: 1.5px solid var(--c-border) !important;
    border-radius: var(--c-r-sm) !important;
    background: var(--c-input) !important;
    color: var(--c-text) !important;
    transition: border-color .15s, box-shadow .15s !important;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=file]):not([type=color]):focus,
select:focus,
textarea:focus {
    border-color: var(--c-border-f) !important;
    box-shadow: 0 0 0 3px var(--c-primary-ring) !important;
    outline: none !important;
}
input[readonly] { background: var(--c-input-ro) !important; }

input[type=checkbox],
input[type=radio] { accent-color: var(--c-primary); }

label {
    font-size: 12.5px !important;
    color: var(--c-text-2);
    font-weight: 500 !important;
    margin-bottom: 2px !important;
}

/* ── Nav ─────────────────────────────────────────────── */
.nav {
    background: var(--c-nav) !important;
    box-shadow: 2px 0 8px rgba(0,0,0,.12);
}
.nav button {
    background: transparent !important;
    background-image: none !important;
    color: var(--c-nav-text) !important;
    border: none !important;
    border-radius: var(--c-r-sm) !important;
    margin: 2px 8px !important;
    width: calc(100% - 16px) !important;
    height: auto !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: left !important;
    transition: background .12s !important;
}
.nav button:hover,
.nav button:focus {
    background: var(--c-nav-hover) !important;
    background-image: none !important;
    color: #fff !important;
}
.nav .title {
    padding: 20px 16px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    margin-bottom: 6px !important;
}
.nav .theme_selector { padding: 0 8px 8px !important; }

/* ── Application card ────────────────────────────────── */
.application {
    background: var(--c-card) !important;
    border-radius: var(--c-r-lg) !important;
    box-shadow: var(--c-shadow) !important;
    border: 1px solid var(--c-ff-border) !important;
    margin: 12px !important;
    padding: 20px !important;
}

/* ── Fancyframe cards ────────────────────────────────── */
.application .fancyframe {
    background: var(--c-ff-bg) !important;
    border: 1px solid var(--c-ff-border) !important;
    border-radius: var(--c-r-md) !important;
    padding: 16px !important;
}

/* ══════════════════════════════════════════════════════
   OFFERS MODULE
   ══════════════════════════════════════════════════════ */

/* Container override */
#offers_list.div_list {
    border: 1px solid var(--c-ff-border) !important;
    border-radius: var(--c-r-md) !important;
    overflow: hidden;
    background: var(--c-card) !important;
}

/* Offer card */
.off-card {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    align-items: stretch;
    border-bottom: 1px solid var(--c-ff-border);
    background: var(--c-card);
    transition: background .1s;
}
.off-card:last-child { border-bottom: none; }
.off-card:hover { background: var(--c-ff-bg); }

/* Status strip (left colored border) */
.off-strip--good { background: #22c55e; }
.off-strip--bad  { background: #ef4444; }

/* Card body */
.off-body {
    padding: 11px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Header row: number + badge + deadline */
.off-header {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}
.off-num { font-weight: 700; font-size: .93em; color: var(--c-text); }

.off-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .68em;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}
.off-badge--good { background: #dcfce7; color: #15803d; }
.off-badge--bad  { background: #fee2e2; color: #b91c1c; }

.off-deadline { font-size: .78em; color: var(--c-text-2); }
.off-deadline strong { color: var(--c-text); font-weight: 600; }

/* Meta row: issued by / date */
.off-meta {
    font-size: .79em;
    color: var(--c-text-2);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.off-meta strong { color: var(--c-text); font-weight: 600; }

/* Client row */
.off-client { font-size: .8em; color: var(--c-text-2); }
.off-client strong { color: var(--c-text); font-weight: 600; }
.off-client em { font-style: italic; }

/* Action buttons column */
.off-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
}

/* Icon button (PDF / Edit) */
.off-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--c-r-sm) !important;
    border: 1px solid var(--c-border) !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--c-text-2) !important;
    cursor: pointer !important;
    transition: background .12s, border-color .12s, color .12s !important;
    text-decoration: none !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}
.off-icon-btn:hover {
    background: var(--c-ff-bg) !important;
    background-image: none !important;
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
}
.off-icon-btn:disabled {
    opacity: .35 !important;
    cursor: not-allowed !important;
}
.off-icon-btn:disabled:hover {
    background: transparent !important;
    background-image: none !important;
    border-color: var(--c-border) !important;
    color: var(--c-text-2) !important;
}
.off-icon-btn .icon { width: 16px !important; height: 16px !important; fill: currentColor !important; }
.off-icon-btn .icon svg { width: 100% !important; height: 100% !important; fill: currentColor !important; }

/* Empty state */
.off-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--c-text-2);
    font-size: .88em;
}

/* Search bar */
.off-search-bar {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.off-search-bar > div { display: flex; flex-direction: column; gap: 3px; }
.off-search-main { flex: 1 1 200px; }
.off-search-select { flex: 0 0 180px; min-width: 140px; }

/* Section title (Issued for / Issued by) */
.off-section-title {
    font-size: .75em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--c-text-m);
    margin: 0 0 8px;
}

/* Panel info list (client/issuer) */
.off-panel-info { display: flex; flex-direction: column; gap: 1px; margin: 6px 0; }
.off-panel-row { font-size: .84em; color: var(--c-text-2); padding: 2px 0; }
.off-panel-row strong { color: var(--c-text); font-weight: 600; }

.off-panel-h { margin: 0 0 6px; font-size: .98em; font-weight: 700; color: var(--c-text); }

.off-contact-label {
    font-size: .73em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-text-m);
    margin: 10px 0 3px;
}

/* Panel action buttons */
.off-panel-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--c-ff-border);
    flex-wrap: wrap;
}
.off-panel-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    width: auto !important;
    padding: 6px 14px !important;
    border-radius: var(--c-r-sm) !important;
    font-size: .82em !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border: 1px solid var(--c-border) !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--c-text) !important;
    transition: background .12s, border-color .12s, color .12s !important;
    height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.off-panel-btn:hover {
    background: var(--c-ff-bg) !important;
    background-image: none !important;
    border-color: var(--c-primary) !important;
    color: var(--c-primary) !important;
}
.off-panel-btn--danger {
    border-color: rgba(239,68,68,.4) !important;
    color: #ef4444 !important;
}
.off-panel-btn--danger:hover {
    background: rgba(239,68,68,.08) !important;
    background-image: none !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}
.off-panel-btn:disabled {
    opacity: .45 !important;
    cursor: not-allowed !important;
}
.off-panel-btn:disabled:hover {
    background: transparent !important;
    background-image: none !important;
    border-color: var(--c-border) !important;
    color: var(--c-text) !important;
}
.off-panel-btn .icon { width: 14px !important; height: 14px !important; fill: currentColor !important; flex-shrink: 0 !important; }
.off-panel-btn .icon svg { width: 100% !important; height: 100% !important; fill: currentColor !important; }

/* ══ SELECTION POPUP ══ */
.sel-label { display: block; font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-m); margin-bottom: 5px; }
.sel-search { margin-bottom: 10px; }
.sel-list { border: 1px solid var(--c-ff-border); border-radius: var(--c-r-md); overflow: hidden; max-height: 420px; overflow-y: auto; }
.sel-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--c-ff-border); background: var(--c-card); transition: background .1s; user-select: none; }
.sel-item:last-child { border-bottom: none; }
.sel-item:hover { background: var(--c-ff-bg); }
.sel-item-name { font-weight: 700; font-size: .9em; color: var(--c-text); }
.sel-item-meta { font-size: .76em; color: var(--c-text-2); margin-top: 2px; }
.sel-item-contact { font-size: .74em; color: var(--c-text-m); margin-top: 2px; }
.sel-footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-ff-border); }

/* ══ OFFER MODULE ══ */
.ofr-toolbar { position: sticky; top: 0; z-index: 200; background: var(--c-card,#fff); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: -20px -20px 16px; padding: 14px 20px 12px; border-radius: var(--c-r-lg,12px) var(--c-r-lg,12px) 0 0; box-shadow: 0 2px 10px rgba(0,0,0,.07); border-bottom: 1px solid var(--c-border,#e5e7eb); }
.ofr-toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ofr-toolbar-left h1 { margin: 0; font-size: 1.25rem; font-weight: 600; }
.ofr-toolbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ofr-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.ofr-status { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: .72em; font-weight: 700; letter-spacing: .05em; vertical-align: middle; }
.ofr-status--active { background: #dcfce7; color: #15803d; }
.ofr-status--archived { background: #fee2e2; color: #b91c1c; }
.off-panel-btn--ok { border-color: rgba(34,197,94,.4) !important; color: #16a34a !important; }
.off-panel-btn--ok:hover { background: rgba(34,197,94,.08) !important; border-color: #16a34a !important; color: #16a34a !important; }
#products_list.prd-list { border: 1px solid var(--c-ff-border) !important; border-radius: var(--c-r-md) !important; overflow: hidden; background: var(--c-card) !important; max-height: 600px; overflow-y: auto; }
.prd-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--c-ff-border); background: var(--c-card); transition: background .1s; user-select: none; }
.prd-item:last-child { border-bottom: none; }
.prd-item:hover { background: var(--c-ff-bg); }
.prd-name { font-weight: 700; font-size: .9em; color: var(--c-text); }
.prd-price { font-size: .8em; color: var(--c-text-2); margin-top: 2px; }
.prd-meta { font-size: .73em; color: var(--c-text-m); margin-top: 2px; }

/* ══ CLIENTS MODULE ══ */
#list_of_clients.cli-list { border: 1px solid var(--c-ff-border) !important; border-radius: var(--c-r-md) !important; overflow: hidden; background: var(--c-card) !important; }
.cli-card { padding: 11px 16px; cursor: pointer; border-bottom: 1px solid var(--c-ff-border); background: var(--c-card); transition: background .1s; user-select: none; }
.cli-card:last-child { border-bottom: none; }
.cli-card:hover { background: var(--c-ff-bg); }
.cli-name { font-weight: 700; font-size: .92em; color: var(--c-text); margin-bottom: 2px; }
.cli-meta { font-size: .78em; color: var(--c-text-2); }
.cli-contact-line { font-size: .76em; color: var(--c-text-m); margin-top: 2px; }
.cli-offers-box { border: 1px solid var(--c-ff-border); border-radius: var(--c-r-md); overflow: hidden; margin-top: 4px; }

/* compact popup when content is a selection list or client detail */
.popup_frame:has(.sel-search) { width: auto !important; min-width: 420px !important; max-width: 560px !important; min-height: auto !important; }
.popup_frame:has(.sel-search) .popup_content { height: auto !important; max-height: 62vh !important; overflow-y: auto !important; }
.popup_frame:has(.cli-popup) { width: auto !important; min-width: 480px !important; max-width: 700px !important; min-height: auto !important; }
.popup_frame:has(.cli-popup) .popup_content { height: auto !important; max-height: 78vh !important; overflow-y: auto !important; }

/* ══ GLOBAL LOADING SPINNER ══ */
@keyframes glbSpin { to { transform: rotate(360deg); } }
.glb-spinner {
  display: inline-block; width: 22px; height: 22px; flex-shrink: 0;
  border: 3px solid rgba(0,0,0,.12);
  border-top-color: var(--c-primary, #0078d4);
  border-radius: 50%;
  animation: glbSpin .7s linear infinite;
}
.loading_mask {
  background: rgba(255,255,255,0.65) !important;
  backdrop-filter: blur(2px);
  z-index: 8000;
  align-items: center;
  justify-content: center;
}
.glb-load-card {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  padding: 18px 28px;
  box-shadow: 0 4px 24px rgba(0,0,0,.13);
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: .88em;
  color: #555;
  white-space: nowrap;
  pointer-events: none;
}
.glb-popup-spinner {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 52px 16px;
  font-size: .88em; color: var(--c-text-m, #888);
}

/* ══ WELCOME PAGE ══════════════════════════════════════════ */
.wlc-page {
  overflow-y: auto;
  height: 100vh;
  background: #eef0f3;
}
.wlc-hero {
  padding: 22px 48px 18px;
  min-height: 90px;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(135deg, #1e3a5e 0%, #2d5fa0 100%);
}
.wlc-hero-inner { max-width: 700px; }
.wlc-greeting {
  font-size: 1.45rem;
  font-weight: 300;
  color: #fff;
  letter-spacing: -.02em;
  text-shadow: 0 2px 16px rgba(0,0,0,.3);
  line-height: 1.2;
  margin-bottom: 5px;
}
.wlc-greeting strong { font-weight: 700; }
.wlc-quote {
  font-size: .83rem;
  color: rgba(255,255,255,.65);
  font-style: italic;
  line-height: 1.6;
}
.wlc-tiles-wrap { padding: 0; }
.wlc-inner { max-width: 1200px; }
.wlc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
}
.wlc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 18px 10px 14px;
  background: #fff;
  border: 1px solid #dde1e7;
  border-radius: 12px;
  text-decoration: none !important;
  color: #374151;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  transition: background .15s, border-color .15s, transform .12s, color .15s, box-shadow .15s;
  cursor: pointer;
}
.wlc-tile:hover {
  background: #f0f7ff;
  border-color: #93c5fd;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(59,130,246,.15);
  color: #1e40af;
}
.wlc-tile-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(59,130,246,0.10);
  display: flex; align-items: center; justify-content: center;
  color: #3b82f6;
  transition: background .15s;
}
.wlc-tile:hover .wlc-tile-icon { background: rgba(59,130,246,0.18); }
.wlc-tile-icon svg { width: 20px; height: 20px; }

/* ── KPI Stats ── */
.wlc-stats-wrap { padding: 16px 48px 20px; }
.wlc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.wlc-stat-card {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid #dde1e7;
  border-radius: 10px;
  padding: 10px 14px;
}
.wlc-stat-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.wlc-stat-icon svg { width: 18px; height: 18px; }
.wlc-stat-icon--blue   { background: rgba(59,130,246,.10); color: #3b82f6; }
.wlc-stat-icon--indigo { background: rgba(99,102,241,.10); color: #6366f1; }
.wlc-stat-icon--green  { background: rgba(16,185,129,.10); color: #10b981; }
.wlc-stat-icon--gray   { background: rgba(107,114,128,.10); color: #6b7280; }
.wlc-stat-icon--purple { background: rgba(168,85,247,.10); color: #a855f7; }
.wlc-stat-value {
  font-size: 1.2rem; font-weight: 700;
  color: #111827; line-height: 1.1;
}
.wlc-stat-label {
  font-size: .68rem; color: #6b7280;
  margin-top: 2px; font-weight: 500;
}

/* ── Main Grid ── */
.wlc-main-wrap { padding: 0 48px 48px; }
.wlc-main-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 960px) { .wlc-main-grid { grid-template-columns: 1fr; } }
.wlc-left-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wlc-right-col .wlc-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.wlc-card {
  background: #fff;
  border: 1px solid #dde1e7;
  border-radius: 12px;
  padding: 18px 20px;
}
.wlc-card-title {
  font-size: .75rem; font-weight: 700;
  color: #374151; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 12px;
}
.wlc-chart-wrap { height: 240px; position: relative; }

/* Recent offers list */
.wlc-recent-list { display: flex; flex-direction: column; gap: 1px; }
.wlc-recent-item {
  display: grid;
  grid-template-columns: minmax(90px,auto) 1fr auto;
  align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 6px;
  text-decoration: none !important;
  transition: background .12s;
}
.wlc-recent-item:hover { background: #f0f7ff; }
.wlc-recent-num    { font-size: .73rem; font-weight: 700; color: #3b82f6; white-space: nowrap; }
.wlc-recent-client { font-size: .73rem; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlc-recent-owner  { font-size: .68rem; color: #9ca3af; }
.wlc-recent-date   { font-size: .68rem; color: #9ca3af; white-space: nowrap; }