/* ========================================
   FONT AWESOME 6 VARIABLES
   ======================================== */
:root {
    --fa-style-family: "Font Awesome 6 Free";
    --fa-style: 900;
    --leftmenu-container-min: 50px;
    --left-menu-container-max: 300px;
}

html[data-theme="dark"] { background-color: #000 !important; }
html[data-theme="light"] { background-color: #fff !important; }

/* Forçar estil solid per classes Font Awesome */
.fa, .fas, .far, .fal, .fab,
[class^="fa-"], [class*=" fa-"] {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
    font-weight: var(--fa-style, 900) !important;
}
/* ...excepte les icones de marca (.fab: Python, Laravel, GitHub...), que
   viuen a la font "Font Awesome 6 Brands": amb la regla d'abans sortien com
   un quadrat buit. - 16/08/2026 */
.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}


/* ========================================
   VARIABLES CSS PER TEMES DARK I LIGHT
   ======================================== */

html,body { height:100%; margin:0; }

body {
    display: flex;
    flex-direction: column;
}

.document {
    flex: 1; /* ocupa tota l'alçada restant */
}

/* Tema Dark (per defecte) */
html[data-theme="dark"] {
    --card-bg: #0d1b26;
    --border-color: #1a3a52;
    --text-primary: #f0f9ff;
    --text-secondary: #a5b4c5;
    --text-tertiary: #6b7d8e;
    --hover-bg: rgba(34, 211, 238, 0.15);
    --menu-icon-color: #a5b4c5;
}

/* Tema Light */
html[data-theme="light"] {
    --card-bg: #ffffff;
    --border-color: #e2e8f0;
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --hover-bg: rgba(100, 116, 139, 0.1);
    --menu-icon-color: #64748b;
}

[data-theme="light"] html,
[data-theme="light"] body {
    color: #3e3e3e !important;
}

<!--
/*@import url(/kms/css/aqua/main/desktop.css);*/
-->
@font-face {
    font-family: openSansCond;
    src: url("/kms/css/typo/OpenSans-CondBold.ttf") format("truetype");
}
@font-face{
	font-family:FontAwesome;
	src:url(/kms/css/typo/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713);
	src:url(/kms/css/typo/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713) format("embedded-opentype"),url(/kms/css/typo/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e) format("woff2"),url(/kms/css/typo/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad) format("woff"),url(/kms/css/typo/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9) format("truetype"),url(/kms/css/typo/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde) format("svg");
	font-weight:400;
	font-style:normal;
}

/* ===== DARK MODE THEME ===== */
/* ===== DARK MODE THEME (default) =====
   Paleta corporativa d'intergrid.cat: fons negre pur, superficies "ink"
   (#0a1417/#0f1e21/#14282b, negres verd-blavosos del web), text blanc i
   accent turquesa de marca (#00c1aa). */
:root,
html[data-theme="dark"] {
    /* Backgrounds */
    --dark-bg-primary: #000000;
    --dark-bg-secondary: #0a1417;
    --dark-bg-tertiary: #0f1e21;
    --dark-bg-hover: #14282b;
    --dark-bg-hover-high: #fff;

    /* Text colors */
    --dark-text-primary-highlighted: #fff;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #8ea3a3;

    /* Borders & accents */
    --dark-border: #20342f;
    --dark-accent: #00c1aa;
    --dark-accent-hover: #08b29e;

    /* Additional variables for consistency */
    --card-bg: #0a1417;
    --border-color: #20342f;
    --text-primary: #ffffff;
    --text-secondary: #8ea3a3;
    --primary-color: #00c1aa;
    --radius: 8px;
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

    /* Variables estandarditzades KMS per components */
    --kms-bg-primary: #000000;
    --kms-bg-secondary: #0a1417;
    --kms-bg-tertiary: #0f1e21;
    --kms-bg-hover: #14282b;
    --kms-text-primary: #ffffff;
    --kms-text-secondary: #8ea3a3;
    --kms-text-muted: #8ea3a3;
    --kms-text-on-accent: #000;
    --kms-border: #20342f;
    --kms-border-light: #14282b;
    --kms-accent: #00c1aa;
    --kms-accent-hover: #00d9bf;
}

/* ===== LIGHT MODE THEME =====
   Paleta corporativa d'intergrid.cat: paper blanc, superficies #f1f6f7,
   VORES VISIBLES (#e2ebed, abans eren blanques i invisibles), text gairebe
   negre (#0d1b1d) i accent brand-deep (#0d7a92). */
html[data-theme="light"] {
    /* Backgrounds */
    --dark-bg-primary: #ffffff;
    --dark-bg-secondary: #ffffff;
    --dark-bg-tertiary: #f1f6f7;
    --dark-bg-hover: #f1f6f7;

    /* Text colors */
    --dark-text-primary-highlighted: #000;
    --dark-text-primary: #0d1b1d;
    --dark-text-secondary: #54686b;

    /* Borders & accents */
    --dark-border: #e2ebed;
    --dark-accent: #0d7a92;
    --dark-accent-hover: #08b29e;

    /* Additional variables for consistency */
    --card-bg: #ffffff;
    --border-color: #e2ebed;
    --text-primary: #0d1b1d;
    --text-secondary: #54686b;
    --primary-color: #0d7a92;
    --radius: 8px;
    --shadow-lg: 0 10px 25px rgba(13, 27, 29, 0.08);

    /* Input border for light theme */
    --input-border: #d3e0e2;

    /* Variables estandarditzades KMS per components */
    --kms-bg-primary: #ffffff;
    --kms-bg-secondary: #f1f6f7;
    --kms-bg-tertiary: #e9f1f2;
    --kms-bg-hover: #f1f6f7;
    --kms-text-primary: #0d1b1d;
    --kms-text-secondary: #54686b;
    --kms-text-muted: #7a8f92;
    --kms-text-on-accent: #ffffff;
    --kms-border: #e2ebed;
    --kms-border-light: #eef4f5;
    --kms-accent: #0d7a92;
    --kms-accent-hover: #00a3c6;
}

.iconsvg {
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  flex-shrink: 0;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1);
  fill: currentcolor;
  font-size: 17px;
}

div#loading-message {
     display: none;
     position:absolute !important;
     z-index:9999;
     width:100%;
     height: calc(100% - 50px);
     text-align: center;
     background-color: rgba(26, 26, 26, 0.85);
     color:#e0e0e0;
}
div#loading-message img { 
    position:absolute; 
    top:49%; 
    width: 50px;
    opacity: 80%; 
}

body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: var(--dark-text-primary);
	background-color: var(--dark-bg-primary); 
}

@-moz-document url-prefix() {
    ul#leftmenu li,body {
        font-size: 10px;
    }
}

div#kms_msg {
    display:none;
    text-align:center;
    position:absolute;
    width:300px;
    border:1px solid var(--dark-border);
    border-top:0px;
    padding:10px;
    top:0px;
    left:40%;
    background: linear-gradient(to bottom, rgba(18, 165, 149, 0.9) 0%, rgba(18, 165, 149, 1) 100%);
    font-family: Arial, Sans-serif;
    color: var(--dark-text-primary);
    font-size: 13px;
    font-weight:bold;
}

td,th, input, select, textarea, optgroup {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 13px;
	color: var(--dark-text-primary);
}

input, select, textarea {
    background-color: none;
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

input:focus, select:focus, textarea:focus {
    background-color: var(--dark-bg-hover);
    border-color: var(--dark-accent);
    outline: none;
}

table#dbtable {
  margin: 5px 10px;
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  table-layout: fixed;
  box-sizing: border-box;
}

table#dbtable tr { line-height:33px; }
table#dbtable tr,table#dbtable td {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    color: var(--dark-text-primary);
    background: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
table#dbtable tr,table#dbtable td i { font-size:15px; }
table#dbtable tr,table#dbtable td div.datacell  i  { font-size:16px}
table#dbtable th {
    overflow: hidden;
    white-space: nowrap;
}
/* Max-width global per columnes del dataBrowser (substitueix l'antic inline style='max-width: 300px') */
table#dbtable th,
table#dbtable td {
    max-width: 300px;
}
table#dbtable td div.datacell span.kms-status-badge i,
table#dbtable td div.datacell span.kms-role-badge i {
  font-size: 13px;
}

h1,h2,h3,h4 { 
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--dark-text-primary);
}

h1 { color: var(--dark-text-secondary); font-size: 22px !important; padding:10px 0px 10px 4px; margin:0px; } 
h2 { color: var(--dark-text-primary); }
h3 { color: var(--dark-text-secondary); }

h1.logo,h1.logo a {
    font: arial,verdana,helvetica;
    font-size:16px;
    font-weight:normal;
}

a {
    color: var(--dark-accent);
    text-decoration: none;
}

a:hover {
    color: var(--dark-accent-hover);
}

a.logo {
    text-decoration:none;
    color: #fff;
}

.logo,.logo a {
    margin: 0;
    text-decoration:none;
    color:#fff;
    font-weight:bold !important;
    text-shadow:none;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

td#midhead div.MAIN font { 
    font-weight:normal !important;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#fff !important; 
    text-shadow:none !important; 
}

.pull-left {
    float: left !important;
}

.user-panel > .info {
    padding: 5px 5px 5px 15px;
    line-height: 1;
    position: absolute;
    left: 55px;
}

.user-panel > .info > a {
    text-decoration: none;
    padding-right: 5px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--dark-text-primary);
}

.fa {
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

div#butmenu i { font-size:14px !important }

.text-success {
    color: #5cb85c;
}

img {
  border: none;
}

legend {
  white-space: nowrap;
  color: var(--dark-text-primary);
}

.displayNone {
  display: none !important;
}

/* --- loader ---*/
#loader {
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

#loader td {
  padding: 3px;
  background: var(--dark-bg-secondary);
}

#loader p {
  border: 3px solid var(--dark-border);
  padding: 10px;
  margin: 0;
  background: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
}

#loader img {
  float: left;
  margin-right: 12px;
}

#loader strong {
  display: block;
  margin-bottom: 3px;
}

#loaderContainer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
}

#loaderContainer td {
    padding-top: 150px;
    vertical-align: top;
    text-align: center;
    background-color: rgba(26, 26, 26, 0.8);
}

#loaderContainer td td {
    padding-top: 3px;
    text-align: left;
}

.scrollingBox {
  overflow: auto;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

table.scrollingBoxBorder {
 border: 1px solid var(--dark-border); 
 background-color: var(--dark-bg-secondary);
}

.user-panel {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 10px;
}

.user-panel img {
    border-radius: 50%;
    width: 100%;
    max-width: 45px !important;
    height: auto;
}

div.scrollingBoxAround {
 margin-right: 1px;
}

.noBold {
  font-weight: normal;
}

table.content {
    width:100%;
    padding:0px;
    border:0px;
    height:100%;
    background-color: var(--dark-bg-primary);
}

table.content td {
    vertical-align:top;
}

table.content td.leftmenu {
    width: 300px;
    max-width: 300px;
    min-width: 300px;
    transition: width 0.3s ease-in-out, max-width 0.3s ease-in-out, min-width 0.3s ease-in-out;
}

table.content td.leftmenu.leftmenu-collapsed {
    width: 100px !important;
    max-width: 100px !important;
    min-width: 100px !important;
}

/* --- dashboard ---- */
body.dashboard .dataBrowser_content { padding: 0px !important; }

.dashboard_box {
    width:280px;
    height:240px;
    margin:5px;
    background-color: var(--dark-bg-secondary);
    padding:7px;
    padding-bottom:10px;
    border-width:1px;
    border-color: var(--dark-border);
    border-style:solid;
    float:left;
}

.dashboard_link {
    text-decoration:none;
    padding:2px;
    color: var(--dark-text-primary);
}

.dashboard_link:hover {
    text-decoration:none;
    background-color: var(--dark-bg-hover);
}

/* Light mode for dashboard */
[data-theme="light"] .dashboard_box {
    background-color: #ffffff;
    border-color: #dee2e6;
}

[data-theme="light"] .dashboard_link {
    color: #212529;
}

[data-theme="light"] .dashboard_link:hover {
    background-color: #f8f9fa;
}

.HILITE {
    color:#fff;
    background-color: var(--dark-accent);
}

html[data-theme="dark"] #contents {
    display:block;
    height:auto;
    background-color: #000;
}

html[data-theme="light"] #contents {
    display: block;
    height: auto;
}

.bottom_bar {
    position:fixed;
    z-index:99;
    bottom:40px;
    left:40px;
}

.bottom_bar a {
    text-decoration:none;
    color: var(--dark-accent);
}

.bottom_bar a:hover {
    text-decoration:underline;
}

ul.quick_menu {
    padding:0px;
    margin:0px;
}

li.quick_menu_item {
    margin: 0;
    text-decoration:none;
    color: var(--dark-text-primary);
    text-shadow: none;
    float:left;
    padding:6px 10px 7px 10px;
    border-right:1px dotted var(--dark-border);
    list-style-type: none;
    border:0px;
    vertical-align:middle;
    line-height:12px;
}

li.quick_menu_item:hover {
    background-color: var(--dark-bg-hover);
    color: #fff;
    cursor:pointer;	
}

.dataBrowser-row {
    padding:0px;
}

.dataBrowser-row:hover {
    padding:0px;
    background-color: var(--dark-bg-hover);	
}

html[data-theme="dark"] body {
  background-color: #000;
} 

html[data-theme="light"] body {
  background-color: #fff;
}

html[data-theme="dark"] .document, html[data-theme="dark"] .document table#head-app {
  background-color: #000;
}

/* Light mode adaptations for .document and #head-app */
html[data-theme="light"] .document,
html[data-theme="light"] .document table#head-app {
  /* background-color: #ffffff; */
}

/* Light mode text colors */
html[data-theme="light"] h2 {
  color: var(--dark-text-primary);
}

html,body,table.document {
  scrollbar-color: #242a38 #1f2430;
}

html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] table.document {
  scrollbar-color: #cbd5e1 #ffffff;
}

.top {
    height:50px;
    position:relative;
}

div.datacell p {
    line-height:auto;
    margin:0px;
    color: var(--dark-text-primary);
}

.widget {
    float:left;
    border:1px solid var(--dark-border);
    background: linear-gradient(to bottom, var(--dark-bg-secondary) 20%, var(--dark-bg-tertiary) 55%, var(--dark-bg-tertiary) 65%, var(--dark-bg-secondary) 100%);
    padding:10px;
    margin-bottom:10px;
    margin-right:10px;
}

.widget input[type=button] {
    margin-top:5px;
    margin-right:5px;
    font-size:10px;
    color:#fff;
    border:0px;
    background: linear-gradient(to bottom, var(--dark-accent), #0056b3);
    border-radius: 5px;
    padding:5px;
}

.widget input[type=button]:hover {
    background: linear-gradient(to bottom, var(--dark-accent-hover), #0044a0);
}

/* Light mode for widgets */
[data-theme="light"] .widget {
    background: linear-gradient(to bottom, #ffffff 20%, #f8f9fa 55%, #f8f9fa 65%, #ffffff 100%);
    border-color: #dee2e6;
}

[data-theme="light"] .widget input[type=button] {
    background: linear-gradient(to bottom, #3498db, #2980b9);
}

[data-theme="light"] .widget input[type=button]:hover {
    background: linear-gradient(to bottom, #2980b9, #21618c);
}

div#buttonbar {
  padding-top:2px;
  height:26px;
  overflow:hidden;
}

body.dashboard div#buttonbar {
   background-color: var(--dark-bg-secondary);
}

div#buttonbar p, div#buttonbar {
    color: var(--dark-text-primary);
}

/* Light mode - remove background from buttonbar */
html[data-theme="light"] div#buttonbar,
html[data-theme="light"] #buttonbar {
    background-color: transparent;
    width: 100%;
}

div.datacell {
    display:-webkit-inline-grid;
    padding: 0px 7px;
    width:inherit;
    max-height:60px;
    min-height:16px;
    vertical-align:middle;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
    color: var(--dark-text-primary);
}

div.datacell img {
    max-width:60px;
}

div.datacell.auto {
    height:auto;
}

div#infonote {
    display:none;
    background: linear-gradient(to bottom, #c82333, #d33);
    border-radius: 5px;
    padding:3px;
    width:550px;
    color:#fff;
    font-weight:bold;
}

.OPT {
    height:28px;
    border:0px;
    background-color: var(--dark-bg-secondary);
}

table.OPT {
    width:100%;
}	

.dataBrowser_content {
    padding:15px;
    background-color: var(--dark-bg-primary);
}

body.dashboard .dataBrowser_content { height: calc(100% - 120px); }

.list {
 border-bottom: 1px solid var(--dark-border);
 border-left:0px;
 background-color: var(--dark-bg-secondary);
}

.list .selected {
  background-color: var(--dark-bg-hover);
}

.list th, .list td {
  padding-top : 0px;
  padding-bottom: 0px;
  padding-left:5px;
  padding-right:2px;
  color: var(--dark-text-primary);
}

th {
  text-align: left;
  background: none;
  color: var(--dark-text-primary);
  border: 1.5px solid #2d3139;
  border-left-width:0px;
  border-top:0px;
  padding-left:5px;
  padding-right:2px;
  height:14px;
  line-height:12px;
}
[data-theme="light"] th {
 border: 1px solid #fff;
}
.HDR {
  height: 23px;
  padding: 1px 5px 0px 5px !important;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.1px;
  font-size: 12px;
}

.HDR th:first-child {
  border-left-width:0px;
}

.HDR th:last-child {
  border-right:0px;
}

th.HDR.money {
  text-align: right;
}

th.HDR.picture {
  text-align: center;
}

th a {
  font-size:11px;
  font-weight:bold;
  text-decoration: none;
  color: var(--dark-text-primary);
}

th, th a:link, th a:visited, th a:active {
    font-family: sans-serif;
    color: var(--dark-text-primary);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

th a:hover {
  color: var(--dark-accent);
}

/* Light mode th */
html[data-theme="light"] th,
html[data-theme="light"] th a:link,
html[data-theme="light"] th a:visited,
html[data-theme="light"] th a:active {
  color: #6e6e6e;
}

/* Light mode table rows and cells */
html[data-theme="light"] table#dbtable tr,
html[data-theme="light"] table#dbtable td {
  background-color: #fff;
}

/* Light mode table row links */
html[data-theme="light"] tr.ROW_ a,
html[data-theme="light"] tr[class*="ROW_"] a {
  color: #6a6a6a;
}

/* Light mode table row borders */
html[data-theme="light"] tr.ROW0 td,
html[data-theme="light"] tr.ROW_0 td,
html[data-theme="light"] tr.ROW1 td,
html[data-theme="light"] tr.ROW_1 td {
  border-bottom: 1px solid rgba(189, 189, 189, 0.3);
}

table.smallicons {margin-top:5px; }
table.smallicons td { border:0 !important;}

.sort {
  background-color: var(--dark-bg-hover);
  border-top: 1px solid var(--dark-border);
  border-bottom: 1px solid var(--dark-accent);
}

.evenrowbg {
    background-color: var(--dark-bg-secondary); 
}

.oddrowbg {
    background-color: var(--dark-bg-primary);
}

/* --- Forms --- */
.footnote {
   padding-top: 2px;
    text-align: left;
    color: var(--dark-text-secondary);
}

fieldset {
  border: none;
  border-top: 1px solid var(--dark-border);
}

legend {
  color: var(--dark-text-primary);
  font-weight: bold;
}

.formFields td {
  text-align: left;
  color: var(--dark-text-primary);
}

.formFields .name,
.formFields .nameError {
  font-weight: bold; 
  color: var(--dark-text-primary); 
  text-align: right;
}

.error {
  background: #4a1a1a;
}

.error .name {
  color: #ff6b6b;
  background: transparent;
}

.required {
  color: #ff6b6b;
}

.hint {
  color: var(--dark-text-secondary);
}

/* --- Buttons --- */
.commonButton {
  width:95px;
  height:21px;
  vertical-align:top;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: var(--dark-text-primary);
  background-color: var(--dark-bg-tertiary);
  border: 1px solid var(--dark-border);
  cursor:pointer;
  border-radius: 3px;
}

.commonButton:hover {
    background-color: var(--dark-bg-hover);
    border-color: var(--dark-accent);
}

.newObjectButton {
  width: 32px;
  height: 32px;
  background-color: var(--dark-accent);
  border: 1px solid var(--dark-border);
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
  opacity: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.newObjectButton:hover {
  background-color: var(--dark-accent-hover);
  opacity: 1;
}

.newObjectButton::before {
  content: "\f067";
  font-family: FontAwesome;
  font-size: 12px;
  line-height: 1;
}
/* --- Messages --- */
.msgInfo {
  margin: 10px 0;
  border: 2px solid #28a745;
  background: var(--dark-bg-secondary);
  padding: 10px 32px;
  color: var(--dark-text-primary);
  border-radius: 5px;
}

.msgInfo .title {
    color: #5cb85c;
    font-weight: bold;
}

.msgWarning {
  margin: 10px 0 0 0;
  border: 2px solid #ffc107;
  background: var(--dark-bg-secondary);
  padding: 10px 32px;
  color: var(--dark-text-primary);
  border-radius: 5px;
}

.msgWarning .title {
    color: #ffc107;
    font-weight: bold;
}

.msgError {
  margin: 10px 0;
  border: 2px solid #dc3545;
  background: var(--dark-bg-secondary);
  padding: 10px 32px;
  color: var(--dark-text-primary);
  border-radius: 5px;
}

.msgError .title {
    color: #ff6b6b;
    font-weight: bold;
}

/* --- Navigation --- */
.navi-tabs {
    background-color: var(--dark-bg-secondary);
    border-bottom: 1px solid var(--dark-border);
}

.navi-tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navi-tabs li {
    display: inline-block;
    margin-right: 5px;
}

.navi-tabs a {
    display: block;
    padding: 8px 15px;
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    text-decoration: none;
    border: 1px solid var(--dark-border);
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}

.navi-tabs a:hover {
    background-color: var(--dark-bg-hover);
}

.navi-tabs a.active {
    background-color: var(--dark-bg-primary);
    border-bottom-color: var(--dark-bg-primary);
}

/* --- Menu --- */
html[data-theme="dark"] #leftmenu {
    color: var(--dark-text-primary);
}

html[data-theme="light"] #leftmenu {
  /* background-color: var(--dark-bg-secondary); */
    color: var(--dark-text-primary);
}

html[data-theme="dark"] div#apps{
        border-right: 1px solid #000;
	background-color:#000;
}

html[data-theme="light"] div#apps{
  /* border-right: 1px solid #ededed; */
  /* background-color:#fff; */
}

.leftmenu-content-wrapper {
  /* background: var(--dark-bg-primary); */
  background: #fff;
}

#leftmenu-panel-header .panel_header {
    padding: 8px 10px;
  /* border-bottom: 1px solid var(--dark-border, #333); */
  border-radius: 20px 0 0 0;
}

#leftmenu-panel-header .mod_header {
    display: flex;
    align-items: center;
    gap: 8px;
}

#leftmenu-panel-header .mod-header-icon {
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
    padding: 1px 5px 0px 1px;
}

html[data-theme="light"] #leftmenu-panel-header .mod-header-icon {
    color: #111;
}

#leftmenu-panel-header .mod-header-title h2 {
    font-size: 17px;
    font-weight: 200;
    text-transform: none;
    letter-spacing: 0;
    color: #ffffff8a;
    margin: 0;
    padding: 2px 0px 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme="light"] #leftmenu-panel-header .mod-header-title h2 {
    color: #111;
}

#leftmenu-panel-header .content {
    display: none;
}

/* Toggle leftmenu functionality */
td.leftmenu {
    transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out;
}

td.leftmenu.leftmenu-collapsed {
    width: 100px !important;
    min-width: 100px !important;
}

#leftmenu-container {
    transition: width 0.3s ease-in-out;
    overflow: hidden;
    height: var(--kms-content-height, calc(100vh - 50px));
    flex-shrink: 0;
}

#leftmenu-container.leftmenu-collapsed {
    width: 100px;
    overflow: hidden;
}

#leftmenu-container.leftmenu-collapsed ul#leftmenu {
    opacity: 0;
    pointer-events: none;
}

#toggle_leftmenu_but {
    cursor: pointer;
    padding: 8px;
    transition: opacity 0.2s ease;
}

#toggle_leftmenu_but:hover {
    opacity: 0.7;
}

body.dashboard #toggle_leftmenu_but {
    display: none;
}

#leftmenu li {
/*    border-bottom: 1px solid var(--dark-border);*/
}

#leftmenu a {
    color: var(--dark-text-primary);
    display: block;
    padding: 8px 10px;
}

#leftmenu a:hover {
    color: #fff;
}

#leftmenu a.active {
    background-color: var(--dark-accent);
    color: #fff;
}

/* --- Topoptions --- */
.topoptions {
  vertical-align: top;
  padding-top: 5px;
  padding-right: 5px;
  padding-left: 20px;
  width: 30%;
  text-align: right;
}

.topoptions div { 
    pointer-events:auto; 
}

.topoptions font,.topoptions a {
    font-size:11px;
    color: var(--dark-text-primary);
}

.topoptions a:hover {
    color: var(--dark-accent);
}

/* --- Icons --- */
.ico16 {
    margin:0px 10px 0px 2px;
    float:left;
    opacity: 0.7;
}
body.kms_e .ico16 {
  margin: 6px 10px 0px 8px;
}

.ico16:hover {
    opacity: 1;
}

/* --- Scrollbars (Webkit) --- */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--dark-bg-tertiary);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dark-bg-hover);
}

/* Light mode webkit scrollbar */
html[data-theme="light"] ::-webkit-scrollbar-track {
    background: #e0e0e0;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #333333;
    border-radius: 6px;
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-bg-primary);
}

/* --- Code and Pre --- */
code, pre {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
    border-radius: 3px;
    padding: 2px 5px;
}

/* --- Tables --- */
table {
    color: var(--dark-text-primary);
}

/* --- Select and Inputs --- */
select option {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

input[readonly] {
    color: var(--dark-text-secondary);
    background-color: var(--dark-bg-secondary);
}

/* Ràdios */
input[type=radio] {
    border-radius: 50%;
}

input[type=radio]:checked {
    background-color: #119ea5;
    border-color: #119ea5;
}

input[type=radio]:checked::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
}

html[data-theme="dark"] input[type=radio] {
    border-color: #818181;
    background-color: #1a2332;
}

html[data-theme="dark"] input[type=radio]:checked {
    background-color: #1cb0e8;
    border-color: #1cb0e8;
}

/* Checkboxes */
table#dbtable input[type=checkbox]:checked::after {
    top: -9px;
}

table#dbtable input#selectAllRows[type=checkbox]:checked::after {
    top: 1px;
}

table#dbtable tr.HDR th:first-child {
  padding: 3px 0px 0px 10px !important;
}

table#dbtable tr.HDR td:first-child {
  padding-left: 5px !important;
}

input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 15px !important;
    height: 15px;
    border: 1px solid #119ea5;
    border-radius: 3px;
    background-color: #ffffff;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    top: 0px;
}

input[type=checkbox]:checked {
    background-color: #119ea5;
    border-color: #119ea5;
}

input[type=checkbox]:checked::after {
    content: "✓";
    position: absolute;
    color: white;
    font-size: 12px;
    font-weight: bold;
    top: -3px;
    left: 1px;
}

html[data-theme="dark"] input[type=checkbox] {
    border-color: #818181;
    background-color: #1a2332;
}

html[data-theme="dark"] input[type=checkbox]:checked {
    background-color: #1cb0e8;
    border-color: #1cb0e8;
}

html[data-theme="dark"] {
    color: var(--dark-text-secondary);
}


div.BOT a:hover {
    color: var(--dark-accent);
}

/* Import other required CSS files */
@import url(buttons.css);
@import url(tabs.css);
@import url(double-list-control.css);
@import url(kms/css/typo.css);

/* Additional dark mode refinements */
.pathbar {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

.pathbar a:link,
.pathbar a:visited {
    color: var(--dark-accent);
}

.screenTitle {
    background-color: var(--dark-bg-secondary);
}

.screenTitle td {
    font-size: 18px;
    font-family: "Helvetica Neue", Arial, sans-serif;
    color: var(--dark-text-primary);
}

hr {
    color: var(--dark-border);
    background-color: var(--dark-border);
    height: 1px;
}

/* ===== LAYOUT: LEFT MENU + CONTENTS ===== */

/* COMENTAT - /* Container principal */ */
/* COMENTAT - body.kms_f, body.kms_b, body[class*="kms_"] { */
/* COMENTAT -     display: flex; */
/* COMENTAT -     flex-direction: row; */
/* COMENTAT -     width: 100%; */
/* COMENTAT -     height: calc(100vh - 50px); /* 50px per la barra superior */ */
/* COMENTAT -     overflow: hidden; */
/* COMENTAT - } */
/* COMENTAT -  */
/* Left menu - fixat a l'esquerra */
/* DUPLICAT - #kmsbody .leftmenu, #kmsbody > #leftmenu { */
/* DUPLICAT -     flex: 0 0 300px; /* No creix ni decreix, amplada fixa 300px */ */
/* DUPLICAT -     max-width: 300px; */
/* DUPLICAT -     min-width: 200px; */
/* DUPLICAT -     height: 100%; */
/* DUPLICAT -     overflow-y: auto; */
/* DUPLICAT -     overflow-x: hidden; */
/* DUPLICAT -     background-color: var(--dark-bg-secondary); */
/* DUPLICAT -     border-right: 1px solid var(--dark-border); */
/* DUPLICAT -     position: relative; */
/* DUPLICAT -     z-index: 10; */
/* DUPLICAT - } */
/* DUPLICAT -  */
/* DUPLICAT - /* Contents - ocupa la resta de l'espai */ */
/* DUPLICAT - #kmsbody .contents, #kmsbody > #contents { */
/* DUPLICAT -     flex: 1 1 auto; /* Creix per ocupar l'espai restant */ */
/* DUPLICAT -     height: 100%; */
/* DUPLICAT -     overflow-y: auto; */
/* DUPLICAT -     overflow-x: auto; */
/* DUPLICAT -     background-color: var(--dark-bg-primary); */
/* DUPLICAT -     position: inherit; */
/* DUPLICAT -     display: block !important; /* Override display:none */ */
/* DUPLICAT - } */
/* DUPLICAT -  */
/* DUPLICAT - /* Menu switcher - botó per amagar/mostrar menu */ */
/* DUPLICAT - .menuSwitcher { */
    position: absolute;
    left: 0;
    top: 50%;
    /* transform: translateY(-50%); */ /* ELIMINAT */
    z-index: 20;
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
    border-left: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}
.menuSwitcher:hover {
    background-color: var(--dark-bg-hover);
}

/* Ajust vertical manual si cal */
.menuSwitcher {
    margin-top: -30px;
}

/* Estat quan el menu està amagat */
.kmsbody.menu-hidden .leftmenu,
#kmsbody.menu-hidden #leftmenu {
    flex: 0 0 0;
    max-width: 0;
    min-width: 0;
    overflow: hidden;
    border-right: none;
}

.kmsbody.menu-hidden .contents,
#kmsbody.menu-hidden #contents {
    flex: 1 1 100%;
}

/* Estils del menu */
#leftmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#leftmenu li {
/*    border-bottom: 1px solid var(--dark-border);*/
    margin: 0;
}

#leftmenu li a {
    display: block;
    padding: 12px 15px;
    color: var(--dark-text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

#leftmenu li a:hover {
    color: #fff;
    padding-left: 20px;
}

#leftmenu li a.active,
#leftmenu li.active a {
    background-color: var(--dark-accent);
    color: #fff;
    font-weight: bold;
    border-left: 3px solid var(--dark-accent-hover);
}

/* Submenu */
#leftmenu ul ul {
  /* background-color: var(--dark-bg-primary); */
}

#leftmenu ul ul li a {
    padding-left: 30px;
    font-size: 10px;
}

#leftmenu ul ul li a:hover {
    padding-left: 35px;
}

/* Header del menu esquerre */
#leftmenu .menu-header {
    background-color: var(--dark-bg-tertiary);
    padding: 15px;
    border-bottom: 2px solid var(--dark-border);
    font-weight: bold;
    color: var(--dark-text-primary);
}

/* Responsive: en pantalles petites, menu collapsable */
@media (max-width: 768px) {
    /* Desactivar grid layout en mòbil */
    #kmsbody,
    div#kmsbody,
    html body.kms_f #kmsbody,
    html body.kms_b #kmsbody,
    body.kms_f div#kmsbody,
    body.kms_b div#kmsbody,
    body.dashboard #kmsbody,
    body.dashboard div#kmsbody,
    html body.dashboard #kmsbody,
    html body.dashboard div#kmsbody {
        display: block !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        /* padding-bottom: 60px !important; */
    }

    /* Assegurar visibilitat del contingut del dashboard en mòbil */
    body.dashboard #kmsbody > #contents,
    body.dashboard #kmsbody > div#contents,
    body.kms_dashboard #kmsbody > #contents,
    body.kms_dashboard #kmsbody > div#contents {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100vh - 120px) !important;
    }

    /* Ocultar/Reposicionar td.leftmenu */
    td.leftmenu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 50px !important;
        max-height: 50px !important;
        z-index: 1000 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Convertir leftmenu en barra inferior fixa */
    .leftmenu,
    #leftmenu,
    div#leftmenu,
    td.leftmenu div#leftmenu,
    #kmsbody > #leftmenu,
    #kmsbody > div#leftmenu,
    html body.kms_f #kmsbody > #leftmenu,
    html body.kms_b #kmsbody > #leftmenu,
    body div#kmsbody > #leftmenu {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        height: 50px !important;
        max-width: 100% !important;
        min-width: 100% !important;
        max-height: 50px !important;
        z-index: 1001 !important;
        border-top: 1px solid var(--dark-border) !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 10px !important;
        grid-column: unset !important;
    }

    /* Background color segons tema */
    html[data-theme="dark"] .leftmenu,
    html[data-theme="dark"] #leftmenu,
    html[data-theme="dark"] div#leftmenu,
    html[data-theme="dark"] td.leftmenu div#leftmenu,
    html[data-theme="dark"] #kmsbody > #leftmenu,
    html[data-theme="dark"] #kmsbody > div#leftmenu,
    html[data-theme="dark"] body.kms_f #kmsbody > #leftmenu,
    html[data-theme="dark"] body.kms_b #kmsbody > #leftmenu,
    html[data-theme="dark"] body div#kmsbody > #leftmenu {
        background-color: #000 !important;
    }

    html[data-theme="light"] .leftmenu,
    html[data-theme="light"] #leftmenu,
    html[data-theme="light"] div#leftmenu,
    html[data-theme="light"] td.leftmenu div#leftmenu,
    html[data-theme="light"] #kmsbody > #leftmenu,
    html[data-theme="light"] #kmsbody > div#leftmenu,
    html[data-theme="light"] body.kms_f #kmsbody > #leftmenu,
    html[data-theme="light"] body.kms_b #kmsbody > #leftmenu,
    html[data-theme="light"] body div#kmsbody > #leftmenu {
        background-color: #fff !important;
    }

    /* Ocultar taula content.content en mòbil per evitar layout de taula */
    table.content {
        display: block !important;
    }

    table.content tbody,
    table.content tr {
        display: block !important;
    }

    table.content td.list {
        display: block !important;
        width: 100% !important;
    }

    /* Fixar table.document al top en mòbil */
    table.document {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }

    /* Ocultar leftmenu-content-wrapper en mòbil */
    .leftmenu-content-wrapper {
        display: none !important;
    }

    /* Apps en horitzontal */
    #apps,
    div#apps,
    #leftmenu #apps,
    div#leftmenu div#apps {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 15px !important;
        width: 100% !important;
        /* height: 100% !important; */
        height: 50px !important;
        position: fixed;
        bottom: 0px;
        z-index: 9999999;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Icones dels apps - tots els fills directes */
    #apps > *,
    div#apps > *,
    #apps a,
    #apps > div,
    #apps > span,
    #apps a.app,
    #apps div.app,
    #apps span.app {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 5px !important;
    }

    /* Icones dins dels enllaços */
    #apps img,
    #apps i,
    #apps svg {
        /* max-width: 30px !important; */
        /* max-height: 30px !important; */
        max-width: 35px !important;
        max-height: 35px !important;
    }

    /* Ajustar contents per ocupar tot l'ample i deixar espai a la barra inferior */
    .contents,
    #contents,
    #kmsbody > #contents,
    #kmsbody > div#contents,
    html body.kms_f #kmsbody > #contents,
    html body.kms_b #kmsbody > #contents,
    body div#kmsbody > #contents {
        width: 100% !important;
        max-width: 100% !important;
        /* height: calc(100vh - 60px) !important; */
        /* max-height: calc(100vh - 60px) !important; */
        /* padding-bottom: 70px !important; */
        grid-column: unset !important;
        box-sizing: border-box !important;
    }
}

/* Dashboard window dins contents */
.dashboard_window {
    background-color: transparent;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 100%;
    border: none;
    padding: 15px;
}

/* Fitxa (modal/overlay) */
#fitxa {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: none;
}

#fitxa.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

#fitxa-contents {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    border-radius: 5px;
    padding: 20px;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
}

/* Light mode for fitxa (modal) */
[data-theme="light"] #fitxa-contents {
    background-color: #ffffff;
    border-color: #dee2e6;
}


/* ===== LEFTMENU MILLORAT AMB ICONES ===== */

/* Reset del leftmenu anterior */
#leftmenu {
    padding: 0;
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    overflow: hidden;
}

/* Menu principal */
#leftmenu > ul,
#leftmenu ul#menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Items de primer nivell */
#leftmenu > ul > li,
#leftmenu ul#menu > li {
    margin: 0;
    position: relative;
}

/* Links de primer nivell */
#leftmenu > ul > li > a,
#leftmenu ul#menu > li > a {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    color: var(--dark-text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    background-color: var(--dark-bg-secondary);
    position: relative;
}

/* Icones abans del text - FontAwesome */
#leftmenu > ul > li > a::before,
#leftmenu ul#menu > li > a::before {
    font-family: FontAwesome;
    margin-right: 12px;
    font-size: 16px;
    width: 20px;
    text-align: center;
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* Icona per defecte */
#leftmenu > ul > li > a::before {
    content: "\f0c9"; /* fa-bars */
}

/* Icones específiques segons el text */
#leftmenu a[id*="new_"]::before,
#leftmenu a:contains("NOVA")::before {
    content: "\f067"; /* fa-plus */
}

#leftmenu a[id*="planner"]::before,
#leftmenu a:contains("CONTROL")::before {
    content: "\f200"; /* fa-dashboard */
}

#leftmenu a.menucol:contains("GESTIÓ")::before,
#leftmenu a:contains("GESTI")::before {
    content: "\f0ae"; /* fa-tasks */
}

#leftmenu a.menucol:contains("SISTEMES")::before,
#leftmenu a:contains("SISTEMES")::before {
    content: "\f233"; /* fa-server */
}

#leftmenu a:contains("CLIENTS")::before {
    content: "\f0c0"; /* fa-users */
}

#leftmenu a:contains("EINES")::before {
    content: "\f0ad"; /* fa-wrench */
}

/* Hover del primer nivell */
#leftmenu > ul > li > a:hover,
#leftmenu ul#menu > li > a:hover {
    background: linear-gradient(90deg, var(--dark-bg-hover) 0%, var(--dark-bg-tertiary) 100%);
    color: #fff;
    padding-left: 22px;
    border-left: 4px solid var(--dark-accent);
}

#leftmenu > ul > li > a:hover::before,
#leftmenu ul#menu > li > a:hover::before {
    opacity: 1;
    color: var(--dark-accent);
    transform: scale(1.1);
}

/* Items actius */
#leftmenu > ul > li > a.active,
#leftmenu ul#menu > li > a.active,
#leftmenu > ul > li.active > a,
#leftmenu ul#menu > li.active > a {
    background: linear-gradient(90deg, var(--dark-accent) 0%, #3a87e8 100%);
    color: #fff;
    font-weight: bold;
    border-left: 4px solid var(--dark-accent-hover);
    box-shadow: 0 2px 8px rgba(18, 165, 149, 0.3);
}

#leftmenu > ul > li > a.active::before,
#leftmenu ul#menu > li > a.active::before {
    opacity: 1;
    color: #fff;
}

/* Submenus (segon nivell) */
#leftmenu ul ul {
  /* background-color: var(--dark-bg-primary); */
    margin: 0;
    padding: 0;
    list-style: none;
}

#leftmenu ul ul li {
    border-bottom: 1px solid rgba(64, 64, 64, 0.3);
}

/* Links de segon nivell */
#leftmenu ul ul li a {
    display: flex;
    align-items: center;
    padding: 10px 18px 10px 35px;
    color: var(--dark-text-secondary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 400;
    transition: all 0.2s ease;
    position: relative;
}

/* Icones per items de segon nivell */
#leftmenu ul ul li a::before {
    content: "\f105"; /* fa-angle-right */
    font-family: FontAwesome;
    margin-right: 8px;
    font-size: 12px;
    width: 15px;
    text-align: center;
    opacity: 0.5;
    transition: all 0.2s ease;
    position: absolute;
    left: 15px;
}

/* Icones específiques pels submenús */
#leftmenu ul ul li a:contains("Planificador")::before {
    content: "\f133"; /* fa-calendar */
}

#leftmenu ul ul li a:contains("Projectes")::before {
    content: "\f0b1"; /* fa-briefcase */
}

#leftmenu ul ul li a:contains("Tasques")::before {
    content: "\f046"; /* fa-check-square */
}

#leftmenu ul ul li a:contains("Comptes")::before {
    content: "\f155"; /* fa-dollar */
}

#leftmenu ul ul li a:contains("Contractes")::before {
    content: "\f0f6"; /* fa-file-text */
}

#leftmenu ul ul li a:contains("Pressupostos")::before {
    content: "\f157"; /* fa-euro */
}

#leftmenu ul ul li a:contains("Documents")::before {
    content: "\f15c"; /* fa-file */
}

#leftmenu ul ul li a:contains("Comptabilitat")::before {
    content: "\f0d6"; /* fa-calculator */
}

#leftmenu ul ul li a:contains("Finances")::before {
    content: "\f201"; /* fa-line-chart */
}

#leftmenu ul ul li a:contains("Vendes")::before {
    content: "\f07a"; /* fa-shopping-cart */
}

#leftmenu ul ul li a:contains("Web")::before {
    content: "\f0ac"; /* fa-globe */
}

#leftmenu ul ul li a:contains("Dominis")::before {
    content: "\f0ac"; /* fa-globe */
}

#leftmenu ul ul li a:contains("Hosting")::before {
    content: "\f233"; /* fa-server */
}

#leftmenu ul ul li a:contains("Xarxa")::before {
    content: "\f0e8"; /* fa-sitemap */
}

#leftmenu ul ul li a:contains("Sistemes")::before {
    content: "\f108"; /* fa-desktop */
}

#leftmenu ul ul li a:contains("Eines")::before {
    content: "\f0ad"; /* fa-wrench */
}

#leftmenu ul ul li a:contains("Documentació")::before,
#leftmenu ul ul li a:contains("Documentaci")::before {
    content: "\f02d"; /* fa-book */
}

/* Hover dels submenús */
#leftmenu ul ul li a:hover {
    color: var(--dark-text-primary);
    padding-left: 40px;
}

#leftmenu ul ul li a:hover::before {
    opacity: 1;
    color: var(--dark-accent);
    left: 18px;
}

/* Submenu actiu */
#leftmenu ul ul li a.active {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-accent);
    font-weight: 500;
    border-left: 3px solid var(--dark-accent);
}

#leftmenu ul ul li a.active::before {
    opacity: 1;
    color: var(--dark-accent);
}

/* Botó especial "NOVA TASCA" */
#leftmenu a#new_task_button {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #fff !important;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    border-radius: 0;
    border: none;
    box-shadow: 0 3px 10px rgba(40, 167, 69, 0.4);
    transition: all 0.3s ease;
}

#leftmenu a#new_task_button::before {
    content: "\f067"; /* fa-plus */
    color: #fff;
    opacity: 1;
    margin-right: 8px;
}

#leftmenu a#new_task_button:hover {
    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.6);
    padding-left: 18px;
    border-left: none;
}

/* Separador visual */
#leftmenu > ul > li:first-child {
    border-top: 2px solid var(--dark-border);
}

/* Scroll personalitzat pel leftmenu */
#leftmenu::-webkit-scrollbar {
    width: 8px;
}

#leftmenu::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
}

#leftmenu::-webkit-scrollbar-thumb {
    background: var(--dark-bg-tertiary);
    border-radius: 4px;
}

#leftmenu::-webkit-scrollbar-thumb:hover {
    background: var(--dark-bg-hover);
}

/* Animació suau quan es carrega */
#leftmenu > ul > li {
    animation: slideInLeft 0.3s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Efecte d'ona en click */
#leftmenu a {
    position: relative;
    overflow: hidden;
}

#leftmenu a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

#leftmenu a:active::after {
    width: 300px;
    height: 300px;
}


/* ===== LEFTMENU MILLORAT (versió simplificada amb JS) ===== */

/* Reset del leftmenu */
#leftmenu {
    padding: 0;
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Menu principal */
#leftmenu > ul,
#leftmenu ul#menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Items de primer nivell */
#leftmenu > ul > li,
#leftmenu ul#menu > li {
    margin: 0;
    position: relative;
}

/* Links de primer nivell */
#leftmenu > ul > li > a,
#leftmenu ul#menu > li > a {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    color: var(--dark-text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    background-color: var(--dark-bg-secondary);
    position: relative;
}

/* Icones FontAwesome dins dels links */
#leftmenu a i.fa {
    margin-right: 10px;
    font-size: 16px;
    width: 20px;
    text-align: center;
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* Hover del primer nivell */
#leftmenu > ul > li > a:hover,
#leftmenu ul#menu > li > a:hover {
    background: linear-gradient(90deg, var(--dark-bg-hover) 0%, var(--dark-bg-tertiary) 100%);
    color: #fff;
    padding-left: 22px;
    border-left: 4px solid var(--dark-accent);
}

#leftmenu > ul > li > a:hover i.fa,
#leftmenu ul#menu > li > a:hover i.fa {
    opacity: 1;
    color: var(--dark-accent);
    transform: scale(1.15);
}

/* Items actius */
#leftmenu > ul > li > a.active,
#leftmenu ul#menu > li > a.active,
#leftmenu > ul > li.active > a,
#leftmenu ul#menu > li.active > a {
    background: linear-gradient(90deg, var(--dark-accent) 0%, #3a87e8 100%);
    color: #fff;
    font-weight: bold;
    border-left: 4px solid var(--dark-accent-hover);
    box-shadow: 0 2px 8px rgba(18, 165, 149, 0.3);
}

#leftmenu > ul > li > a.active i.fa,
#leftmenu ul#menu > li > a.active i.fa {
    opacity: 1;
    color: #fff;
}

/* Submenus (segon nivell) */
#leftmenu ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#leftmenu ul ul li {
    border-bottom: 1px solid rgba(64, 64, 64, 0.3);
    width: 100%;
}

/* Light mode - remove border from submenu items */
html[data-theme="light"] #leftmenu ul ul li {
    border-bottom: none;
    width: auto;
}

/* Links de segon nivell */
#leftmenu ul ul li a {
    display: flex;
    align-items: center;
    padding: 10px 18px 10px 25px;
    color: var(--dark-text-secondary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 400;
    transition: all 0.2s ease;
    position: relative;
}

/* Icones dels submenús */
#leftmenu ul ul li a i.fa {
    margin-right: 8px;
    font-size: 13px;
    width: 15px;
    opacity: 0.6;
}

/* Hover dels submenús */
#leftmenu ul ul li a:hover {
    color: var(--dark-text-primary);
    padding-left: 30px;
}

#leftmenu ul ul li a:hover i.fa {
    opacity: 1;
    color: var(--dark-accent);
}

/* Submenu actiu */
#leftmenu ul ul li a.active {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-accent);
    font-weight: 500;
    border-left: 3px solid var(--dark-accent);
}

#leftmenu ul ul li a.active i.fa {
    opacity: 1;
    color: var(--dark-accent);
}

/* Botó especial "NOVA TASCA" */
#leftmenu a#new_task_button {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: #fff !important;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    border: none;
    box-shadow: 0 3px 10px rgba(40, 167, 69, 0.4);
    transition: all 0.3s ease;
}

#leftmenu a#new_task_button i.fa {
    color: #fff;
    opacity: 1;
}

#leftmenu a#new_task_button:hover {
    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.6);
    padding-left: 18px;
    border-left: none;
}

/* Scroll personalitzat pel leftmenu */
#leftmenu::-webkit-scrollbar {
    width: 8px;
}

#leftmenu::-webkit-scrollbar-track {
    background: var(--dark-bg-primary);
}

#leftmenu::-webkit-scrollbar-thumb {
    background: var(--dark-bg-tertiary);
    border-radius: 4px;
}

#leftmenu::-webkit-scrollbar-thumb:hover {
    background: var(--dark-bg-hover);
}

/* Animació suau quan es carrega */
#leftmenu > ul > li {
    animation: slideInLeft 0.3s ease-out forwards;
    opacity: 0;
}

#leftmenu > ul > li:nth-child(1) { animation-delay: 0.05s; }
#leftmenu > ul > li:nth-child(2) { animation-delay: 0.1s; }
#leftmenu > ul > li:nth-child(3) { animation-delay: 0.15s; }
#leftmenu > ul > li:nth-child(4) { animation-delay: 0.2s; }
#leftmenu > ul > li:nth-child(5) { animation-delay: 0.25s; }

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Efecte d'ona en click */
#leftmenu a {
    position: relative;
    overflow: hidden;
}

#leftmenu a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

#leftmenu a:active::after {
    width: 300px;
    height: 300px;
}


/* ===== MILLORES PER FILES DE TAULES (ROW0 i ROW1) ===== */

/* Files parells (ROW0) */
tr.ROW0,
tr.ROW_0 {
    background-color: var(--dark-bg-secondary);
    transition: background-color 0.2s ease;
}

/* Files senars (ROW1) */
tr.ROW1,
tr.ROW_1 {
    background-color: var(--dark-bg-primary);
    transition: background-color 0.2s ease;
}

/* Hover per totes les files ROW */
tr.ROW0:hover,
tr.ROW_0:hover,
tr.ROW1:hover,
tr.ROW_1:hover,
tr[class*="ROW"]:hover {
    background-color: rgba(18, 165, 149, 0.15) !important;
    cursor: pointer;
}

/* Cel·les dins de les files */
tr.ROW0 td,
tr.ROW_0 td,
tr.ROW1 td,
tr.ROW_1 td {
    border-bottom: 1px solid rgba(64, 64, 64, 0.3);
/*    padding: 8px 10px;*/
    color: var(--dark-text-primary);
}

/* Hover de les cel·les */
tr.ROW0:hover td,
tr.ROW_0:hover td,
tr.ROW1:hover td,
tr.ROW_1:hover td,
tr[class*="ROW"]:hover td {
    color: #fff;
}

/* Links dins de les files */
tr.ROW0 a,
tr.ROW_0 a,
tr.ROW1 a,
tr.ROW_1 a {
    color: var(--dark-accent);
    text-decoration: none;
}

tr.ROW0:hover a,
tr.ROW_0:hover a,
tr.ROW1:hover a,
tr.ROW_1:hover a {
    color: var(--dark-accent-hover);
}

/* Files seleccionades */
tr.ROW0.selected,
tr.ROW_0.selected,
tr.ROW1.selected,
tr.ROW_1.selected,
tr[class*="ROW"].selected {
    background-color: rgba(18, 165, 149, 0.3) !important;
    border-left: 3px solid var(--dark-accent);
}

tr.ROW0.selected td,
tr.ROW_0.selected td,
tr.ROW1.selected td,
tr.ROW_1.selected td {
    color: #fff;
    font-weight: 500;
}

/* Animació suau */
tr[class*="ROW"] {
    transition: all 0.2s ease;
}

/* Millor separació visual */
tr.ROW0:not(:last-child),
tr.ROW_0:not(:last-child),
tr.ROW1:not(:last-child),
tr.ROW_1:not(:last-child) {
    border-bottom: 1px solid rgba(64, 64, 64, 0.2);
}


/* ===== SUBSTITUIR ICONES PNG PER FONTAWESOME ===== */

/* Amagar les imatges PNG originals */
img[src*="edit.png"],
img[src*="duplicate.png"],
img[src*="view.png"],
img[src*="trash.png"] {
    display: none !important;
}

/* Afegir icones FontAwesome als links que contenen aquestes imatges */
a:has(img[src*="edit.png"])::before {
    content: "\f044"; /* fa-edit */
    font-family: FontAwesome;
    font-size: 17px;
    line-height:100%;
    color: var(--dark-accent);
    margin-right: 5px;
    display: inline-block;
    transition: all 0.2s ease;
}

a:has(img[src*="duplicate.png"])::before {
    content: "\f0c5"; /* fa-copy */
    font-family: FontAwesome;
    font-size: 16px;
    color: #6c757d;
    margin-right: 5px;
    display: inline-block;
    transition: all 0.2s ease;
}

a:has(img[src*="view.png"])::before {
    content: "\f06e"; /* fa-eye */
    font-family: FontAwesome;
    font-size: 16px;
    color: #17a2b8;
    margin-right: 5px;
    display: inline-block;
    transition: all 0.2s ease;
}

a:has(img[src*="trash.png"])::before {
    content: "\f1f8"; /* fa-trash */
    font-family: FontAwesome;
    font-size: 16px;
    color: #dc3545;
    margin-right: 5px;
    display: inline-block;
    transition: all 0.2s ease;
}

/* Hover effects */
a:has(img[src*="edit.png"]):hover::before {
    color: var(--dark-accent-hover);
    transform: scale(1.1);
}

a:has(img[src*="duplicate.png"]):hover::before {
    color: #5a6268;
    transform: scale(1.1);
}

a:has(img[src*="view.png"]):hover::before {
    color: #138496;
    transform: scale(1.1);
}

a:has(img[src*="trash.png"]):hover::before {
    color: #c82333;
    transform: scale(1.1);
}

/* ===== MENU_ICON i MENU_NAME al leftmenu ===== */

/* Container del menu item amb icona i nom */
.menu_item,
#leftmenu .menu_item {
    display: flex;
    align-items: center;
    flex-direction: row;
}

/* Icona del menu - ha d'estar a l'esquerra */
.menu_icon,
#leftmenu .menu_icon {
    order: 1;
    margin-right: 12px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.menu_icon img {
    max-width: 20px;
    max-height: 20px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Nom del menu - ha d'estar a la dreta de la icona */
.menu_name,
#leftmenu .menu_name {
    order: 2;
    flex: 1;
    display: inline-block;
}

/* Hover dels menu items */
.menu_item:hover .menu_icon img,
#leftmenu .menu_item:hover .menu_icon img {
    opacity: 1;
    transform: scale(1.1);
}

/* Si el menu_icon i menu_name estan dins d'un link */
#leftmenu a .menu_icon {
    margin-right: 10px;
}

#leftmenu a .menu_name {
    flex: 1;
}


/* ===== MILLORES PER BUTMENU I VIEWCHANGE_LEFT ===== */

/* BUTMENU - Elements del menu dins del leftmenu */
div#butmenu,
#butmenu {
    /* padding: 10px; */
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    border-radius: 0px;
    margin: 2px 0px;
}

/* Butmenu category */
div#butmenu.category {
    display: flex;
    position: relative;
    align-items: center;
    gap: 8px;
    /* padding: 12px 10px 8px 5px; */
    padding: 12px 10px 8px 10px;
    background-color: var(--dark-bg-tertiary);
    border-left: 3px solid transparent;
}

div#butmenu.category:hover {
    /* background: linear-gradient(90deg, var(--dark-bg-hover) 0%, var(--dark-bg-tertiary) 100%); */
    border-left-color: var(--dark-accent);
    /* padding-left: 18px; */
    padding-left: 10px;
}

div#butmenu.category i.fa-folder {
    color: #888;
    font-size: 16px;
    flex-shrink: 0;
}

div#butmenu.category .menu_name {
    flex: 1;
}
div#butmenu.category::after {
    content: "\203A";
    position: absolute;
    right: 5px !important;
    top: 18px;
    transform: rotate(90deg);
    color: #e0e0e0;
}
[data-theme="light"] div#butmenu.category::after {
    color: #a0a0a0;
}

[data-theme="dark"] div#butmenu.category::after {
    color: #e0e0e0;
}

/* Rotar fletxeta quan el menú està obert */
#leftmenu li.item_menu.submenu-open div#butmenu.category::after {
    transform: rotate(-90deg);
    right: 22px !important;
    top: 22px;
}

/* Butmenu normal (subcategories) */
#leftmenu li div#butmenu {
    background-color: transparent;
    border-left: 3px solid transparent;
}

#leftmenu li:hover div#butmenu {
    border-left-color: #c5ced8;
}

/* Dark mode specific for hover menu */
html[data-theme="dark"] #leftmenu li:hover div#butmenu {
    border-left-color: #393a3b;
}

#leftmenu li.selected div#butmenu,
#leftmenu li.sub_selected div#butmenu {
    background: linear-gradient(90deg, var(--dark-accent) 0%, rgba(18, 165, 149, 0.3) 100%);
    border-left-color: var(--dark-accent-hover);
}

/* Light mode specific for selected menu */
[data-theme="light"] #leftmenu li.selected div#butmenu,
[data-theme="light"] #leftmenu li.sub_selected div#butmenu {
    background: linear-gradient(90deg, #006aaa1c 0%, rgba(202, 202, 202, 0.3) 100%);
}

/* Menu name dins butmenu */
div#butmenu div.menu_name,
#butmenu .menu_name {
    /* padding: 0px 0px 0px 8px !important; */
    padding: 0px 0px 0px 0px !important;
    color: var(--dark-text-primary);
    font-size: 11px;
    font-weight: 500;
    flex: 1;
    transition: color 0.2s ease;
}

html[data-theme="dark"] #leftmenu li:hover div#butmenu div.menu_name {
    color: #fff;
}



#leftmenu li.selected div#butmenu div.menu_name,
#leftmenu li.sub_selected div#butmenu div.menu_name {
    color: #fff;
    font-weight: 600;
}

/* Menu icon dins butmenu */
div#butmenu div.menu_icon,
#butmenu .menu_icon {
    order: 1;
    margin-right: 8px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: all 0.3s ease;
}

#leftmenu li:hover div#butmenu div.menu_icon,
#leftmenu li.selected div#butmenu div.menu_icon {
    opacity: 1;
}

div#butmenu div.menu_icon img {
    max-width: 18px;
    max-height: 18px;
    filter: brightness(0.8);
}

li.sub_selected div#butmenu div.menu_icon img {
    filter: brightness(1);
}

html[data-theme="dark"] #leftmenu li:hover div#butmenu div.menu_icon img,
html[data-theme="dark"] #leftmenu li.selected div#butmenu div.menu_icon img {
    filter: brightness(1.2);
}
/* Light mode - invertir icones blanques del leftmenu */
html[data-theme="light"] #leftmenu li:hover div#butmenu div.menu_icon img,
html[data-theme="light"] #leftmenu li.selected div#butmenu div.menu_icon img {
    filter: invert(1) brightness(0.2) contrast(1.2);
}

html[data-theme="light"] div#butmenu div.menu_icon img {
    filter: invert(1) brightness(0.3) contrast(1.1);
}

/* VIEWCHANGE_LEFT - Llista de vistes */
ul#viewchange_left {
    list-style: none;
    margin: 0;
    padding: 0;
  /* background-color: var(--dark-bg-primary); */
}

ul#viewchange_left li {
    list-style: none;
    white-space: nowrap;
    background-image: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid rgba(64, 64, 64, 0.3);
    transition: all 0.2s ease;
}

ul#viewchange_left li a {
    display: flex;
    align-items: center;
    padding: 10px 15px 10px 45px;
    background-image: none;
    color: var(--dark-text-secondary);
    text-decoration: none;
    font-size: 11px;
    font-weight: 400;
    transition: all 0.2s ease;
    position: relative;
    border-left: 3px solid transparent;
}

/* Icona abans del link en viewchange_left */
ul#viewchange_left li a::before {
    content: "\f105"; /* fa-angle-right */
    font-family: FontAwesome;
    position: absolute;
    left: 25px;
    font-size: 14px;
    opacity: 0.5;
    transition: all 0.2s ease;
}

/* Hover de viewchange_left */
ul#viewchange_left li:hover {
}

ul#viewchange_left li:hover a,
ul#leftmenu li ul#viewchange_left li a:hover {
    color: var(--dark-text-primary);
    padding-left: 50px;
    border-left-color: var(--dark-accent);
}

ul#viewchange_left li:hover a::before {
    opacity: 1;
    color: var(--dark-accent);
    left: 28px;
}

/* Item seleccionat de viewchange_left */

[data-theme="light"] ul#viewchange_left li.selected a,
[data-theme="light"] ul#leftmenu li ul#viewchange_left li.selected a {
    color: #000;
    font-weight: 600;
    border-left-color: transparent;
}

[data-theme="dark"] ul#viewchange_left li.selected a,
[data-theme="dark"] ul#leftmenu li ul#viewchange_left li.selected a {
    color: #fff;
    font-weight: 600;
    border-left-color: transparent;
}

[data-theme="dark"] ul#viewchange_left li.selected a::before {
    opacity: 1;
    color: #fff;
}

[data-theme="light"] ul#viewchange_left li.selected a::before {
    opacity: 1;
    color: #000;
}

/* Menu selected dins viewchange_left */
ul#category li.sub_selected div#menu_selected {
    color: #fff;
    text-shadow: none;
    position: relative;
    top: 0;
}

/* Estil específic per leftmenu amb viewchange_left */
ul#leftmenu li ul#viewchange_left li a {
    overflow: hidden;
    color: var(--dark-text-secondary);
    font-size: 11px;
    padding-left: 45px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: 0px;
    font-weight: normal;
    border-top-width: 0px;
    border-bottom-width: 0px;
}

/* Sub item selected */
/* Menu XML specific */
ul#leftmenu.menu_xml div#menu_selected ul#viewchange_left {
    color: var(--dark-text-primary);
    text-shadow: none;
}

ul#leftmenu.menu_xml li.sub div#butmenu div.menu_name {
    color: var(--dark-text-primary);
}

/* Efecte de clicabilitat */
div#butmenu:active,
ul#viewchange_left li:active {
    transform: scale(0.98);
}

/* Cursor pointer per tots els elements clicables */
div#butmenu,
ul#viewchange_left li,
ul#viewchange_left li a {
    cursor: pointer;
}

/* Animació d'entrada */
ul#viewchange_left li {
    animation: fadeInUp 0.3s ease-out forwards;
    opacity: 0;
}

ul#viewchange_left li:nth-child(1) { animation-delay: 0.05s; }
ul#viewchange_left li:nth-child(2) { animation-delay: 0.1s; }
ul#viewchange_left li:nth-child(3) { animation-delay: 0.15s; }
ul#viewchange_left li:nth-child(4) { animation-delay: 0.2s; }
ul#viewchange_left li:nth-child(5) { animation-delay: 0.25s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efecte ripple en click */
div#butmenu::after,
ul#viewchange_left li::after {
    content: "";
    position: absolute;
    top: 13px;
    left: auto;
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}


/* ===== CORRECCIÓ ESTILS FORMULARIS - Més llegible i coherent ===== */

/* Application Contents - Container principal */
div#application_contents,
#application_contents {
    padding: 20px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* DataEditor - Contenidor de formularis */
[data-theme='light'] html {
    background-color: #fff;
}
[data-theme='dark'] html {
    background-color: #000;
}

html[data-theme="light"].kms_b, html[data-theme="light"] body.kms_b,html[data-theme="light"] body.kms_e,html[data-theme="light"] body.kms_f {
    margin: 0;
    padding: 0;
  /* background-color: #fff !important; */
  background-color: #000 !important;
    color: #1e293b !important;
}



.dataEditor,
div.dataEditor {
    border-radius: 6px;
    padding: 25px;
}

/* Ocultar taula OPT buida */
.dataEditor table.OPT:empty {
    display: none;
}

/* Ocultar taula OPT si només té files buides */
.dataEditor table.OPT tr.buttonbar td:empty {
    display: none;
}

.dataEditor table.OPT:has(tr.buttonbar td:empty:only-child) {
    display: none;
}

/* Ocultar taula OPT en mode editor (kms_e) */
body.kms_e table.OPT {
    display: none !important;
}

/* Títols del formulari */
.dataEditor h1,
.dataEditor h2,
.dataEditor h3 {
    color: var(--dark-text-primary);
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.4;
}

.dataEditor h1 {
    font-size: 20px;
    border-bottom: 2px solid var(--dark-accent);
    padding-bottom: 12px;
    margin-bottom: 25px;
}

.dataEditor h2 {
    font-size: 18px;
    color: var(--dark-accent);
    margin-top: 30px;
}

.dataEditor h3 {
    font-size: 16px;
    color: var(--dark-text-secondary);
}

/* Fieldsets i Legends */
.dataEditor fieldset {
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 25px;
    background-color: rgba(45, 45, 45, 0.3);
}

.dataEditor legend {
    color: var(--dark-accent);
    font-weight: 600;
    font-size: 15px;
    padding: 0 10px;
}

/* Taules de formulari - MILLORES CLAU */
.dataEditor table.formFields,
.dataEditor table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0px;
}

.dataEditor table.formFields tr {
    margin-bottom: 15px;
}

.dataEditor table.formFields td {
    padding: 12px 15px;
    vertical-align: middle;
}

/* Noms dels camps - MÉS GRANS I AMB MÉS ESPAI */
.dataEditor table.formFields td.name,
.dataEditor table.formFields td.nameError {
    font-weight: 600;
    color: var(--dark-text-primary);
    text-align: right;
    padding-right: 20px;
    width: 200px;
    min-width: 200px;
    white-space: nowrap;
    font-size: 13px !important;
    line-height: 1.6;
}

.dataEditor table.formFields td.value {
    width: auto;
    max-width: 500px; /* Limita l'amplada dels camps */
}

/* Separació entre files del formulari */
.dataEditor table.formFields tr + tr td {
    padding-top: 15px;
}

/* Inputs, Selects i Textareas - AMPLADA LIMITADA */
.dataEditor input[type="text"],
.dataEditor input[type="email"],
.dataEditor input[type="password"],
.dataEditor input[type="number"],
.dataEditor input[type="tel"],
.dataEditor input[type="url"],
.dataEditor input[type="date"],
.dataEditor input[type="time"],
.dataEditor input[type="datetime-local"],
.dataEditor select,
.dataEditor textarea {
    /* max-width: 450px; */
    /* width: 100%; */
    padding: 10px 14px;
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
    border-radius: 4px;
    color: var(--dark-text-primary);
    font-size: 13px;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
}

/* Inputs petits per números, dates, etc */
.dataEditor input[type="number"],
.dataEditor input[type="date"],
.dataEditor input[type="time"] {
    max-width: 180px;
}

/* Input focus */
.dataEditor input:focus,
.dataEditor select:focus,
.dataEditor textarea:focus {
    border-color: var(--dark-accent);
    background-color: var(--dark-bg-hover);
    box-shadow: 0 0 0 2px rgba(18, 165, 149, 0.15);
}

.dataEditor input::placeholder,
.dataEditor textarea::placeholder {
    color: var(--dark-text-secondary);
    opacity: 0.5;
}

/* Select específic */
.dataEditor select {
    cursor: pointer;
/*    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2312a595' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;*/
    padding-right: 40px;
}

/* Textarea */
.dataEditor textarea {
    min-height: 100px;
    max-width: 100%; /*535px;*/
    resize: vertical;
    line-height: 1.6;
}

/* Checkboxes i Radio buttons */
.dataEditor input[type="checkbox"],
.dataEditor input[type="radio"] {
    width: 15px;
    height: 15px;
    margin-right: 8px;
    accent-color: var(--dark-accent);
    cursor: pointer;
}

/* Labels */
.dataEditor label {
    color: var(--dark-text-primary);
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 6px;
    display: inline-block;
}

/* Hints i notes */
.dataEditor .hint,
.dataEditor .note,
.dataEditor .footnote {
    color: var(--dark-text-secondary);
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.5;
    font-style: italic;
}

/* Required field indicator */
.dataEditor .required {
    color: #ff6b6b;
    font-weight: 700;
    margin-left: 4px;
}

/* Error states */
.dataEditor .error input,
.dataEditor .error select,
.dataEditor .error textarea,
.dataEditor input.error,
.dataEditor select.error,
.dataEditor textarea.error {
    border-color: #ff6b6b;
    background-color: rgba(255, 107, 107, 0.05);
}

.dataEditor .error .hint,
.dataEditor .error-message {
    color: #ff6b6b;
    font-weight: 600;
}

/* Success states */
.dataEditor .success input,
.dataEditor input.success {
    border-color: #5cb85c;
    background-color: rgba(92, 184, 92, 0.05);
}

/* BOTONS - COHERENTS AMB L'ESTIL DARK MODE */
.dataEditor button,
.dataEditor input[type="button"],
.dataEditor input[type="submit"],
.dataEditor input[type="reset"],
.dataEditor .commonButton,
.dataEditor .btn {
    padding: 6px 20px;
    background: #d4d4d4;
    color: #3c3c3c;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.dataEditor button:hover,
.dataEditor input[type="button"]:hover,
.dataEditor input[type="submit"]:hover,
.dataEditor .commonButton:hover {
    background: #d1dbe1;
}

.dataEditor button:active,
.dataEditor input[type="button"]:active,
.dataEditor input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Botó secundari */
.dataEditor button.secondary,
.dataEditor .btn-secondary,
.dataEditor input[type="button"][value*="Cancel"],
.dataEditor input[type="button"][value*="Tancar"] {
    background: linear-gradient(to bottom, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
}

.dataEditor button.secondary:hover {
    background: linear-gradient(to bottom, var(--dark-bg-hover) 0%, var(--dark-bg-tertiary) 100%);
    border-color: var(--dark-accent);
}

/* Botó de cancel·lar/eliminar */
.dataEditor button.danger,
.dataEditor .btn-danger,
.dataEditor input[type="button"][value*="Eliminar"],
.dataEditor input[type="button"][value*="Delete"],
.dataEditor input[type="button"][value*="Esborrar"] {
    background: linear-gradient(to bottom, #dc3545 0%, #c82333 100%);
    color: #fff;
}

.dataEditor button.danger:hover,
.dataEditor .btn-danger:hover {
    background: linear-gradient(to bottom, #e74c3c 0%, #dc3545 100%);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* Grup de botons */
.dataEditor .formButtons,
.dataEditor .button-group {
    display: flex;
    gap: 10px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--dark-border);
    flex-wrap: wrap;
}

.dataEditor .formButtons button,
.dataEditor .button-group button {
    flex: 0 0 auto;
    min-width: 100px;
    margin: 0;
}

/* Icones dins dels botons */
.dataEditor button i.fa,
.dataEditor .commonButton i.fa {
    margin-right: 6px;
    font-size: 13px;
}

/* Botons deshabilitats */
.dataEditor button:disabled,
.dataEditor input:disabled,
.dataEditor button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Camps readonly - Dark theme (default) */
/* Camps readonly - Dark theme (default) */
.datetimepicker:has(input[readonly]),
.dataEditor input[readonly],
.dataEditor select[readonly],
.dataEditor textarea[readonly] {
    /* background-color: #1a1c21; */
    /* color: #888; */
    background-color: var(--dark-bg-secondary);
    color: #a4a4a4;
    border-color: #333;
    cursor: not-allowed;
    opacity: 0.85;
    border: 1px dashed var(--dark-border);
}

.dataEditor input[readonly]:focus,
.dataEditor select[readonly]:focus,
.dataEditor textarea[readonly]:focus {
    border-color: #333;
    background-color: #2d3139;
    box-shadow: none;
}

/* Camps readonly - Light theme */
html[data-theme="light"] .dataEditor input[readonly],
html[data-theme="light"] .dataEditor select[readonly],
html[data-theme="light"] .dataEditor textarea[readonly] {
    background-color: #f8f8f8;
    color: #666;
    border-color: #d0d0d0;
    cursor: not-allowed;
    opacity: 0.85;
}

html[data-theme="light"] .dataEditor input[readonly]:focus,
html[data-theme="light"] .dataEditor select[readonly]:focus,
html[data-theme="light"] .dataEditor textarea[readonly]:focus {
    border-color: #d0d0d0;
    background-color: #f8f8f8;
    box-shadow: none;
}

/* Inputs, Selects i Textareas - Light theme */
html[data-theme="light"] .dataEditor input[type="text"],
html[data-theme="light"] .dataEditor input[type="email"],
html[data-theme="light"] .dataEditor input[type="password"],
html[data-theme="light"] .dataEditor input[type="number"],
html[data-theme="light"] .dataEditor input[type="tel"],
html[data-theme="light"] .dataEditor input[type="url"],
html[data-theme="light"] .dataEditor input[type="date"],
html[data-theme="light"] .dataEditor input[type="time"],
html[data-theme="light"] .dataEditor input[type="datetime-local"],
html[data-theme="light"] .dataEditor select,
html[data-theme="light"] .dataEditor textarea {
    background-color: #ffffff;
    border-color: #d1d5db;
    color: #1f2937;
}

/* Labels - Light theme */
html[data-theme="light"] span[id^="label_"] {
    color: #1f2937;
}

/* Menu names - Light theme */
html[data-theme="light"] div#butmenu div.menu_name,
html[data-theme="light"] #butmenu .menu_name {
    color: #1f2937;
}

/* Botons secundaris - Light theme */
html[data-theme="light"] .dataEditor button.secondary,
html[data-theme="light"] .dataEditor .btn-secondary,
html[data-theme="light"] .dataEditor input[type="button"][value*="Cancel"],
html[data-theme="light"] .dataEditor input[type="button"][value*="Tancar"] {
    background: linear-gradient(to bottom, #f9fafb 0%, #f3f4f6 100%);
    border: 1px solid #d1d5db;
    color: #1f2937;
}

html[data-theme="light"] .dataEditor button.secondary:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #f9fafb 100%);
    border-color: #3dbdd9;
}

/* File uploads */
html[data-theme="dark"] .dataEditor input[type="file"] {
    padding: 10px 16px;
    border: 0;
    border-radius: 5px;
    background-color: #3d4149;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 450px;
    color: #f0f9ff;
    font-weight: 500;
}

html[data-theme="dark"] .dataEditor input[type="file"]:hover {
    background-color: #4a5159;
}

html[data-theme="light"] .dataEditor input[type="file"] {
    padding: 10px 16px;
    border: 0;
    border-radius: 5px;
    background-color: #6f7172;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 450px;
    color: #efefef;
    font-weight: 500;
}

html[data-theme="light"] .dataEditor input[type="file"]:hover {
    background-color: #5a5c5d;
}

/* Picture component file spacing */
div.picture div.file {
    margin-top: 3px;
}

/* Alerts/Messages */
.dataEditor .alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    border-left: 3px solid;
}

.dataEditor .alert-info {
    background-color: rgba(18, 165, 149, 0.1);
    border-left-color: var(--dark-accent);
    color: var(--dark-accent-hover);
}

.dataEditor .alert-success {
    background-color: rgba(92, 184, 92, 0.1);
    border-left-color: #5cb85c;
    color: #5cb85c;
}

.dataEditor .alert-error,
.dataEditor .alert-danger {
    background-color: rgba(255, 107, 107, 0.1);
    border-left-color: #ff6b6b;
    color: #ff6b6b;
}

/* Separadors */
.dataEditor hr {
    border: none;
    border-top: 1px solid var(--dark-border);
    margin: 25px 0;
}

/* Responsive */
@media (max-width: 768px) {
    .dataEditor {
        padding: 15px;
        overflow-x: hidden;
        overflow-y: auto;
        max-height: calc(100vh - 100px);
    }

    /* Cap component del formulari pot superar l'amplada de pantalla */
    .dataEditor * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .dataEditor table.formFields td.name {
        display: block;
        width: 100%;
        text-align: left;
        padding-bottom: 5px;
        font-size: 14px !important;
    }

    .dataEditor table.formFields td.value {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .dataEditor .formButtons,
    .dataEditor .button-group {
        flex-direction: column;
    }

    .dataEditor .formButtons button,
    .dataEditor .button-group button {
        width: 100%;
    }
}

/* Animacions d'entrada - més suau */
.dataEditor {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Millora visual de les taules */
.dataEditor table.formFields tbody tr:hover {
    background-color: rgba(18, 165, 149, 0.03);
}

/* Espaiat millor entre grups de camps */
.dataEditor table.formFields tr.separator td {
    padding-top: 25px;
    border-top: 1px solid var(--dark-border);
}


/* ===== MILLORES CLASSE MIDDLE I CENTRAT DE FORMULARIS ===== */

/* Classe MIDDLE - Labels dels camps més grans i amb més espai */
.middle,
div.middle {
    font-size: 14px !important;
    font-weight: 600;
    color: var(--dark-text-primary);
    line-height: 1.8;
    padding: 8px 0;
    vertical-align: middle;
}

/* Middle dins de labels */
.Label .middle,
.cell.Label .middle {
    font-size: 15px !important;
    font-weight: 600;
    color: var(--dark-text-primary);
    padding: 10px 0;
}

/* Middle amb negreta */
.middle b,
.middle strong {
    /* font-size: 15px !important; */
    /* font-weight: 700; */
    font-size: 13px !important;
    font-weight: 300;
    color: var(--dark-text-primary);
}

/* Contenidor del formulari - CENTRAT */
.dataEditor,
div.dataEditor,
#application_contents {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
}

/* Wrapper del formulari */
.dataEditor .wrap,
.dataEditor .row {
    display: flex;
    align-items: center;
    /* margin-bottom: 18px; */
    gap: 15px;
}

/* Cell Label - columna esquerra */
.dataEditor .cell.Label,
.dataEditor .Label {
    min-width: 220px;
    max-width: 220px;
    text-align: right;
    padding-right: 15px;
    flex-shrink: 0;
}

/* Dos punts separadors */
.dataEditor .middle.dospunts,
.dataEditor .dospunts {
    min-width: 10px;
    max-width: 10px;
    text-align: center;
    color: var(--dark-text-secondary);
    font-weight: 400;
    padding: 0 5px;
}

/* Cell de valor - columna dreta */
.dataEditor .cell:not(.Label) {
    flex: 1;
    max-width: 100%;
}

/* Clear class per forçar nova línia */
.dataEditor .clear {
    clear: both;
}

/* ROW alternades amb més separació */
.dataEditor .row.ROW0,
.dataEditor .ROW0 {
    background-color: transparent;
}

/* Marges generals més grans */
.dataEditor h1 {
    margin-bottom: 30px;
    padding-bottom: 15px;
}

.dataEditor h2 {
    margin-top: 35px;
    margin-bottom: 25px;
}

.dataEditor fieldset {
    margin-bottom: 30px;
    padding: 25px;
}

/* Separació entre grups de camps */
.dataEditor .row + .row {
    margin-top: 5px;
}

/* Separadors de seccions */
.dataEditor .section-separator {
    margin: 35px 0;
    border-top: 2px solid var(--dark-border);
    padding-top: 25px;
}

/* Labels dels inputs */
.dataEditor label {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-text-primary);
    margin-bottom: 8px;
}

/* Inputs dins de cells */
.dataEditor .cell input[type="text"],
.dataEditor .cell input[type="email"],
.dataEditor .cell input[type="password"],
.dataEditor .cell input[type="number"],
.dataEditor .cell input[type="date"],
.dataEditor .cell input[type="time"],
.dataEditor .cell select,
.dataEditor .cell textarea {
    /* width: 100%; */
    /* max-width: 500px; */
}

/* Textarea més gran */
.dataEditor .cell textarea {
    min-height: 120px;
}

/* Botons centrats o alineats a l'esquerra dins del formulari */
.dataEditor .formButtons,
.dataEditor .button-group {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 2px solid var(--dark-border);
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    padding-left: 235px; /* Alineat amb els inputs */
}

/* Millor espaiat per camps de tipus especial */
.dataEditor .cell input[type="checkbox"],
.dataEditor .cell input[type="radio"] {
    margin-left: 3px;
    margin-top: 17px;
}

/* Container principal més ample i centrat */
#application_contents.dataEditor,
div#application_contents {
    max-width: 100%;
    width: 100%;
    padding: 10px;
    border-radius: 10px !important;
}

/* Ajust per pantalles més petites */
@media (max-width: 1024px) {
    #application_contents.dataEditor,
    div#application_contents {
        width: 98%;
        padding: 25px 30px;
    }
    
    .dataEditor .cell.Label,
    .dataEditor .Label {
        min-width: 180px;
        max-width: 180px;
    }
    
    .dataEditor .formButtons {
        padding-left: 195px;
    }
}

@media (max-width: 768px) {
    .dataEditor .wrap,
    .dataEditor .row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .dataEditor .cell.Label,
    .dataEditor .Label {
        min-width: 100%;
        max-width: 100%;
        text-align: left;
        padding-right: 0;
    }
    
    .dataEditor .middle.dospunts,
    .dataEditor .dospunts {
        display: none;
    }
    
    .dataEditor .cell:not(.Label) {
        max-width: 100%;
        width: 100%;
    }
    
    .dataEditor .formButtons {
        padding-left: 0;
        flex-direction: column;
        width: 100%;
    }
    
    .dataEditor .formButtons button {
        width: 100%;
    }
}

/* Millor alineació vertical dels elements */
.dataEditor .wrap,
.dataEditor .row {
    align-items: flex-start;
}

/* Span dins de middle també més gran */
.middle span,
.middle b span {
    font-size: inherit;
}

/* ID dels labels */
span[id^="label_"] {
    /* font-size: 15px !important; */
    /* font-weight: 600; */
    font-size: 13px !important;
    font-weight: 300;
    color: var(--dark-text-primary);
}

/* Taules dins del dataEditor també centrades */
.dataEditor table.formFields {
    max-width: 1200px;
    margin: 0 auto 25px auto;
}

/* Clear both per evitar problemes de layout */
.dataEditor::after,
.dataEditor .row::after {
    content: "";
    display: table;
    clear: both;
}


/* ===== ESTILS PER GRUPS AMB TOGGLE MENU ===== */

/* Container del grup */
form#dm .group,
form#dm div.group {
    background: var(--dark-bg-secondary, #fff);
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 10px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

form#dm .group:hover {
    border-color: var(--dark-accent);
    transform: translateX(3px);
}

form#dm .group:active {
    transform: translateX(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Icona abans del títol del grup */
form#dm .group::before {
    content: "\f0da"; /* fa-caret-right */
    font-family: FontAwesome;
    font-size: 16px;
    color: var(--dark-accent);
    margin-right: 12px;
    transition: transform 0.3s ease;
}

form#dm .group.expanded::before {
    transform: translateY(-50%) rotate(-90deg);
}

/* Títol del grup (esquerra) */
form#dm .group .left,
form#dm .group > div.left {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-text-primary);
    flex: 1;
    padding-left: 5px;
}

/* Control del grup (dreta) */
form#dm .group .ctr,
form#dm .group .right,
form#dm .group > div.ctr,
form#dm .group > div.right {
    font-size: 0;
    font-weight: 500;
    color: var(--dark-accent);
    padding: 4px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

form#dm .group:hover .ctr,
form#dm .group:hover .right {
    color: var(--dark-accent-hover);
}

/* Icona de control */
form#dm .group #ctrl::after,
form#dm .group .ctr::after {
    content: "\f078"; /* fa-chevron-down */
    font-family: FontAwesome;
    margin-left: 8px;
    font-size: 11px;
    transition: transform 0.3s ease;
}

form#dm .group.expanded #ctrl::after,
form#dm .group.expanded .ctr::after {
    transform: rotate(180deg);
}

/* Contingut del grup (collapsable) */
div[id^="group"] {
    background-color: var(--dark-bg-primary);
    /* border-left: 3px solid var(--dark-accent); */
    /* border-radius: 6px; */
    border-left: 2px solid var(--dark-accent);
    border-radius: 0;
    padding: 15px 10px;
    margin-top: 0px;
    overflow: hidden;
}

div[id^="group"] .LISTFORM {
    padding: 0;
}

/* Separador abans del grup */
.sep + .group {
    margin-top: 30px;
}

/* Efecte ripple en click */
.group::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(18, 165, 149, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
    pointer-events: none;
}

.group:active::after {
    width: 300px;
    height: 300px;
}

/* Form group (si s'utilitza aquesta classe) */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark-text-primary);
    font-size: 14px;
}

/* LISTFORM dins del grup */
.LISTFORM {
    background-color: transparent;
    padding: 15px 0;
}

/* Millor espaiat per files dins de grups */
div[id^="group"] .row,
div[id^="group"] .wrap {
    padding: 0px 5px;
}

div[id^="group"] .cell.Label {
    min-width: 260px;
    max-width: 260px;
}

/* Animació smooth per l'obertura/tancament */
div[id^="group"] {
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}

/* Estat col·lapsat */
div[id^="group"][style*="display: none"] {
    max-height: 0;
    padding: 0;
    margin: 0;
    border: none;
}

/* Indicador visual de grup obert/tancat */
.group.collapsed {
    border-left: 3px solid transparent;
}

.group.expanded {
    border-left: 3px solid var(--dark-accent);
}

/* Comptador de camps dins del grup (opcional) */
.group .badge-count {
    background-color: var(--dark-accent);
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 10px;
}

/* Millor contrast en focus */
.group:focus {
    outline: 2px solid var(--dark-accent);
    outline-offset: 2px;
}

/* Millora per grups niuats (si n'hi ha) */
.group .group {
    margin: 15px 0;
    background: linear-gradient(to bottom, var(--dark-bg-secondary) 0%, var(--dark-bg-primary) 100%);
}

/* Responsive */
@media (max-width: 768px) {
    .group {
        padding: 12px 15px;
    }
    
    .group .left {
        font-size: 14px;
    }
    
    .group .ctr,
    .group .right {
        font-size: 11px;
        padding: 3px 10px;
    }
    
    div[id^="group"] .LISTFORM {
        padding: 15px;
    }
}

/* Transició suau per SlideToggle */
div[id^="group"] {
    overflow: hidden;
}


/* ===== ESTILS PER TAULA TOP (HEAD-APP) ===== */

/* Taula principal del header de l'aplicació */
table.top,
table#head-app,
#head-app {
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
}

/* Cel·les de la taula top */
table.top td,
table#head-app td,
#head-app td {
    padding: 0px 6px;
    vertical-align: middle;
    color: var(--dark-text-primary);
}

/* Logo i títol */
table.top td.logo,
#head-app td.logo {
    width: 30%;
    padding-left: 25px;
}

table.top .logo,
table.top .logo a,
#head-app .logo,
#head-app .logo a {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

table.top .logo:hover,
#head-app .logo:hover {
    color: var(--dark-accent-hover);
}

/* Opcions de la dreta */
table.top .topoptions,
#head-app .topoptions {
    text-align: right;
    padding-right: 25px;
    width: 30%;
}

table.top .topoptions font,
table.top .topoptions a,
#head-app .topoptions font,
#head-app .topoptions a {
    font-size: 11px;
    font-weight: 400;
    color: var(--dark-text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

table.top .topoptions a:hover,
#head-app .topoptions a:hover {
    color: var(--dark-accent);
    font-weight: 100 !important;
}

/* Botons i enllaços dins del top */
table.top a,
#head-app a {
    color: var(--dark-text-primary);
    transition: color 0.2s ease;
}

table.top a:hover,
#head-app a:hover {
    color: var(--dark-accent);
}

/* User panel dins del top */
table.top .user-panel,
#head-app .user-panel {
    background-color: rgba(58, 58, 58, 0.5);
    border-radius: 6px;
    padding: 8px 12px 7px 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

table.top .user-panel img,
#head-app .user-panel img {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    border: 2px solid var(--dark-accent);
}

table.top .user-panel .info,
#head-app .user-panel .info {
    color: var(--dark-text-primary);
    font-size: 12px;
}

table.top .user-panel .info a,
#head-app .user-panel .info a {
    color: var(--dark-accent);
    font-weight: 600;
}

/* Icones dins del top */
table.top .ico16,
#head-app .ico16 {
    display: inline-block;
    margin: 0 5px;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

table.top .ico16:hover,
#head-app .ico16:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Breadcrumbs o navigació dins del top */
table.top .breadcrumb,
#head-app .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

table.top .breadcrumb a,
#head-app .breadcrumb a {
    color: var(--dark-text-secondary);
    text-decoration: none;
}

table.top .breadcrumb a:hover,
#head-app .breadcrumb a:hover {
    color: var(--dark-text-primary);
}

table.top .breadcrumb .separator,
#head-app .breadcrumb .separator {
    color: var(--dark-text-secondary);
}

/* Títol de la pàgina dins del top */
table.top h1,
table.top h2,
#head-app h1,
#head-app h2 {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

/* Cel·la central del top */
table.top td:not(.logo):not(.topoptions),
#head-app td:not(.logo):not(.topoptions) {
    text-align: center;
    color: var(--dark-text-primary);
}

/* Estil per div MAIN dins del top */
table.top td#midhead,
#head-app td#midhead {
    text-align: center;
    padding: 10px;
}

table.top td#midhead div.MAIN,
#head-app td#midhead div.MAIN {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

table.top td#midhead div.MAIN font,
#head-app td#midhead div.MAIN font {
    color: #fff !important;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Botó de menu (si n'hi ha) */
table.top .menu-toggle,
#head-app .menu-toggle {
    background-color: transparent;
    border: none;
    color: var(--dark-text-primary);
    font-size: 20px;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.2s ease;
}

table.top .menu-toggle:hover,
#head-app .menu-toggle:hover {
    color: var(--dark-accent);
}

/* Badges o notificacions */
table.top .badge,
#head-app .badge {
    background-color: var(--dark-accent);
    color: #fff;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 5px;
}

/* Dropdown menus dins del top */
table.top .dropdown,
#head-app .dropdown {
    position: relative;
    display: inline-block;
}

table.top .dropdown-content,
#head-app .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--dark-bg-secondary);
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--dark-border);
    border-radius: 4px;
    z-index: 1000;
    margin-top: 5px;
}

table.top .dropdown:hover .dropdown-content,
#head-app .dropdown:hover .dropdown-content {
    display: block;
}

table.top .dropdown-content a,
#head-app .dropdown-content a {
    color: var(--dark-text-primary);
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s ease;
}

table.top .dropdown-content a:hover,
#head-app .dropdown-content a:hover {
    background-color: var(--dark-bg-hover);
    color: var(--dark-accent);
}

/* Responsive */
@media (max-width: 768px) {
    table.top td.logo,
    #head-app td.logo {
        width: auto;
        padding-left: 15px;
    }
    
    table.top .topoptions,
    #head-app .topoptions {
        width: auto;
        padding-right: 15px;
    }
    
    table.top .logo,
    #head-app .logo {
        font-size: 16px;
    }
    
    table.top .user-panel,
    #head-app .user-panel {
        padding: 6px 10px;
    }
}

/* Millora visual amb ombra i profunditat */
table.top,
#head-app {
    position: relative;
    z-index: 100;
}

/*
 * table.top::after,
#head-app::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--dark-accent), transparent);
    opacity: 0.3;
}
*/
/* Light mode - change gradient color */
/*
html[data-theme="light"] table.top::after,
html[data-theme="light"] #head-app::after {
    background: linear-gradient(to right, transparent, #a8a8a8, transparent);
}
*/

/* ===== DATACELL - ELEMENTS EN FILA (FLEXBOX) ===== */

/* Datacell com a contenidor flex */
div.datacell {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0px 7px;
    width: inherit;
    max-height: 60px;
    min-height: 15px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 5px);
}

/* Icon status dins del datacell */
.datacell .icon_status,
.datacell div.icon_status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

.datacell .icon_status img {
    max-width: 15px;
    max-height: 15px;
    display: block;
}

/* Altres divs dins del datacell */
.datacell > div {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* Divs amb text que poden créixer */
.datacell > div:not(.icon_status) {
    flex: 1 1 auto;
    min-width: 0; /* Permet truncar text */
}

/* Elimina floats dins de datacell */
.datacell div[style*="float"] {
    float: none !important;
}

/* Links dins del datacell */
.datacell a {
    display: inline-flex;
    align-items: center;
    color: var(--dark-accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.datacell a:hover {
    color: var(--dark-accent-hover);
}

/* Imatges dins del datacell */
.datacell img {
    max-width: 60px;
    max-height: 60px;
    display: inline-block;
    vertical-align: middle;
}

/* Span, p, b dins del datacell */
.datacell span,
.datacell p,
.datacell b {
    display: inline;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Datacell amb classe nowrap */
div.datacell.nowrap {
    white-space: nowrap;
}

/* Datacell amb classe auto */
div.datacell.auto {
    height: auto;
    max-height: none;
}

/* Icon amb spaceicon */
div.spaceicon {
    width: 10px;
    height: 10px;
    display: inline-flex;
    padding-left: 5px;
    flex: 0 0 auto;
}

/* Millora visual dels elements */
.datacell > div:not(:last-child) {
    margin-right: 0; /* Gap ho controla */
}

/* Text truncat dins del datacell */
.datacell {
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Assegura que els fills no trenquin el layout */
.datacell > * {
    flex-shrink: 1;
}

/* Icon status amb link */
.icon_status a {
    display: inline-flex;
    align-items: center;
}

/* Padding específic per divs amb estil inline */
.datacell div[style*="padding-top"] {
    padding-top: 0 !important; /* Elimina padding-top inline */
    display: inline-flex;
    align-items: center;
}

.datacell div[style*="padding-left"] {
    padding-left: 0 !important; /* Gap ho controla */
}

/* ROW cells amb datacell */
td .datacell,
.cell .datacell {
    width: 100%;
}

/* Hover en datacell */
tr:hover .datacell {
    /* Heredat del tr:hover */
}


/* ===== MILLORES PANEL_CONTAINER I BUTTONBAR ===== */

/* Panel principal */
div#panel {
    background-color: var(--dark-bg-secondary);
    border-radius: 0px 6px 6px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    height: 100%;
    overflow-y: auto;
}

/* Dark mode */
html[data-theme="dark"] div#panel {
    background-color: var(--dark-bg-primary);
}

/* Light mode - remove box-shadow and background from panel */
html[data-theme="light"] div#panel {
    box-shadow: none;
    background-color: #fff;
    height: 100%;
}

/* Panel title - Icona i títol en línia */
.panel_title,
div.panel_title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: linear-gradient(to bottom, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%);
    border-bottom: 2px solid var(--dark-border);
    border-radius: 6px 6px 0 0;
    font-size:15px;
}

/* Si hi ha una icona img dins del title */
.panel_title img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    vertical-align: middle;
}

/* Text del títol */
.panel_title h1,
.panel_title > span,
.panel_title > font {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark-text-primary);
    margin: 0;
    line-height: 1.3;
}

/* Panel container */
.panel_header,
div.panel_header {
    padding: 0;
}

/* BUTTONBAR - Millora completa */
div#buttonbar,
#buttonbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
    min-height: 45px;
    gap: 15px;
}

/* Left buttons - Alineats a l'esquerra */
div#leftbuttons,
#leftbuttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

/* Right buttons - Alineats a la dreta */
div#rightbuttons,
#rightbuttons {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: flex-end;
    overflow-x: auto;
}

/* Botons dins del buttonbar */
#buttonbar button,
#buttonbar input[type="button"],
#buttonbar .customButton,
#leftbuttons button,
#leftbuttons input[type="button"],
#rightbuttons button,
#rightbuttons input[type="button"] {
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Light mode - remove box-shadow from buttons */
html[data-theme="light"] #buttonbar button,
html[data-theme="light"] #buttonbar input[type="button"],
html[data-theme="light"] #buttonbar .customButton,
html[data-theme="light"] #leftbuttons button,
html[data-theme="light"] #leftbuttons input[type="button"],
html[data-theme="light"] #rightbuttons button,
html[data-theme="light"] #rightbuttons input[type="button"] {
    box-shadow: none;
}

#buttonbar button:hover,
#buttonbar input[type="button"]:hover,
#leftbuttons button:hover,
#rightbuttons button:hover {
    /* box-shadow: 0 3px 6px rgba(18, 165, 149, 0.3); */
    transform: translateY(-1px);
}

#buttonbar button:active,
#buttonbar input[type="button"]:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Botó de back */
#leftbuttons .customButton,
#buttonbar .customButton {
    background-color: none;
    border: 1px solid var(--input-border, rgba(255, 255, 255, 0.2)) !important;
    color: #dedede;
    padding: 6px 10px !important;
}

#leftbuttons .customButton:hover {
    border-color: var(--dark-accent);
}

/* Light mode customButton */
html[data-theme="light"] #leftbuttons .customButton,
html[data-theme="light"] #buttonbar .customButton {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--input-border, rgba(0, 0, 0, 0.15)) !important;
  color: #333333;
  padding: 4px 10px !important;
}

/* Search dins del rightbuttons */
#rightbuttons #search,
#buttonbar #search {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width:1100px;
}

#rightbuttons #search form,
#buttonbar #search form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: flex-end;
    flex-wrap: nowrap !important;
}

/* Neutralitzar floats inline dins de #search */
#rightbuttons #search > div,
#buttonbar #search > div,
#rightbuttons #search > form > div,
#buttonbar #search > form > div {
    float: none !important;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

/* Forçar display flex només pels divs que no tenen display:none */
#rightbuttons #search > div:not([style*="display:none"]):not([style*="display: none"]),
#buttonbar #search > div:not([style*="display:none"]):not([style*="display: none"]),
#rightbuttons #search > form > div:not([style*="display:none"]):not([style*="display: none"]),
#buttonbar #search > form > div:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex !important;
}

/* Forçar específicament per cada ID per sobreescriure estils inline */
#rightbuttons #searchBox,
#rightbuttons #fieldSelector,
#rightbuttons #viewChanger,
#rightbuttons #searchCombo,
#rightbuttons #dateSearch1,
#rightbuttons #dateSearch2 {
    display: flex !important;
    float: none !important;
}

/* Els divs ocults no ocupen espai */
#rightbuttons #search > form > div[style*="display:none"],
#rightbuttons #search > form > div[style*="display: none"],
#buttonbar #search > form > div[style*="display:none"],
#buttonbar #search > form > div[style*="display: none"] {
    display: none !important;
    flex: 0 0 auto;
}

/* Els inputs i selects dins dels divs del form ocupen 100% */
#rightbuttons #search > form > div > input,
#rightbuttons #search > form > div > select,
#buttonbar #search > form > div > input,
#buttonbar #search > form > div > select {
    flex: 1 1 auto;
    min-width: 0;
}

/* fieldSelector manté la mida del seu contingut */
#rightbuttons #search #fieldSelector,
#buttonbar #search #fieldSelector {
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

#rightbuttons #search #fieldSelector select,
#buttonbar #search #fieldSelector select {
    flex: 0 1 auto;
    min-width: 0;
}

/* viewChanger manté la mida del seu contingut */
#rightbuttons #search #viewChanger,
#buttonbar #search #viewChanger {
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

#rightbuttons #search #viewChanger select,
#rightbuttons #search #viewchange,
#buttonbar #search #viewChanger select,
#buttonbar #search #viewchange {
    flex: 0 1 auto;
    min-width: 0;
}

/* Forçar nowrap a TOTS els nivells dins de rightbuttons */
#rightbuttons,
#rightbuttons > *,
#rightbuttons * {
    flex-wrap: nowrap !important;
}

/* Assegurar que tots els inputs i selects es poden reduir */
#rightbuttons input,
#rightbuttons select {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#rightbuttons #search input[type="text"],
#buttonbar #search input[type="text"] {
    background-color: none;
    border: 1px solid var(--dark-border);
    border-radius: 4px;
    color: var(--dark-text-primary);
    font-size: 12px;
    transition: all 0.2s ease;
}

#rightbuttons #search input[type="text"]:focus,
#buttonbar #search input[type="text"]:focus {
    border-color: var(--dark-accent);
    background-color: var(--dark-bg-hover);
    outline: none;
    box-shadow: 0 0 0 2px rgba(18, 165, 149, 0.15);
}

/* Light mode - remove background from search input */
html[data-theme="light"] #rightbuttons #search input[type="text"],
html[data-theme="light"] #buttonbar #search input[type="text"] {
    background-color: transparent;
}

/* Botó de cerca */
.searchButton,
input.searchButton {
    width: 32px !important;
    height: 32px !important;
    background: var(--dark-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 16px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.searchButton:hover {
    background-color: var(--dark-accent-hover) !important;
    transform: scale(1.05);
}

/* Config button */
.configButton,
input.configButton {
    width: 32px !important;
    height: 32px !important;
    background: var(--dark-bg-tertiary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2312a595' d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z'/%3E%3Cpath fill='%2312a595' d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319z'/%3E%3C/svg%3E") no-repeat center center !important;
    background-size: 16px !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.configButton:hover {
    background-color: var(--dark-bg-hover) !important;
    border-color: var(--dark-accent) !important;
}

/* Export i Import buttons */
.exportButton,
.importButton {
    width: 29px !important;
    height: 29px !important;
    background-color: var(--dark-bg-tertiary) !important;
    border-radius: 4px !important;
    cursor: pointer;
    opacity: 0.8;
}

.exportButton:hover,
.importButton:hover {
    opacity: 1;
    background-color: var(--dark-bg-hover) !important;
    border-color: var(--dark-accent) !important;
}

/* Mobile menu button */
#mobmenu,
div#mobmenu {
    display: none; /* Amagar en desktop */
}

/* View changer dins del search */
#search select {
    padding: 8px 12px 7px 12px;
    background-color: none;
    border: 1px solid var(--input-border, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 4px;
    color: var(--dark-text-primary);
    font-size: 12px;
    cursor: pointer;
}

/* Light mode #search select */
html[data-theme="light"] #search select {
  padding: 7px 12px;
  background-color: transparent;
  border: 1px solid var(--input-border, rgba(0, 0, 0, 0.15)) !important;
  border-radius: 4px;
  color: var(--dark-text-primary);
  font-size: 12px;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    #buttonbar {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        padding: 10px;
        gap: 8px;
        overflow-x: auto;
    }

    #leftbuttons {
        flex: 0 1 auto;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    #rightbuttons {
        flex: 1 1 auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    #buttonbar button,
    #buttonbar input[type="button"],
    #leftbuttons button,
    #leftbuttons input[type="button"],
    #rightbuttons button,
    #rightbuttons input[type="button"] {
        font-size: 11px;
        padding: 5px 8px;
        white-space: nowrap;
    }

    #rightbuttons #search input[type="text"] {
        width: 120px;
        min-width: 80px;
    }

    /* Ocultar select#queryfield en mòbil */
    select#queryfield {
        display: none;
    }
}

/* Padding del panel amb buttonbar */
div#panel {
    padding: 0;
}

/* Millor separació visual */
#buttonbar + * {
    margin-top: 5px;
}


/* ===== COLOR DE FONS MARCADOR PER TR.ROW_ ===== */

/* Files amb classe ROW_ (fileres de taules) */
tr.ROW_,
tr[class*="ROW_"] {
    background-color: rgba(18, 165, 149, 0.08) !important;
    transition: all 0.2s ease;
}

/* Hover en files ROW_ */
tr.ROW_:hover,
tr[class*="ROW_"]:hover {
    background-color: rgba(18, 165, 149, 0.15) !important;
    border-left-color: var(--dark-accent-hover);
}

tr.ROW_:hover td,
tr[class*="ROW_"]:hover td {
    background-color: var(--dark-bg-hover) !important;
}

/* Cel·les dins de ROW_ */
tr.ROW_ td,
tr[class*="ROW_"] td {
    color: var(--dark-text-primary);
}

/* Links dins de ROW_ */
tr.ROW_ a,
tr[class*="ROW_"] a {
    color: var(--dark-accent-hover);
    font-weight: 500;
}

/* ===== FIXES: MOD_HEADER IMG I MENUSWITCHER ===== */

/* Imatge del mod_header més petita */

#mod_header img,
.mod_header img,
div#mod_header img {
    max-width: 24px !important;
    max-height: 24px !important;
    width: 24px !important;
    height: 24px !important;
}

.mod_header h2 {
  margin: 6px 2px;
  font-size: 20px;
  font-weight: 100;
  letter-spacing: 0.3px;
}

/* MenuSwitcher - eliminar translateY */
.menuSwitcher {
    position: absolute;
    left: 0;
    top: 50%;
    /* transform: translateY(-50%); */ /* ELIMINAT */
    z-index: 20;
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
    border-left: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

/* Ajust vertical manual si cal */
.menuSwitcher {
    margin-top: -30px; /* Ajusta segons sigui necessari */
}

.menuSwitcher:hover {
    background-color: var(--dark-bg-hover);
}


/* ===== TABLE.TOP / #HEAD-APP - DARK MODE ===== */

table#head-app,
table.top {
    height: 50px !important;
}

/* Quick menu items */
ul.quick_menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 50px;
    gap: 5px;
}

ul.quick_menu li {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    color: var(--dark-text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Home button */
ul.quick_menu li.quick_menu_item_home,
ul.quick_menu li.quick_menu_item_selected_home {
    color: #fff;
    padding: 8px 12px 7px 12px;
}

ul.quick_menu li.quick_menu_item_home:hover {
    background-color: var(--dark-bg-hover);
    transform: translateY(-1px);
}

/* Regular menu items */
ul.quick_menu li.quick_menu_item {
    background-color: transparent;
}

ul.quick_menu li.quick_menu_item:hover {
    background-color: var(--dark-bg-hover);
    color: var(--dark-accent);
}

/* Selected menu item */
ul.quick_menu li.quick_menu_item_selected {
    background-color: var(--dark-accent);
    color: #fff;
}

/* Top options panel (user, date, logout) */

td.topoptions a {
    color: var(--dark-text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

td.topoptions a:hover {
    color: var(--dark-accent);
}


td.topoptions b {
    color: var(--dark-accent);
    font-weight: 100;
    padding-left: 5px;
}

/* Light mode adaptation */
[data-theme="light"] td.topoptions b {
    color: #808080;
}

/* Mobile menu */
ul.mobile_menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 15px;
    height: 50px;
}

ul.mobile_menu li {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    color: var(--dark-text-primary);
    font-size: 14px;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
    ul.quick_menu {
        display: none;
    }
    
    ul.mobile_menu {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
    
    td.topoptions {
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
        padding: 5px 15px;
    }
}


/* ===== TOPOPTIONS ALIGNMENT FIX ===== */

/* Force right alignment and proper layout */
table#head-app tr td.topoptions,
table.top tr td.topoptions {
    text-align: right !important;
    width: auto !important;
    padding-right: 10px !important;
    padding-left: 0px !important;
    display: table-cell !important;
    vertical-align: middle !important;
}

/* Container for all topoptions elements */
td.topoptions {
    white-space: nowrap;
}

/* Individual elements inline */
td.topoptions > div {
    float: none !important;
    margin-left: 10px;
    vertical-align: middle;
}

/* Theme switcher specific */
td.topoptions .theme-switcher {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

/* Remove any conflicting flex */
td.topoptions {
    display: table-cell !important;
}

.switch input:checked + .slider::before {
  transform: translateX(32px);
  content: "\f86f";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  background-color: #f8f9fa;
  color: #495057;
}



/* ===== THEME SWITCHER - CLEAN DESIGN ===== */

.theme-switcher {
    display: inline-block;
    vertical-align: middle;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Track/background del switch */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3a4a5c;
    transition: 0.3s;
    border-radius: 28px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

/* Light mode adaptation */
[data-theme="light"] .slider {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

/* Botó que es desplaça amb les icones */
.slider:before {
    font-family: "FontAwesome";
    position: absolute;
    content: "\f186"; /* fa-moon-o */
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: #000;
    color: #d6d6d6;
    transition: 0.3s;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Quan està checked (light mode) */
.switch input:checked + .slider {
    background-color: #8b949e;
}

/* Light mode adaptation */
[data-theme="light"] .switch input:checked + .slider {
    background-color: #f9f9f9;
}

.switch input:checked + .slider:before {
    transform: translateX(32px);
    content: "\f185"; /* fa-sun-o */
    background-color: #f8f9fa;
    color: #495057;
}

.slider:hover {
    opacity: 0.9;
}


/* ========================================
   RESPONSIVE MENU HAMBURGUESA - TOTES LES PÀGINES
   ======================================== */

/* Desktop: hamburguesa ocult */
.hamburger-menu {
    display: none;
}

/* Mobile <= 768px */
@media (max-width: 768px) {
    /* OCULTAR quick_menu */
    ul.quick_menu {
        display: none !important;
    }
    
    /* OCULTAR elements topoptions */
    .topoptions-wrapper > .theme-switcher,
    .topoptions-wrapper > .top-logout {
        display: none !important;
    }
    
    /* MOSTRAR hamburguesa */
    .hamburger-menu,
    #hamburger-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
	margin:0;
    }
    
    .hamburger-menu i {
        display: inline !important;
    }
    
}

/* ========================================
   MOBILE DROPDOWN MENU - ESTILS
   ======================================== */

#mobile-dropdown-menu {
    display: none !important;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    background: var(--kms-bg-primary);
    border-bottom: 2px solid var(--border-color);
    z-index: 9999;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    max-height: calc(100vh - 50px);
    overflow-y: auto;
}

#mobile-dropdown-menu i {
    width: 15px;
    text-align: center;
}

/* Shadow diferent per theme light */
html[data-theme="light"] #mobile-dropdown-menu {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
}

#mobile-dropdown-menu.active {
    display: block !important;
}

#mobile-dropdown-menu .mobile-menu-section {
    border-bottom: 1px solid var(--border-color);
}

#mobile-dropdown-menu .mobile-menu-section:last-child {
    border-bottom: none;
}

#mobile-dropdown-menu .mobile-menu-section h3 {
    color: var(--text-tertiary);
    font-size: 11px;
    text-transform: uppercase;
    padding: 11px 0px 11px 14px;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.5px;
}

#mobile-dropdown-menu .mobile-menu-item {
    display: block;
    padding: 15px 15px;
    color: #969696 !important;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
    cursor: pointer;
    background: transparent;
    font-size: 12px;
}

#mobile-dropdown-menu .mobile-menu-item:last-child {
    border-bottom: none;
}

html[data-theme="dark"] #mobile-dropdown-menu .mobile-menu-item.lv3.menu-item-active {
    color: #fff !important;
}

html[data-theme="light"] #mobile-dropdown-menu .mobile-menu-item.lv3.menu-item-active {
    color: #000 !important;
}

html[data-theme="dark"] #mobile-dropdown-menu .mobile-menu-item:hover,
html[data-theme="dark"] #mobile-dropdown-menu .mobile-menu-item:active {
    background: var(--hover-bg);
    color: #fff !important;
}

html[data-theme="light"] #mobile-dropdown-menu .mobile-menu-item:hover,
html[data-theme="light"] #mobile-dropdown-menu .mobile-menu-item:active {
    background: var(--hover-bg);
    color: #4c4c4c !important;
}

#mobile-dropdown-menu .mobile-menu-item:hover img,
#mobile-dropdown-menu .mobile-menu-item:active img {
   opacity: 1 !important;
}

#mobile-dropdown-menu .mobile-menu-item i {
    text-align: center;
    color: var(--menu-icon-color);
    opacity: 0.9;
}

/* Assegurar que les icones es veuen en theme light */
html[data-theme="light"] #mobile-dropdown-menu .mobile-menu-item i {
    opacity: 1;
}

/* Switch toggle dins del menú mobile */
#mobile-dropdown-menu .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

#mobile-dropdown-menu .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

#mobile-dropdown-menu .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3a4a5c;
    transition: 0.3s;
    border-radius: 24px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}

#mobile-dropdown-menu .slider:before {
    font-family: "FontAwesome";
    position: absolute;
    content: "\f186"; /* fa-moon-o */
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #f8f9fa;
    color: #495057;
    transition: 0.3s;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

#mobile-dropdown-menu input:checked + .slider {
    background-color: #8b949e;
}

#mobile-dropdown-menu input:checked + .slider:before {
    transform: translateX(26px);
    content: "\f185"; /* fa-sun-o */
    background-color: #f8f9fa;
    color: #495057;
}

/* ========================================
   TOPOPTIONS - ESTIL MILLORAT
   ======================================== */

.topoptions-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* Theme switcher */
.topoptions-wrapper .theme-switcher {
    display: flex;
    align-items: center;
    padding: 5px 10px;
}

/* User, Date, Logout - estil consistent */
.topoptions-wrapper .top-user,

.topoptions-wrapper .top-logout {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 13px;
    color: #119ea5;
}

/* top-user i top-logout: sempre blancs.
   El fons del header (#head-app) es mante fosc tambe en tema clar (l'override
   de background del light mode esta desactivat a dalt), per tant el text negre
   quedava illegible sobre negre. */
html[data-theme="dark"] .topoptions-wrapper .top-user,
html[data-theme="dark"] .topoptions-wrapper .top-logout,
html[data-theme="light"] .topoptions-wrapper .top-user,
html[data-theme="light"] .topoptions-wrapper .top-logout { color: #fff; }

html[data-theme="light"] .topoptions-wrapper .top-user a,
html[data-theme="light"] .topoptions-wrapper .top-user a:link,
html[data-theme="light"] .topoptions-wrapper .top-user a:visited,
html[data-theme="light"] .topoptions-wrapper .top-user i { color: #fff; }

/* Separadors */
.topoptions-wrapper .top-user > span:first-child,

.topoptions-wrapper .top-logout > span:first-child {
  /* color: var(--border-color, #666) !important; */
  color: #d1d1d1 !important;
    margin-right: 5px;
}

/* Links dins topoptions */
.topoptions-wrapper a {
    color: #119ea5;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.topoptions-wrapper a:hover {
    color: #1cc4cc;
}

/* Icones */
.topoptions-wrapper i {
    font-size: 15px;
}

/* Logout button especial */
.topoptions-wrapper .logout-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 4px;
    color: #ef4444 !important;
    transition: all 0.2s ease;
}

/* Hamburger button dins wrapper */
.topoptions-wrapper .hamburger-menu {
    margin-left: 10px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.topoptions-wrapper .hamburger-menu:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Light mode - el hamburger tambe queda sobre el header fosc: blanc */
html[data-theme="light"] .topoptions-wrapper .hamburger-menu {
    color: #ffffff;
}

html[data-theme="light"] .topoptions-wrapper .hamburger-menu:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ===== LIGHT MODE SPECIFIC OVERRIDES ===== */
html[data-theme="light"] div#loading-message {
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--dark-bg-primary);
}

html[data-theme="light"] div#kms_msg {
    background: linear-gradient(to bottom, rgba(8, 145, 178, 0.9) 0%, rgba(8, 145, 178, 1) 100%);
    color: #ffffff;
}

html[data-theme="light"] .user-avatar {
    background-color: rgba(240, 240, 240, 0.8);
}

html[data-theme="light"] .modal-backdrop,
html[data-theme="light"] .overlay {
    background-color: rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] .shadow,
html[data-theme="light"] .card-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .hover-effect:hover {
    background-color: rgba(8, 145, 178, 0.15);
}

html[data-theme="light"] tr.ROW_:hover td,
html[data-theme="light"] tr[class*="ROW_"]:hover td {
    background-color: #f6f6f6 !important;
}

html[data-theme="light"] .vhost-form-container {
    background: #f4f4f4;
    border-radius: 10px;
    padding: 30px;
    box-shadow: none !important;
}

html[data-theme="light"] .vhost-form-input,
html[data-theme="light"] .vhost-form-select {
    background-color: #fff;
    border: 1px solid #e5e5e5;
}

/* Hosting stats page adaptations for light theme */
html[data-theme="light"] .stats-container,
html[data-theme="light"] .hosting-stats-container {
    background: #f4f4f4;
    border-radius: 10px;
    padding: 30px;
}

html[data-theme="light"] .stats-card,
html[data-theme="light"] .metric-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

html[data-theme="light"] .stats-header,
html[data-theme="light"] .metric-header {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

/* Hosting manage page */
html[data-theme="light"] #hosting-manage-container,
html[data-theme="light"] .manage-container {
    background: #f4f4f4 !important;
    border-radius: 10px !important;
}

html[data-theme="light"] .manage-section,
html[data-theme="light"] .hosting-section {
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
}

html[data-theme="light"] table[style*="background"],
html[data-theme="light"] td[style*="background"],
html[data-theme="light"] tr[style*="background"] {
    background: #fff !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2);
}

/* Logs header adaptation for light theme */
html[data-theme="light"] .logs-header {
    background: #fff !important;
    color: #333 !important;
    border-bottom: 3px solid #3dbdd9 !important;
}

html[data-theme="light"] .logs-header h1 {
    color: #333 !important;
}

/* Invertir iconsvg blanques perquè es vegin en light mode */
html[data-theme="light"] .iconsvg,
html[data-theme="light"] img.iconsvg {
    filter: invert(1) brightness(0.2) contrast(1.2);
}

html[data-theme="light"] a:hover .iconsvg,
html[data-theme="light"] a:hover img.iconsvg {
    filter: invert(1) brightness(0) saturate(120%) contrast(1.3);
}

/* ===== FIX PER PAGES KMS_F ===== */
/* Força display i height correctes per pàgines tipus kms_f */
/* ELIMINAR - body.kms_f #kmsbody { */
/* ELIMINAR -     display: block !important; */
/* ELIMINAR -     min-height: calc(100vh - 50px) !important; */
/* ELIMINAR - } */
/* ELIMINAR -  */
/* ELIMINAR - body.kms_f #contents { */
/* ELIMINAR -     display: block !important; */
/* ELIMINAR -     height: auto !important; */
/* ELIMINAR - } */
/* ELIMINAR -  */
/* ELIMINAR - body.kms_f #application { */
/* ELIMINAR -     display: block !important; */
/* ELIMINAR - } */
/* ELIMINAR -  */
/* ELIMINAR - body.kms_f .panel_header { */
/* ELIMINAR -     display: block !important; */
/* ELIMINAR - } */
/* ELIMINAR -  */
/* ELIMINAR - body.kms_f #application_contents { */
/* ELIMINAR -     display: block !important; */
/* ELIMINAR - } */
/* ELIMINAR -  */
/* ELIMINAR - /* ===== BODY BACKGROUND PER THEME ===== */ */
/* Dark theme (default) */
:root body,
html[data-theme="dark"] body,
body[data-theme="dark"] {
    background-color: var(--dark-bg-primary);
    color: #e0e0e0;
}

/* Light theme */
html[data-theme="light"] body,
body[data-theme="light"] {
  /* background-color: #fff; */
  background-color: #000;
    color: var(--dark-bg-primary);
}

/* Assegurar que kms_f pages també tinguin el background correcte */
html[data-theme="dark"] body.kms_f {
    /* background-color: var(--dark-bg-primary) !important; */
    background-color: #000 !important;
}

/* ===== LAYOUT CORRECTE: LEFT MENU + CONTENTS ===== */

/* #kmsbody és el contenidor flex (NO el body!) */
#kmsbody,
div#kmsbody {
    width: 100%;
    min-height: calc(100vh - 50px);
    overflow: hidden;
}

/* Left menu - fixat a l'esquerra amb amplada fixa */
#kmsbody #leftmenu,
#kmsbody .leftmenu {
    height: auto;
    overflow-x: hidden;
  /* border-right: 1px solid var(--dark-border); */
    position: relative;
    z-index: 10;
    padding-bottom: 24px;
    transition: flex 0.3s ease-in-out, max-width 0.3s ease-in-out, min-width 0.3s ease-in-out;
}

/* Estat quan el leftmenu està col·lapsat a 100px */
#kmsbody #leftmenu.leftmenu-collapsed,
#kmsbody .leftmenu.leftmenu-collapsed {
    flex: 0 0 100px !important;
    max-width: 100px !important;
    min-width: 100px !important;
    overflow: hidden;
}

#kmsbody > #leftmenu-container.leftmenu-collapsed {
    flex: 0 0 var(--leftmenu-container-min) !important;
    max-width: var(--leftmenu-container-min) !important;
    min-width: var(--leftmenu-container-min) !important;
    overflow: hidden;
}

/* Contents - ocupa la resta de l'\''espai */
#kmsbody #contents,
#kmsbody .contents {
    flex: 1 1 auto !important;
    min-width: 0; /* Permet que es pugui reduir si cal */
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    display: block !important;
}

/* Estat quan el menu està amagat */
#kmsbody.menu-hidden #leftmenu {
    flex: 0 0 0 !important;
    max-width: 0;
    min-width: 0;
    overflow: hidden;
    border-right: none;
}

#kmsbody.menu-hidden #contents {
    flex: 1 1 100% !important;
}

#kmsbody.leftmenu-collapsed #contents {
  /* border-radius: 30px 0 0 0; */
  border-radius: 20px 0 0 0;
}

#kmsbody:not(.leftmenu-collapsed) #contents {
    border-radius: 0;
}

/* Assegurar que el body NO sigui flex - el contenidor flex és #kmsbody */

body.kms_f,
body.kms_b,
body[class*="kms_"] {
    display: block !important;
    flex-direction: unset !important;
    overflow: visible !important;
}

/* ===== LAYOUT FIX DEFINITIU ===== */
/* Sobrees criu TOTES les regles anteriors amb màxima prioritat */

/* 1. El body NO és flex */
body {
    display: block !important;
}

/* 2-4. Layout flex NOMÉS en desktop (min-width: 768px) */
@media (min-width: 768px) {
    /* 2. #kmsbody SÍ és flex container */
    div#kmsbody,
    #kmsbody {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        /* min-height: calc(100vh - 50px) !important; */
        /* overflow: hidden !important; */
    }

    /* 3. #leftmenu: amplada fixa, no creix ni es redueix */
    #kmsbody > div#leftmenu,
    #kmsbody > #leftmenu {
        flex: 0 0 300px !important;
        width: 300px !important;
        max-width: 300px !important;
        min-width: 300px !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* 4. #contents: ocupa tot l'espai restant */
    #kmsbody > div#contents,
    #kmsbody > #contents,
    #kmsbody > div.contents,
    #kmsbody > .contents {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: calc(100vw - 300px) !important; /* viewport - leftmenu */
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    #kmsbody > #dashboard.contents {
	max-width: 100% !important;
    }

    /* Exception per dashboard - necessita 100% width */
    body.kms_dashboard #kmsbody > #contents,
    body.kms_dashboard #kmsbody > div#contents,
    body.kms_dashboard #kmsbody .contents {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Assegurar que els fills de contents tampoc forçin amplada */
#contents > *,
#contents .application {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Forçar que #contents mai ocupi més espai del necessari */
#kmsbody {
    max-width: 100vw !important;
}

#kmsbody > #contents {
    flex-basis: 0 !important; /* Comença amb 0 i creix segons l'espai disponible */
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    width: 0 !important; /* Forçar a no tenir width propi */
    min-width: 0 !important;
}

/* ===== SOLUCIÓ DEFINITIVA AMB CSS GRID ===== */
/* Sobreescriu TOTES les regles anteriors */
/* NOMÉS EN DESKTOP (min-width: 768px) */

@media (min-width: 769px) {
    /* #kmsbody utilitza CSS Grid (més fiable que flexbox per aquest cas) */
    /* EXCEPTE per body.dashboard on no hi ha leftmenu */
    body:not(.dashboard) #kmsbody,
    body:not(.dashboard) div#kmsbody {
        display: grid !important;
        grid-template-columns: 300px 1fr !important; /* 300px fix + resta */
        grid-template-rows: 1fr !important;
        width: 100% !important;
        max-width: 100vw !important;
        transition: grid-template-columns 0.3s ease-in-out;
        /* min-height: calc(100vh - 50px) !important; */
        /* overflow: hidden !important; */
    }

    /* Quan el leftmenu està col·lapsat, canviar grid-template-columns */
    body:not(.dashboard) #kmsbody.leftmenu-collapsed,
    body:not(.dashboard) div#kmsbody.leftmenu-collapsed {
        grid-template-columns: 50px 1fr !important;
    }

    /* #leftmenu ocupa la primera columna */
    #kmsbody > #leftmenu,
    #kmsbody > div#leftmenu {
        grid-column: 1 / 2 !important;
        grid-row: 1 !important;
        width: 300px !important;
        max-width: 300px !important;
        min-width: 300px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* #contents ocupa la segona columna */
    #kmsbody > #contents,
    #kmsbody > div#contents {
        grid-column: 2 / 3 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
        display: block !important;
    }

    /* Quan el menu està amagat */
    #kmsbody.menu-hidden {
        grid-template-columns: 0 1fr !important;
    }

    #kmsbody.menu-hidden > #leftmenu {
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* ===== MÀXIMA PRIORITAT: GRID LAYOUT ===== */
    /* Aquesta regla té la màxima especificitat possible */
    html body.kms_f #kmsbody,
    html body.kms_b #kmsbody,
    html body:not(.dashboard) div#kmsbody,
    body.kms_f div#kmsbody,
    body.kms_b div#kmsbody {
        display: grid !important;
        grid-template-columns: 300px 1fr !important;
        grid-template-rows: 1fr !important;
        width: 100% !important;
        transition: grid-template-columns 0.3s ease-in-out;
        max-width: 100vw !important;
        /* min-height: calc(100vh - 50px) !important; */
        /* overflow: hidden !important; */
        box-sizing: border-box !important;
    }

    /* Quan el leftmenu està col·lapsat (màxima prioritat) */
    html body.kms_f #kmsbody.leftmenu-collapsed,
    html body.kms_b #kmsbody.leftmenu-collapsed,
    html body:not(.dashboard) div#kmsbody.leftmenu-collapsed,
    body.kms_f div#kmsbody.leftmenu-collapsed,
    body.kms_b div#kmsbody.leftmenu-collapsed {
        grid-template-columns: 50px 1fr !important;
    }

    /* Leftmenu a la columna 1 */
    html body.kms_f #kmsbody > #leftmenu,
    html body.kms_b #kmsbody > #leftmenu,
    body div#kmsbody > #leftmenu {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 300px !important;
        max-width: 300px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Contents a la columna 2 */
    html body.kms_f #kmsbody > #contents,
    html body.kms_b #kmsbody > #contents,
    body div#kmsbody > #contents {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: auto !important;
    }
}

/* ========================================
   DASHBOARD: DESACTIVAR GRID LAYOUT
   ======================================== */
/* El dashboard NO utilitza grid perquè no té leftmenu */
html body.dashboard #kmsbody,
html body.dashboard div#kmsbody,
body.dashboard #kmsbody,
body.dashboard div#kmsbody {
    display: block !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Forçar visibilitat de #contents al dashboard */
body.dashboard #kmsbody > #contents,
body.dashboard #kmsbody > div#contents,
body.kms_dashboard #kmsbody > #contents,
body.kms_dashboard #kmsbody > div#contents {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========================================
   DBTABLE OVERFLOW RESPONSIVE
   ======================================== */

/* Ocultar columnes no-desk quan hi ha overflow */
body.dbtable-overflow table#dbtable th:not(.desk),
body.dbtable-overflow table#dbtable td:not(.desk) {
    display: none !important;
}

/* Mantenir visibles les columnes amb classe .desk */
body.dbtable-overflow table#dbtable th.desk,
body.dbtable-overflow table#dbtable td.desk {
    display: table-cell !important;
}

/* Mantenir visible la columna de checkboxes de multiselect */
body.dbtable-overflow table#dbtable th:has(input#selectAllRows),
body.dbtable-overflow table#dbtable td:has(input.rowCheckbox) {
    display: table-cell !important;
}

body.dbtable-overflow table#dbtable td.desk .smallicons-container td {
    border:0;
}

body.dbtable-overflow table#dbtable td.desk .smallicons,
body.dbtable-overflow table#dbtable td.desk .smallicons td {
    display: table-cell !important;
}


/* En mobile-view ocultar tot excepte les columnes .mobile (inclòs el checkbox) */
body.dbtable-overflow.mobile-view table#dbtable th:not(.mobile),
body.dbtable-overflow.mobile-view table#dbtable td:not(.mobile),
body.dbtable-overflow.mobile-view table#dbtable th:has(input#selectAllRows),
body.dbtable-overflow.mobile-view table#dbtable td:has(input.rowCheckbox) {
    display: none !important;
}

body.dbtable-overflow.mobile-view table#dbtable th.mobile,
body.dbtable-overflow.mobile-view table#dbtable td.mobile {
    display: table-cell !important;
}

/* La columna d'accions (editar/eliminar) sempre visible */
body.dbtable-overflow.mobile-view table#dbtable td:has(.smallicons-container),
body.dbtable-overflow.mobile-view table#dbtable tr.HDR th:last-child {
    display: table-cell !important;
}

/* En mobile-view la taula ocupa tot l'ample disponible */
body.dbtable-overflow.mobile-view table#dbtable {
    display: table !important;
    table-layout: auto;
    width: calc(100% - 20px);
}
body.dbtable-overflow.mobile-view table#dbtable tbody {
    display: table-row-group;
    width: 100%;
}
body.dbtable-overflow.mobile-view table#dbtable tr {
    display: table-row;
    width: 100%;
    line-height: 40px;
}
body.dbtable-overflow.mobile-view table#dbtable th.mobile,
body.dbtable-overflow.mobile-view table#dbtable td.mobile {
    width: auto;
    max-width: none;
}

body.dbtable-overflow.mobile-view table#dbtable td.mobile .smallicons,
body.dbtable-overflow.mobile-view table#dbtable td.mobile .smallicons td {
    display: table-cell !important;
}

/* Columna status: amplada mínima (només el punt de color) */
body.dbtable-overflow.mobile-view table#dbtable th.status,
body.dbtable-overflow.mobile-view table#dbtable td[data-field="status"] {
    width: 1px;
    max-width: 40px;
    white-space: nowrap;
    padding: 0px 0px;
    text-align: center;
}

/* Ellipsis de text en cel·les mobile-view (display:block per suport natiu de text-overflow) */
body.dbtable-overflow.mobile-view table#dbtable td.mobile div.datacell {
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}


/* ========================================
   MSG ELEMENT - MISSATGES DEL SISTEMA
   ======================================== */

/* Contenidor principal MSG */
.MSG {
    display: block;
    width: auto;
    padding: 12px 20px;
    margin: 10px;
    border-radius: 6px;
    background: var(--msg-bg, #e3f2fd);
    border: 1px solid var(--msg-border, #90caf9);
    color: var(--msg-text, #1565c0);
}

.MSG > div {
    display: table-cell;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

/* Dark mode */
html[data-theme="dark"] .MSG {
    --msg-bg: rgba(33, 150, 243, 0.1);
    --msg-border: rgba(33, 150, 243, 0.3);
    --msg-text: #64b5f6;
}

/* Light mode */
html[data-theme="light"] .MSG {
    --msg-bg: #e3f2fd;
    --msg-border: #90caf9;
    --msg-text: #1565c0;
}

/* MSG variants per tipus de missatge */
.MSG.success {
    --msg-bg: rgba(8, 178, 158, 0.1);
    --msg-border: rgba(8, 178, 158, 0.3);
    --msg-text: #08b29e;
}

html[data-theme="light"] .MSG.success {
    --msg-bg: #e8f5e9;
    --msg-border: #81c784;
    --msg-text: #2e7d32;
}

.MSG.error {
    --msg-bg: rgba(244, 67, 54, 0.1);
    --msg-border: rgba(244, 67, 54, 0.3);
    --msg-text: #f44336;
}

html[data-theme="light"] .MSG.error {
    --msg-bg: #ffebee;
    --msg-border: #e57373;
    --msg-text: #c62828;
}

.MSG.warning {
    --msg-bg: rgba(255, 152, 0, 0.1);
    --msg-border: rgba(255, 152, 0, 0.3);
    --msg-text: #ff9800;
}

html[data-theme="light"] .MSG.warning {
    --msg-bg: #fff3e0;
    --msg-border: #ffb74d;
    --msg-text: #e65100;
}

/* ========================================
   FILTER OPTIONS - MILLORES RESPONSIVE
   ======================================== */

/* Formulari principal */
#filter_options {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    flex-wrap: wrap;
}

/* SearchBox input */
#searchBox {
    display: flex !important;
    align-items: center;
    max-width: none !important;
    min-width: 0 !important;
    position: relative !important;
    order: 2;
    height: 33px !important;
    flex: 1 1 0 !important;
}

#searchBox::before {
    content: "\f002" !important;
    font-family: 'FontAwesome' !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6)) !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

html[data-theme=light] #searchBox::before {
    color: #6b7280 !important;
}

#searchBox input[type='text'],
#searchBox input#query {
    width: 100% !important;
    height: 33px !important;
    padding: 0 12px 0 30px !important;
    background: none;
    border: 1px solid var(--input-border, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 6px !important;
    color: var(--text-primary, #ffffff) !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    z-index: 1 !important;
}

#searchBox input[type='text']:focus,
#searchBox input#query:focus {
    outline: none !important;
    border-color: var(--primary-color, #22d3ee) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1) !important;
}

#searchBox input[type='text']::placeholder {
    color: var(--text-secondary, rgba(255, 255, 255, 0.5)) !important;
}

/* Field Selector */
#fieldSelector {
    display: inline-flex !important;
    align-items: center !important;
    padding-left: 0 !important;
    order: 1 !important;
    height: 33px !important;
}

#fieldSelector select:not(#queryfield) {
    height: 32px !important;
    padding: 3px 15px 3px 15px !important;
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--input-border, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 6px !important;
    color: var(--text-primary, #ffffff) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

#fieldSelector select:not(#queryfield):hover {
    border-color: var(--primary-color, #22d3ee) !important;
    background-color: var(--select-bg-hover, rgba(255, 255, 255, 0.15)) !important;
}

#fieldSelector select:not(#queryfield):focus {
    outline: none !important;
    border-color: var(--primary-color, #22d3ee) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1) !important;
}

/* Search Button (ja existent però millorat) */
#searchBut {
    display: none !important;
    align-items: center;
    order: 3;
}

/* SearchCombo */
#searchCombo {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

#searchCombo select {
    height: 30px !important;
    padding: 0 32px 0 12px !important;
    background: var(--select-bg, rgba(255, 255, 255, 0.1)) !important;
    background-image: url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=12 height=12 viewBox=0 0 12 12%3E%3Cpath fill=%23ffffff d=M6 9L1 4h10z/%3E%3C/svg%3E) !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
    border: 1px solid var(--input-border, rgba(255, 255, 255, 0.2)) !important;
    border-radius: 6px !important;
    color: var(--text-primary, #ffffff) !important;
    font-size: 14px !important;
    appearance: none !important;
}

/* ===== LIGHT MODE ===== */
html[data-theme=light] #filter_options {
    --filter-bg: rgba(0, 0, 0, 0.02);
    --input-bg: #ffffff;
    --input-bg-focus: #ffffff;
    --input-border: #d1d5db;
    --select-bg: #ffffff;
    --select-bg-hover: #f9fafb;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --primary-color: #0ea5e9;
}

html[data-theme=light] #searchBox input[type='text'],
html[data-theme=light] #searchBox input#query {
    color: #1f2937 !important;
}

html[data-theme=light] #searchBox input[type='text']::placeholder {
    color: #9ca3af !important;
}

html[data-theme=light] #fieldSelector select:not(#queryfield),
html[data-theme=light] #searchCombo select {
    color: #1f2937 !important;
    background-image: url(data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg width=12 height=12 viewBox=0 0 12 12%3E%3Cpath fill=%236b7280 d=M6 9L1 4h10z/%3E%3C/svg%3E) !important;
}

/* Responsive */
@media (max-width: 768px) {
    #filter_options {
        flex-direction: column;
        align-items: stretch;
    }

    #fieldSelector,
    #searchCombo {
        display: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    /* Assegurar que els elements ocults de #search no es mostren */
    #rightbuttons #search #fieldSelector,
    #rightbuttons #search #searchCombo,
    #buttonbar #search #fieldSelector,
    #buttonbar #search #searchCombo {
        display: none !important;
    }

    /* Evitar que els divs de #search saltin de línia */
    #rightbuttons #search,
    #buttonbar #search {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
    }

    #rightbuttons #search form,
    #buttonbar #search form {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
    }

    #rightbuttons #search > form > div,
    #buttonbar #search > form > div {
        flex-wrap: nowrap !important;
        gap: 2px !important;
    }

    /* Forçar que els divs específics no saltin */
    #rightbuttons #searchBox,
    #rightbuttons #fieldSelector,
    #rightbuttons #viewChanger {
        flex-shrink: 1 !important;
    }

    /* Reduir mida dels inputs en mòbil */
    #searchBox input[type="text"],
    #searchBox input#query {
        min-width: 0 !important;
        padding: 6px 12px 6px 30px;
        font-size: 12px !important;
    }

    #rightbuttons #search select,
    #buttonbar #search select,
    #viewChanger select,
    #viewchange {
        min-width: 0 !important;
        max-width: none !important;
        padding: 2px 4px !important;
        font-size: 10px !important;
	height: 30px;
    }

    #searchBox,
    #searchBut {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    #viewChanger {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }
}

/* ========================================
   Millores als botons d'importar, exportar i imprimir
   ======================================== */

.importButton,
.exportButton {
    background: #555 !important;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
}

.importButton:hover,
.exportButton:hover {
   background:#000 !important;
 
}

/* Botó d'imprimir millorat */
#Imprimir button,
#Print button {
    background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

#Imprimir button:hover,
#Print button:hover {
    background: linear-gradient(to bottom, #f8f8f8 0%, #d9d9d9 100%);
    border-color: #adadad;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

#Imprimir button i,
#Print button i {
    margin-right: 6px;
}


/* ========================================
   Estils per elements actius al menú
   ======================================== */

/* Leftmenu - Elements actius */
html[data-theme="dark"] li.menu-item-active .menu_name,
html[data-theme="dark"] li.menu-item-active div#butmenu .menu_name {
    color: #ffffff !important;
    font-weight: 600 !important;
}

html[data-theme="dark"] li.menu-item-active .menu_icon i {
    color: #ffffff !important;
}

html[data-theme="light"] li.menu-item-active .menu_name,
html[data-theme="light"] li.menu-item-active div#butmenu .menu_name {
    color: #000000 !important;
    font-weight: 600 !important;
}

html[data-theme="light"] li.menu-item-active .menu_icon i {
    color: #000000 !important;
}

li.menu-item-active .menu_icon,
li.menu-item-active .menu_icon img,
li.menu-item-active div#butmenu .menu_icon,
li.menu-item-active div#butmenu .menu_icon img {
	opacity: 1 !important;
	filter: none;
}

/* Mobile menu - Elements actius */
div.lv2.active img { opacity: 1; }

html[data-theme="dark"] a.lv3 { font-weight:normal !important; }

html[data-theme="dark"] #mobile-dropdown-menu {
   color: #969696 !important;
   font-weight: 600;
}
html[data-theme="dark"] .mobile-menu-item.menu-item-active,
html[data-theme="dark"] #mobile-dropdown-menu .mobile-submenu-toggle.menu-item-active {
    color: #ffffff !important;
    font-weight: 600;
}

html[data-theme="dark"] #mobile-dropdown-menu .mobile-menu-item.menu-item-active i,
html[data-theme="dark"] #mobile-dropdown-menu .mobile-submenu-toggle.menu-item-active i {
    color: #ffffff !important;
}

html[data-theme="light"] #mobile-dropdown-menu .mobile-menu-item.menu-item-active,
html[data-theme="light"] #mobile-dropdown-menu .mobile-submenu-toggle.menu-item-active {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #000000 !important;
    font-weight: 600 !important;
}

html[data-theme="light"] #mobile-dropdown-menu .mobile-menu-item.menu-item-active i,
html[data-theme="light"] #mobile-dropdown-menu .mobile-submenu-toggle.menu-item-active i {
    color: #000000 !important;
}

/* Mobile submenu toggle - Spans actius */
html[data-theme="dark"] .mobile-submenu-toggle.menu-item-active span,
html[data-theme="dark"] .mobile-submenu-toggle.menu-item-active.active span {
    color: #ffffff !important;
}

html[data-theme="dark"] .mobile-submenu-toggle.menu-item-active span i,
html[data-theme="dark"] .mobile-submenu-toggle.menu-item-active.active span i {
    color: #ffffff !important;
}

html[data-theme="light"] .mobile-submenu-toggle.menu-item-active span,
html[data-theme="light"] .mobile-submenu-toggle.menu-item-active.active span {
    color: #000000 !important;
}

html[data-theme="light"] .mobile-submenu-toggle.menu-item-active span i,
html[data-theme="light"] .mobile-submenu-toggle.menu-item-active.active span i {
    color: #000000 !important;
}



/* Ajustos menú mobile - Icones i toggles */
.mobile-submenu-toggle.active .menu-icon,
.mobile-menu-item.menu-item-active .menu-icon {
    opacity: 1 !important;
}

.mobile-submenu-toggle {
    border-radius: 0 !important;
}

.mobile-submenu-content .fa {
    margin-right: 5px;
}


/* ========================================
   Estils del quick_menu (moure des de quick_menu.php)
   ======================================== */

/* Logo styles */
.intergrid-logo-column {
	padding: 0 5px 0 10px;
	vertical-align: middle;
	white-space: nowrap;
	width: 300px;
}

.intergrid-logo-wrapper {
	display: flex;
	align-items: center;
	gap: 15px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: opacity 0.2s ease;
}


.intergrid-logo-wrapper img {
	width: 25px;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Hide logo based on theme */
html[data-theme="dark"] .logo-light {
	display: none;
}

html[data-theme="light"] .logo-dark {
	display: none;
}

.intergrid-logo-text {
  font-size: 18px;
  font-weight: 200; }







html[data-theme="dark"] .intergrid-logo-text {
	color: #fff;
}

/* Responsive behavior for mobile */
@media (max-width: 768px) {
	.intergrid-logo-column {
		padding: 0 10px 0 5px;
	}

	.intergrid-logo-wrapper img {
		width: 20px;
		height: auto;
	}

	.intergrid-logo-text {
		font-size: 14px;
		line-height: 20px;
	}

	/* Desactivar grid layout en dashboard per mòbil */
	body.kms_dashboard #kmsbody,
	body.dashboard #kmsbody {
		display: flex !important;
		flex-direction: column !important;
		grid-template-columns: none !important;
		padding-bottom: 60px !important;
	}

	/* Desactivar grid-column per contents en dashboard mòbil */
	body.kms_dashboard #kmsbody > #contents,
	body.kms_dashboard #kmsbody > div#contents,
	body.dashboard #kmsbody > #contents,
	body.dashboard #kmsbody > div#contents {
		display: block !important;
		grid-column: auto !important;
		width: 100% !important;
		height: calc(100vh - 60px) !important;
		max-height: calc(100vh - 60px) !important;
		overflow-y: auto !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
}

/* Col·lapse leftmenu: per pantalles >768px i/o quan show_sidemenu=1 */
@media (min-width: 769px) {
	/* Estat col·lapsat per defecte: Ocultar NOMÉS leftmenu-content-wrapper, mantenir #apps visible */
	#leftmenu-container.leftmenu-collapsed .leftmenu-content-wrapper #leftmenu,
	#leftmenu-container:not(.leftmenu-collapsed).leftmenu-collapsed .leftmenu-content-wrapper #leftmenu {
		display: none !important;
	}
	#leftmenu-container.leftmenu-collapsed .leftmenu-content-wrapper,
	#leftmenu-container:not(.leftmenu-collapsed).leftmenu-collapsed .leftmenu-content-wrapper {
		max-width: 0;
		width: 0;
		overflow: hidden;
	}
	/* Per defecte col·lapsat */
	#kmsbody #leftmenu-container.leftmenu-collapsed { width:50px; max-width:50px !important; min-width:50px !important;}

	/* Estat desplegat: permetre expansió */
	#kmsbody #leftmenu-container:not(.leftmenu-collapsed) {
		width: var(--left-menu-container-max) !important;
		max-width: var(--left-menu-container-max) !important;
		min-width: var(--left-menu-container-max) !important;
	}
	#leftmenu-container:not(.leftmenu-collapsed) .leftmenu-content-wrapper {
		max-width: 100% !important;
		width: 100% !important;
	}
	#leftmenu-container:not(.leftmenu-collapsed) .leftmenu-content-wrapper #leftmenu {
		display: block !important;
	}
	/* La columna td que conté el leftmenu - amplada reduïda quan col·lapsat */
	.leftmenu-collapsed .leftmenu-column,
	.leftmenu-collapsed #leftmenu-column,
	td.leftmenu.leftmenu-collapsed {
		width: 50px !important;
		min-width: 50px !important;
		max-width: 50px !important;
	}

	/* La columna td que conté el leftmenu - amplada completa quan desplegat */
	.leftmenu-column:not(.leftmenu-collapsed),
	#leftmenu-column:not(.leftmenu-collapsed),
	td.leftmenu:not(.leftmenu-collapsed) {
		width: var(--left-menu-container-max) !important;
		min-width: var(--left-menu-container-max) !important;
		max-width: var(--left-menu-container-max) !important;
	}

	/* El leftmenu amb amplada reduïda NOMÉS quan està col·lapsat */
	#leftmenu-container.leftmenu-collapsed #leftmenu,
	#leftmenu-container.leftmenu-collapsed .leftmenu {
		width: 50px !important;
		min-width: 50px !important;
		max-width: 50px !important;
	}

	/* El leftmenu amb amplada completa quan està desplegat */
	#leftmenu-container:not(.leftmenu-collapsed) #leftmenu,
	#leftmenu-container:not(.leftmenu-collapsed) .leftmenu {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
	}

	/* Fer que el contingut ocupi la resta de l'ample - quan col·lapsat */
	.leftmenu-collapsed ~ .content-column,
	.leftmenu-collapsed ~ #content-column {
		width: calc(100% - 50px) !important;
	}

	/* Fer que el contingut ocupi la resta de l'ample - quan desplegat */
	.content-column,
	#content-column {
		width: calc(100% - var(--left-menu-container-max)) !important;
	}

	/* Ajustar grid layout amb leftmenu estret NOMÉS quan està col·lapsat (però NO al dashboard) */
	body:not(.dashboard) #kmsbody.leftmenu-collapsed,
	html body.kms_f:not(.dashboard) #kmsbody.leftmenu-collapsed,
	html body.kms_b:not(.dashboard) #kmsbody.leftmenu-collapsed,
	html body:not(.dashboard) div#kmsbody.leftmenu-collapsed,
	body.kms_f:not(.dashboard) div#kmsbody.leftmenu-collapsed,
	body.kms_b:not(.dashboard) div#kmsbody.leftmenu-collapsed {
		grid-template-columns: 50px 1fr !important;
	}

	/* Ajustar grid layout amb leftmenu desplegat */
	body:not(.dashboard) #kmsbody:not(.leftmenu-collapsed),
	html body.kms_f:not(.dashboard) #kmsbody:not(.leftmenu-collapsed),
	html body.kms_b:not(.dashboard) #kmsbody:not(.leftmenu-collapsed),
	html body:not(.dashboard) div#kmsbody:not(.leftmenu-collapsed),
	body.kms_f:not(.dashboard) div#kmsbody:not(.leftmenu-collapsed),
	body.kms_b:not(.dashboard) div#kmsbody:not(.leftmenu-collapsed) {
		grid-template-columns: var(--left-menu-container-max) 1fr !important;
	}

	/* Leftmenu manté grid-column 1 - amplada reduïda quan col·lapsat */
	#kmsbody.leftmenu-collapsed > #leftmenu,
	#kmsbody.leftmenu-collapsed > div#leftmenu,
	html body.kms_f #kmsbody.leftmenu-collapsed > #leftmenu,
	html body.kms_b #kmsbody.leftmenu-collapsed > #leftmenu,
	body div#kmsbody.leftmenu-collapsed > #leftmenu {
		grid-column: 1 !important;
		width: 50px !important;
		max-width: 50px !important;
		min-width: 50px !important;
		overflow: visible !important;
	}

	/* Leftmenu manté grid-column 1 - amplada completa quan desplegat */
	#kmsbody:not(.leftmenu-collapsed) > #leftmenu,
	#kmsbody:not(.leftmenu-collapsed) > div#leftmenu,
	html body.kms_f #kmsbody:not(.leftmenu-collapsed) > #leftmenu,
	html body.kms_b #kmsbody:not(.leftmenu-collapsed) > #leftmenu,
	body div#kmsbody:not(.leftmenu-collapsed) > #leftmenu {
		grid-column: 1 !important;
		width: var(--left-menu-container-max) !important;
		max-width: var(--left-menu-container-max) !important;
		min-width: var(--left-menu-container-max) !important;
		overflow: visible !important;
	}

	/* Contents a grid-column 2 */
	#kmsbody > #contents,
	#kmsbody > div#contents,
	html body.kms_f #kmsbody > #contents,
	html body.kms_b #kmsbody > #contents,
	body div#kmsbody > #contents {
		grid-column: 2 !important;
	}

	/* Apps centrat verticalment */
	#apps {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		width: 50px !important;
	}
}

/* Mobile submenu styles */
.mobile-submenu-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 15px;
	cursor: pointer;
	background: transparent;
	border-bottom: 1px solid var(--border-color);
	border-radius: 0px;
	transition: all 0.2s ease;
	position: relative;
	z-index: 2;
	color: #969696 !important;
	font-size: 12px;
}

.mobile-submenu-toggle:hover {
	background: var(--hover-bg);
}

html[data-theme="dark"] .mobile-submenu-toggle:hover,
html[data-theme="dark"] .mobile-submenu-toggle:active {
	background: var(--hover-bg);
	color: #fff !important;
}

html[data-theme="light"] .mobile-submenu-toggle:hover,
html[data-theme="light"] .mobile-submenu-toggle:active {
	background: var(--hover-bg);
	color: #4c4c4c !important;
}

.mobile-submenu-toggle span {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}

.mobile-submenu-toggle .toggle-icon {
	transition: transform 0.3s ease;
	font-size: 12px;
	color: var(--text-secondary, #a5b4c5);
}

.mobile-submenu-toggle.active .toggle-icon {
	transform: rotate(180deg);
}

.mobile-submenu-content {
	overflow: hidden;
	transition: all 0.3s ease;
}

/* Eliminar el padding extra perquè es controla dinàmicament */
.mobile-submenu-content .mobile-menu-item {
	/* El padding es defineix dinàmicament segons el nivell */
}

/* Submenus imbricats */
.mobile-submenu-content .mobile-submenu-toggle {
	/* El padding es defineix dinàmicament segons el nivell */
}

/* Estils per les icones del menú */
.menu-icon {
	display: inline-block;
	margin-right: 8px;
	vertical-align: middle;
}

.menu-icon img,
img.menu-icon {
	max-width: 18px;
	max-height: 18px;
	width: auto;
	height: auto;
	vertical-align: middle;
}

.mobile-submenu-toggle .menu-icon,
.mobile-menu-item .menu-icon {
	opacity: 0.5;
}

/* Icones Font Awesome */
i.menu-icon {
	font-size: 14px;
	min-width: 18px;
	text-align: center;
}

/* Assegurar que els links siguin clicables */
.mobile-menu-item {
	cursor: pointer;
	pointer-events: auto;
	position: relative;
	z-index: 3;
	display: block;
	margin: 0;
	padding: 12px 15px;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 0px;
	transition: all 0.2s ease;
}

.mobile-menu-item:hover {
	background: rgba(255, 255, 255, 0.08);
	text-decoration: none;
}

.mobile-submenu-content {
	position: relative;
	z-index: 1;
}


/* Estils per marcadors (bookmarks) */
.mobile-menu-item.bookmark {
	padding-left: 27px !important;
	font-size: 11px !important;
}

/* ===== FIX APPLICATION POSITION ===== */
.application,
div.application,
#application {
    position: relative !important;
  /* background: #fafafa; */
}

div#application {
    border-radius: 0px 6px 6px 0;
}


/* ===== FIX APP HEIGHT - Same as APPLICATION ===== */
#app {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* ===== KMS FOOTER - ESTIL MILLORAT ===== */
#kms-footer {
	position: fixed;
	left: 0px;
	width: 100%;
	text-align: left;
}

#kms-footer .kms-footer-content {
	font-size: 10px;
	padding: 5px;
	color: #6c757d;
	font-weight: 400;
	display: flex;
	align-items: center;
}

#kms-footer .kms-footer-content a,#kms-footer .kms-footer-content span {
	color:#696969 !important;
}

#kms-footer .kms-version {
	color: #495057;
	font-weight: 500;
}

#kms-footer .kms-copyright {
	color: #6c757d;
}

#kms-footer .kms-separator {
	color: #adb5bd;
	margin: 0 4px;
}

#kms-footer .kms-link {
	color: #2eb9bd;
	text-decoration: none;
	transition: all 0.2s ease;
	font-weight: 500;
}

#kms-footer .kms-link:hover {
	color: #1a9ba0;
	text-decoration: underline;
}

/* Dark mode */
html[data-theme="dark"] #kms-footer .kms-footer-content {
	color: #adb5bd;
}

html[data-theme="dark"] #kms-footer .kms-version {
	color: #e9ecef;
}

html[data-theme="dark"] #kms-footer .kms-copyright {
	color: #adb5bd;
}

html[data-theme="dark"] #kms-footer .kms-separator {
	color: #6c757d;
}

html[data-theme="dark"] #kms-footer .kms-link {
	color: #2eb9bd;
}

html[data-theme="dark"] #kms-footer .kms-link:hover {
	color: #4dd4d8;
}

/* Light mode */
html[data-theme="light"] #kms-footer .kms-footer-content {
	color: #6c757d;
}

html[data-theme="light"] #kms-footer .kms-version {
	color: #495057;
}

html[data-theme="light"] #kms-footer .kms-copyright {
	color: #6c757d;
}

html[data-theme="light"] #kms-footer .kms-separator {
	color: #adb5bd;
}

html[data-theme="light"] #kms-footer .kms-link {
	color: #2eb9bd;
}

html[data-theme="light"] #kms-footer .kms-link:hover {
	color: #1a9ba0;
}

/* Responsiu */
@media (max-width: 768px) {
	#kms-footer {
		padding: 15px 20px;
	}
	
	#kms-footer .kms-footer-content {
		font-size: 11px;
		flex-wrap: wrap;
	}
}

/* ===== MILLORES TABLE.OPT ===== */
table.OPT {
    width: 100%;
    padding: 10px 15px !important;
    margin-bottom: 10px;
}

table.OPT td {
    padding: 8px 10px;
    vertical-align: middle;
}

/* Botons dins table.OPT */
table.OPT button,
table.OPT input[type="button"],
table.OPT .kmsbut button {
    background: linear-gradient(to bottom, #2eb9bd 0%, #1a9ba0 100%);
    border: 1px solid #1a9ba0;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(46, 185, 189, 0.2);
}

table.OPT button:hover,
table.OPT input[type="button"]:hover,
table.OPT .kmsbut button:hover {
    background: linear-gradient(to bottom, #1a9ba0 0%, #157d81 100%);
    box-shadow: 0 3px 6px rgba(46, 185, 189, 0.3);
    transform: translateY(-1px);
}

table.OPT button i,
table.OPT .kmsbut button i {
    margin-right: 6px;
}

/* Separadors - substituir imatge per border */
table.OPT img[src*="separator.gif"] {
    display: none;
}

table.OPT div[style*="separator.gif"]::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom, transparent 0%, var(--dark-border) 20%, var(--dark-border) 80%, transparent 100%);
    margin: 0 10px;
    vertical-align: middle;
}

/* Comptadors i estadístiques */
table.OPT td[align="right"] {
    color: var(--dark-text-secondary);
    font-size: 13px;
    font-weight: 500;
}


/* ========================================
   PAGINATION STYLES
   ======================================== */

/* Wrapper principal de paginació */
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    margin: 10px;
    border-radius: 8px;
    background: var(--dark-bg-primary);
    gap: 20px;
    flex-wrap: wrap;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
}

.pagination-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.pagination-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    white-space: nowrap;
}

/* Controls de navegació */
.pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    max-width: 100%;
}

/* Botons de navegació (fletxes) */
.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    color: var(--dark-text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pagination-btn:hover {
    background: var(--dark-accent);
    color: #fff;
    border-color: var(--dark-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(46, 185, 189, 0.2);
}

.pagination-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Números de pàgina */
.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    margin: 0 2px;
    border: 1px solid var(--dark-border);
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
}

.pagination-page:hover {
    background: var(--dark-accent);
    color: #fff;
    border-color: var(--dark-accent);
}

.pagination-page.active {
    background: var(--dark-accent) !important;
    color: #fff !important;
    border-color: var(--dark-accent) !important;
    font-weight: 600 !important;
    /* box-shadow: 0 2px 4px rgba(46, 185, 189, 0.3) !important; */
}

/* Rows per page selector */
.pagination-perpage {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid var(--dark-border);
}

.pagination-perpage label {
    font-size: 13px;
    color: var(--dark-text-secondary);
}

.pagination-input {
    width: 60px;
    padding: 6px 10px;
    border: 1px solid var(--dark-border);
    border-radius: 4px;
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    font-size: 13px;
    text-align: center;
    transition: all 0.2s ease;
}

.pagination-input:focus {
    outline: none;
    border-color: var(--dark-accent);
    box-shadow: 0 0 0 2px rgba(46, 185, 189, 0.2);
}

.pagination-go {
    padding: 6px 12px;
    background: var(--dark-accent);
    color: #fff;
    border: 1px solid var(--dark-accent);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-go:hover {
    background: #1a9ba0;
    box-shadow: 0 2px 4px rgba(46, 185, 189, 0.3);
}

/* Right side - info */
.pagination-right {
    display: flex;
    align-items: center;
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.pagination-total {
    color: var(--dark-text-primary);
}

.pagination-total strong {
    /* color: var(--dark-accent); */
    color: var(--dark-text-primary);
    font-weight: 600;
}

.pagination-pages {
    color: var(--dark-text-secondary);
}

/* Light theme */
html[data-theme="light"] .pagination-wrapper {
    /* background: #fafafa; */
    border-color: #ddd;
}

html[data-theme="light"] .pagination-btn {
    background: #fff;
    border-color: #ddd;
    color: var(--light-text-primary);
}

html[data-theme="light"] .pagination-btn:hover {
    background: var(--light-accent);
    border-color: var(--light-accent);
    color: #fff;
}

html[data-theme="light"] .pagination-btn.disabled {
    background: #fff;
    /* border-color: #ddd; */
    /* color: #ccc; */
    border-color: #6c6c6c;
    color: #6c6c6c;
}

html[data-theme="light"] .pagination-page {
    background: #fff;
    border-color: #ddd;
    /* color: var(--light-text-primary); */
    color: #929292 !important;
    font-size: 11px;
}

html[data-theme="light"] .pagination-page:hover {
    background: var(--light-accent);
    color: #fff;
    border-color: var(--light-accent);
}

html[data-theme="light"] .pagination-page.active {
    /* background: var(--light-accent) !important; */
    /* color: #fff !important; */
    /* border-color: var(--light-accent) !important; */
    /* box-shadow: 0 2px 4px rgba(46, 185, 189, 0.3) !important; */
    /* color: #929292 !important; */
    /* border-color: #bdbdbd !important; */
    color: #fff !important;
    border-color: #8a8585 !important;
    font-weight: 600 !important;
    font-size: 11px;
    background-color: #8a8585 !important;
}

html[data-theme="light"] .pagination-perpage {
    border-left-color: #ddd;
}

html[data-theme="light"] .pagination-perpage label {
    color: var(--light-text-secondary);
}

html[data-theme="light"] .pagination-input {
    border-color: #ddd;
    background: #fff;
    color: var(--light-text-primary);
}

html[data-theme="light"] .pagination-input:focus {
    border-color: var(--light-accent);
    box-shadow: 0 0 0 2px rgba(46, 185, 189, 0.2);
}

html[data-theme="light"] .pagination-go {
    background: var(--light-accent);
    border-color: var(--light-accent);
}

html[data-theme="light"] .pagination-go:hover {
    background: #1a9ba0;
}

html[data-theme="light"] .pagination-total {
    color: var(--light-text-primary);
}

html[data-theme="light"] .pagination-total strong {
    color: var(--light-accent);
}

html[data-theme="light"] .pagination-pages {
    color: var(--light-text-secondary);
}




.custom-select-wrapper {
    position: relative;
    display: inline-block;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 15px;
    background: var(--dark-bg-primary);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    min-width: 200px;
    border-left: 3px solid transparent;
}

.custom-select-trigger:hover {
    background: linear-gradient(90deg, rgba(18, 165, 149, 0.15) 0%, transparent 100%);
    border-left-color: var(--dark-accent);
}

.custom-select-value {
    color: var(--dark-text-secondary);
    font-size: 11px;
    font-weight: 400;
    flex: 1;
    transition: all 0.2s ease;
}

.custom-select-trigger:hover .custom-select-value {
    color: var(--dark-text-primary);
}

.custom-select-arrow {
    color: var(--dark-text-secondary);
    font-size: 10px;
    opacity: 0.5;
    transition: all 0.2s ease;
}

.custom-select-trigger:hover .custom-select-arrow {
    opacity: 1;
    color: var(--dark-accent);
}

.custom-select-dropdown.open ~ .custom-select-trigger .custom-select-arrow {
    transform: rotate(180deg);
}

/* DROPDOWN - Estils molt específics amb !important per evitar herència */
.custom-select-dropdown {
    position: fixed !important;
    background: var(--dark-bg-primary) !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 9999 !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.2s ease !important;
}

.custom-select-dropdown.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.custom-select-options {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.custom-select-option {
    padding: 10px 15px 10px 45px !important;
    cursor: pointer !important;
    color: var(--dark-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    border-bottom: 1px solid rgba(64, 64, 64, 0.3) !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
    position: relative !important;
    border-left: 3px solid transparent !important;
    background: transparent !important;
}

/* Icona abans de l'opció */
.custom-select-option::before {
    content: "\f105" !important; /* fa-angle-right */
    font-family: FontAwesome !important;
    position: absolute !important;
    left: 25px !important;
    font-size: 14px !important;
    opacity: 0.5 !important;
    transition: all 0.2s ease !important;
}

.custom-select-option:hover {
    background: linear-gradient(90deg, rgba(18, 165, 149, 0.15) 0%, transparent 100%) !important;
    color: var(--dark-text-primary) !important;
    padding-left: 50px !important;
    border-left-color: var(--dark-accent) !important;
}

.custom-select-option:hover::before {
    opacity: 1 !important;
    color: var(--dark-accent) !important;
    left: 28px !important;
}

/* Selected - NOMÉS text blanc i font-weight, SENSE gradient */
.custom-select-option.selected {
    color: #fff !important;
    font-weight: 600 !important;
    border-left-color: transparent !important;
    background: transparent !important;
}

.custom-select-option.selected::before {
    opacity: 1 !important;
    color: #fff !important;
}

/* Hover del selected - sí que porta gradient blau */
.custom-select-option.selected:hover {
    background: linear-gradient(90deg, rgba(18, 165, 149, 0.15) 0%, transparent 100%) !important;
    color: #fff !important;
    padding-left: 50px !important;
    border-left-color: var(--dark-accent) !important;
}

.custom-select-option.selected:hover::before {
    color: var(--dark-accent) !important;
    left: 28px !important;
}

/* Últim item sense border */
.custom-select-option:last-child {
    border-bottom: none !important;
}

/* Scrollbar personalitzat per al dropdown */
.custom-select-dropdown::-webkit-scrollbar {
    width: 8px;
}

.custom-select-dropdown::-webkit-scrollbar-track {
    background: var(--dark-bg-secondary);
    border-radius: 4px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb {
    background: var(--dark-text-secondary);
    border-radius: 4px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--dark-accent);
}

/* Animació d'entrada */
@keyframes customSelectFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-select-dropdown.open {
    animation: customSelectFadeIn 0.2s ease;
}
/* ========================================
   STATUS BADGES per KMS ERP INVOICES
   ======================================== */

.kms-status-badge {
    display: inline-block;
    padding: 0px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    transition: all 0.2s ease;
    line-height: 20px;
}

/* Estats específics */
.kms-status-processing {
    background-color: rgba(255, 119, 0, 0.15);
    color: #ff7700;
    border: 1px solid rgba(255, 119, 0, 0.3);
}

.kms-status-pendent {
    background-color: rgba(255, 0, 0, 0.15);
    color: #ff0000;
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.kms-status-remesa {
    background-color: rgba(95, 59, 239, 0.15);
    color: #5f3bef;
    border: 1px solid rgba(95, 59, 239, 0.3);
}

.kms-status-cobrat,
.kms-status-pagada-embargo {
    background-color: rgba(0, 170, 0, 0.15);
    color: #00AA00;
    border: 1px solid rgba(0, 170, 0, 0.3);
}

.kms-status-abonada {
    background-color: rgba(100, 120, 140, 0.15);
    color: #64788c;
    border: 1px solid rgba(100, 120, 140, 0.3);
}

.kms-status-retornat,
.kms-status-impagada {
    background-color: rgba(255, 0, 0, 0.2);
    color: #ff0000;
    border: 1px solid rgba(255, 0, 0, 0.4);
    font-weight: 700;
}

.kms-status-anulat,
.kms-status-anulada-impagada {
    background-color: rgba(153, 153, 153, 0.15);
    color: #999999;
    border: 1px solid rgba(153, 153, 153, 0.3);
}

.kms-status-pausa {
    background-color: rgba(153, 255, 0, 0.3);
    color: #2d5016;
    border: 1px solid rgba(153, 255, 0, 0.5);
    font-weight: 700;
}

/* Tipus de backup */
.kms-status-vhost {
    background-color: rgba(0, 123, 255, 0.15);
    color: #007bff;
    border: 1px solid rgba(0, 123, 255, 0.3);
}

.kms-status-database {
    background-color: rgba(255, 152, 0, 0.15);
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, 0.3);
}

/* Hover effect */

/* Dark theme adjustments */
html[data-theme="dark"] .kms-status-badge {
    background-opacity: 0.2;
}

html[data-theme="dark"] .kms-status-processing {
    background-color: rgba(255, 119, 0, 0.2);
    color: #ffa84d;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-pendent {
    background-color: rgba(255, 48, 0, 0.2);
    color: #ff8a66;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-remesa {
    background-color: rgba(95, 59, 239, 0.2);
    color: #8f7aff;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-cobrat,
html[data-theme="dark"] .kms-status-pagada-embargo {
    background-color: rgba(0, 170, 0, 0.2);
    color: #4dff4d;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-abonada {
    background-color: rgba(100, 120, 140, 0.2);
    color: #a0b5cc;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-retornat,
html[data-theme="dark"] .kms-status-impagada {
    background-color: rgba(255, 0, 0, 0.25);
    color: #ff6666;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-anulat,
html[data-theme="dark"] .kms-status-anulada-impagada {
    background-color: rgba(153, 153, 153, 0.2);
    color: #b3b3b3;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-pausa {
    background-color: rgba(153, 255, 0, 0.25);
    color: #c6ff66;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-vhost {
    background-color: rgba(0, 123, 255, 0.2);
    color: #66b3ff;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-database {
    background-color: rgba(255, 152, 0, 0.2);
    color: #ffb84d;
    font-weight: normal;
}

/* Estats addicionals per altres mòduls */
.kms-status-draft {
    background-color: rgba(255, 131, 31, 0.15);
    color: #ff831f;
    border: 1px solid rgba(255, 131, 31, 0.3);
}

.kms-status-published,
.kms-status-active {
    background-color: rgba(0, 170, 0, 0.15);
    color: #00AA00;
    border: 1px solid rgba(0, 170, 0, 0.3);
}

.kms-status-inactive,
.kms-status-baixa,
.kms-status-aturat,
.kms-status-migracio,
.kms-status-noconfirmat {
    background-color: rgba(255, 0, 0, 0.15);
    color: #ff0000;
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.kms-status-pending,
.kms-status-al-corrent {
    background-color: rgba(255, 170, 0, 0.15);
    color: #ffAA00;
    border: 1px solid rgba(255, 170, 0, 0.3);
}

.kms-status-confirmat {
    background-color: rgba(0, 221, 0, 0.15);
    color: #00DD00;
    border: 1px solid rgba(0, 221, 0, 0.3);
}

/* Dark theme per estats addicionals */
html[data-theme="dark"] .kms-status-draft {
    background-color: rgba(255, 131, 31, 0.2);
    color: #ffb070;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-published,
html[data-theme="dark"] .kms-status-active {
    background-color: rgba(0, 170, 50, 0.2);
    color: #4dffc5;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-inactive,
html[data-theme="dark"] .kms-status-baixa,
html[data-theme="dark"] .kms-status-aturat,
html[data-theme="dark"] .kms-status-migracio,
html[data-theme="dark"] .kms-status-noconfirmat {
    background-color: rgba(255, 0, 0, 0.2);
    color: #ff6666;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-pending,
html[data-theme="dark"] .kms-status-al-corrent {
    background-color: rgba(255, 170, 0, 0.2);
    color: #ffc966;
    font-weight: normal;
}

html[data-theme="dark"] .kms-status-confirmat {
    background-color: rgba(0, 221, 0, 0.2);
    color: #66ff66;
    font-weight: normal;
}

/* Estats per pressupostos i factures - afegits per completar */

/* Sent - Enviat (blau) */
.kms-status-sent {
    background-color: rgba(0, 123, 255, 0.15);
    color: #007bff;
    border: 1px solid rgba(0, 123, 255, 0.3);
}

html[data-theme="dark"] .kms-status-sent {
    background-color: rgba(0, 123, 255, 0.2);
    color: #66b3ff;
    font-weight: normal;
}

/* Approved - Aprovat (verd) */
.kms-status-approved {
    background-color: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

html[data-theme="dark"] .kms-status-approved {
    background-color: rgba(40, 167, 69, 0.2);
    color: #6dd88a;
    font-weight: normal;
}

/* Rejected - Rebutjat (vermell) */
.kms-status-rejected {
    background-color: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

html[data-theme="dark"] .kms-status-rejected {
    background-color: rgba(220, 53, 69, 0.2);
    color: #ff6b7a;
    font-weight: normal;
}

/* Invoiced - Facturat (morat) */
.kms-status-invoiced {
    background-color: rgba(111, 66, 193, 0.15);
    color: #6f42c1;
    border: 1px solid rgba(111, 66, 193, 0.3);
}

html[data-theme="dark"] .kms-status-invoiced {
    background-color: rgba(111, 66, 193, 0.2);
    color: #a78bdb;
    font-weight: normal;
}

/* Holiday - Rosa (pink) */
.kms-status-holiday {
    background-color: rgba(233, 30, 99, 0.15);
    color: #e91e63;
    border: 1px solid rgba(233, 30, 99, 0.3);
}

html[data-theme="dark"] .kms-status-holiday {
    background-color: rgba(233, 30, 99, 0.2);
    color: #f48fb1;
    font-weight: normal;
}

/* Cancelled - Cancel·lat (gris) */
.kms-status-cancelled {
    background-color: rgba(108, 117, 125, 0.15);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

html[data-theme="dark"] .kms-status-cancelled {
    background-color: rgba(108, 117, 125, 0.2);
    color: #adb5bd;
    font-weight: normal;
}

/* Warning - Atenció (groc/ambre) */
.kms-status-warning {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ff9800;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

html[data-theme="dark"] .kms-status-warning {
    background-color: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    font-weight: normal;
}

/* Info - Informació (blau) */
.kms-status-info {
    background-color: rgba(33, 150, 243, 0.15);
    color: #1976d2;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

html[data-theme="dark"] .kms-status-info {
    background-color: rgba(33, 150, 243, 0.2);
    color: #64b5f6;
    font-weight: normal;
}


/* KMS Labels - Simple and Visible */
.kms-label {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #ffffff !important;
  padding: 0px 8px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

.kms-label:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}

/* Dark theme support */
[data-theme="dark"] .kms-label {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
  color: #0a0e27 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] .kms-label:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.5) !important;
}
/* ===== CLASSES PER ESTILS INLINE MOGUTS DE mod.class.php i appInterface.class.php ===== */

/* === GENERAL UTILITY CLASSES === */

/* Float and clear utilities */
.float-left { float: left; }
.float-right { float: right; }
.clear-left { clear: left; }

/* Spacing utilities */
.space-separator {
    float: left;
    width: 5px;
}

.full-width {
    width: 100%;
}

/* === TEXT AND COLOR CLASSES === */

/* Muted/placeholder text */
.text-muted {
    color: #aaaaaa;
}

.text-muted-italic {
    color: #999;
    font-style: italic;
}

.text-white {
    color: #fff;
}

/* === LINK CLASSES === */

.link-no-decoration {
    text-decoration: none;
    color: #444;
}

/* === BUTTON CLASSES === */

/* Back button */
.back-button {
    width: 55px;
    height: 21px;
    padding-left: 6px;
}

/* Delete selected button */
.delete-selected-button {
    display: none;
    background-color: #cc0000;
    color: white;
}

/* === DATABROWSER CLASSES === */

/* DataBrowser padding */
.databrowser-padding {
    padding: 15px;
}

/* Selected count display */
.selected-count {
    display: none;
    margin-left: 10px;
    font-weight: bold;
}

/* Mobile menu */
.mobmenu-container {
    float: right;
}

/* Checkbox header cell */
.checkbox-header {
    width: 30px;
}

/* Checkbox data cell */
.checkbox-cell {
    width: 30px;
    text-align: center;
}

/* Sort arrow SVG */
.sort-arrow {
    vertical-align: middle;
    margin-left: 3px;
    display: inline-block;
}

/* Icon view container */
.icon-view-container {
    margin: 5px;
    float: left;
    width: 90px;
    height: 70px;
    text-align: center;
}

/* Icon wrapper variants */
.icon-wrapper-standard {
    padding: 10px;
    padding-left: 0px;
    padding-right: 0px;
    height: 30px;
    width: 90px;
    text-align: center;
}

.icon-wrapper-alt {
    padding: 10px;
    height: 30px;
    width: 80px;
    text-align: center;
}

/* Small icons container */
.smallicons-container {
    padding: 0px;
}

/* View changer */
.view-changer {
    float: right;
    padding-top: 1px;
}

.view-changer select {
    max-width: 200px;
}

/* === ICON CLASSES === */

/* Icon margin - extends .ico16 */
.ico16-margin {
    margin: 0px 8px;
}

/* Font Awesome icon size */
.fa-icon-16 {
    font-size: 16px;
}

/* App icon style */
.app-icon-large {
    font-size: 24px;
    color: #3dbdd9;
}

/* === LEFTMENU CLASSES === */

/* Leftmenu flex container */
.leftmenu-flex-container {
    display: flex;
    gap: 0px;
    height: 100%;
}

#toggle_leftmenu_but {
  margin:5px 0px 6px 5px;
}
/* Leftmenu content wrapper */
.leftmenu-content-wrapper {
    flex: 1;
    padding-top:0px;
    border-radius: 10px 0px 0px 0px;
}

[data-theme="light"] .leftmenu-content-wrapper {
    border-radius: 20px 0 0 0;
    /* background: #f5f5f5; */
    background: #f4f4f4;
}

[data-theme="dark"] .leftmenu-content-wrapper {
    border-right:1px solid #181a1f;
    background: #181a1f;
}
/* Online status indicator */
.status-online {
    color: #fff;
}

/* === MOD.CLASS RECIPE FORMATTING === */

/* Recipe number cell */
.recipe-num-cell {
    padding: 0cm;
    margin: 0cm;
    margin-right: 0.1cm;
    margin-bottom: 0.1cm;
}

/* Recipe paragraph */
.recipe-paragraph {
    line-height: 130%;
    padding: 0cm;
    margin: 0cm;
    margin-right: 0.1cm;
    margin-bottom: 0.1cm;
}

/* Recipe line ingredient */
.recipe-line {
    line-height: 130%;
    margin: 0px;
    margin-bottom: 3px;
}

/* Recipe note styling */
.recipe-note {
    margin: 0px;
}

/* Recipe ingredient padding */
.recipe-ingredient-padding {
    padding: 0px;
}

/* Recipe ordered list */
.recipe-ordered-list {
    padding-left: 20px;
    margin-left: 0px;
    padding-left: 0,10cm;
}

/* Recipe list item */
.recipe-list-item {
    margin-left: 20px;
    list-style-position: inside;
}

/* Recipe container */
.recipe-container {
    width: 260px;
    overflow: hidden;
    height: auto;
}

/* Color picker preview */
.color-picker-preview {
    width: 16px;
    height: 16px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

/* Invalid data label */
.invalid-data-label {
    padding-bottom: 1px;
    color: #fff;
    font-size: 9px;
    background-color: #ccc;
}

.invalid-data-link {
    color: #aaa;
}
.view-changer-select { max-width: 200px; }

/* Dins de rightbuttons, permetre que view-changer-select es redueixi */
#rightbuttons .view-changer-select {
    max-width: 100% !important;
    min-width: 0 !important;
}
/* ===== DATAEDITOR ESTILS INLINE MOGUTS ===== */

/* kmsbody dimensions */
.kmsbody-full-auto {
    width: 100%;
    height: auto;
}

/* contents dimensions */
.contents-auto {
    width: auto;
    height: auto;
}

/* Cell width */
.cell-width-10 {
    width: 10px;
}

/* Readonly scrollable textarea */
.readonly-scrollable {
    overflow: scroll;
    border: 1px dotted #aaa;
    padding: 5px;
    width: 79%;
    height: 200px;
}

/* Readonly scrollable textarea (variant without border) */
.readonly-scrollable-noborder {
    overflow: scroll;
    padding: 5px;
    width: 79%;
    height: 200px;
}

/* Display block */
.display-block {
    display: block;
}

/* Mandatory field indicator */
.mandatory-indicator {
    color: #d00;
}

/* Small spacer */
.spacer-4 {
    height: 4px;
}

/* Button container left */
.button-container-left {
    float: left;
    max-width: 200px;
}

/* Float right */
.float-right {
    float: right;
}

/* Display none */
.display-none {
    display: none;
}

/* Wide textarea (700px) */
.textarea-wide {
    width: 700px;
}


/* Ocultar submenús per defecte */
#leftmenu li.item_menu ul#category {
    display: none;
}

/* Mostrar submenú quan el pare està obert */
#leftmenu li.item_menu.submenu-open > ul#category {
    display: block;
}


/* Mod header icon styles */
.mod-header-icon {
    float: left;
    height: 40px;
    color: #fff;
    font-size: 20px;
    line-height: 40px;
    padding: 5px 10px 0px 18px;
}

/* Light mode adaptation */
[data-theme="light"] .mod-header-icon {
    color: #424242;
}

/* Mod header title container */
.mod-header-title {
    float: left;
    padding: 5px 0px;
}

/* Mod header SVG icon container */
.mod-header-svg {
    padding: 10px 7px 10px 10px;
    float: left;
}

/* ===== INTERFACE.PHP LAYOUT STYLES ===== */
/* Regles per evitar CSS inline a interface.php */

/* Table application - padding zero */
table.application {
    padding: 0;
}

/* Cel·la principal de l'aplicació amb vertical-align top */
table.application > tbody > tr > td {
    vertical-align: top;
}

/* Buttonbar - vertical-align middle */
table.OPT tr.buttonbar td {
    vertical-align: middle;
}

/* Filter options - alineació dreta amb padding */
table.OPT tr.buttonbar td[align='right'] {
    padding-right: 5px;
}

/* Leftmenu cel·la - vertical-align top */
td.leftmenu {
    vertical-align: top;
}

/* ===== ICONES FONTAWESOME - EVITAR CSS INLINE ===== */

/* Icona FA gran: blanc en tema fosc, negre en tema clar */
.fa-icon-large {
  /* font-size: 22px; */
  font-size: 17px;
    color: var(--dark-accent);
}
html[data-theme="dark"] .fa-icon-large { color: #fff; }
html[data-theme="light"] .fa-icon-large { color: #000; }

/* Icona FA mitjana (16px) */
.fa-icon-medium {
    font-size: 16px;
}

/* Icona FA amb marge dret */
.fa-icon-spaced {
    margin-right: 8px;
}

/* Icona de mòdul al header (combinació de marge i color) */
.fa-mod-icon {
    margin-right: 8px;
    font-size: 16px;
}

/* ===== AI POPUP STYLES ===== */
#ai-popup {
    display: none;
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 950px;
    max-height: calc(100vh - 160px);
    background: #1f2937;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    padding: 20px;
    z-index: 9999;
    overflow-y: auto;
}

#ai-popup.show {
    display: block;
}

#ai-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

#ai-popup-title {
    color: #f3f4f6;
    font-size: 16px;
    font-weight: bold;
}

#ai-popup-close {
    cursor: pointer;
    color: #9ca3af;
    font-size: 24px;
    line-height: 1;
    transition: color 0.2s;
}

#ai-popup-close:hover {
    color: #f3f4f6;
}

#ai-prompt {
    width: 100%;
    min-height: 120px;
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 16px;
    color: #f3f4f6;
    padding: 16px;
    font-size: 14px;
    resize: vertical;
    line-height: 1.5;
    transition: all 0.2s;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

#ai-prompt:focus {
    outline: none;
    border-color: #08b29e;
    box-shadow: 0 0 0 3px rgba(8, 178, 158, 0.1);
}

#ai-attach-btn:hover {
    background: rgba(8, 178, 158, 0.15);
}

#ai-attach-btn:hover i {
    color: #08b29e;
}

/* AI Popup - Additional inline styles */
#ai-tokens-used {
    font-size: 11px;
    color: #9ca3af;
    margin-left: 10px;
}

#ai-popup-header > div:last-child {
    display: flex;
    gap: 8px;
}

#ai-clear-history {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
}

#ai-conversation-history {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 10px;
    padding: 8px;
    background: #1f2937;
    border-radius: 6px;
    display: none;
}

#ai-thinking {
    display: none;
    padding: 12px;
    background: rgb(22, 23, 24);
    border-radius: 6px;
    margin-bottom: 10px;
}

#ai-thinking > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

#ai-thinking i {
    color: #f3f4f6;
}

#ai-thinking span {
    color: #f3f4f6;
    font-size: 13px;
}

.ai-model-selector-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ai-model-selector-wrapper label {
    color: #9ca3af;
    font-size: 12px;
}

#ai-model-selector {
    background: #374151;
    color: #f3f4f6;
    border: 1px solid #4b5563;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}

.ai-prompt-wrapper {
    position: relative;
}

.ai-prompt-wrapper textarea {
    padding-right: 45px;
}

#ai-attach-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 6px;
}

#ai-attach-btn i {
    color: #9ca3af;
    font-size: 18px;
}

#ai-file-input {
    display: none;
}


/* ============================================
   DATETIMEPICKER - Component millorat
   ============================================ */

.datetimepicker input[type=date] { 
    border: 0; 
}

.datetimepicker input[type=time] { 
    border: 0; 
}

.datetimepicker input[type=date]:focus, 
.datetimepicker input[type=time]:focus { 
    outline: none; 
}

.datetimepicker { 
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
    border-radius: 4px;
    max-width: fit-content;
    transition: all 0.2s ease;
}

.datetimepicker:focus-within {
    border-color: teal;
}

.datetimepicker input {
    font-family: inherit;
    font-size: 13px;
    color: var(--dark-text-primary);
    appearance: none;
    outline: none;
    border: 0;
    background-color: transparent;
    flex-shrink: 0;
}

.datetimepicker input[type=date] {
    width: 9rem;
    padding: 10px 10px 10px 14px;
    max-width: 142px !important;
    border-width: 0;
}

.datetimepicker input[type=time] {
    max-width: 60px !important;
    width: 4.5rem;
    padding: 10px 14px 10px 0px;
    border-left-width: 0;
}

.datetimepicker span {
    height: 1.2rem;
    margin-right: 0.5rem;
    margin-left: 0;
    border-right: 1px solid var(--dark-border);
    flex-shrink: 0;
}


/* ============================================
   INPUT COMMENTS - Comentaris per inputs
   ============================================ */

.input-comment {
    display: block;
    margin: 5px;
    font-size: 10px;
    color: var(--dark-text-secondary, #999);
    text-transform: uppercase;
    line-height: 1.4;
    letter-spacing: 0;
}

.input-comment::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f071";
    margin-right: 6px;
}

/* Variant per comentaris importants/obligatoris */
.input-comment.required {
    color: #e67e22;
    font-weight: 600;
}

.input-comment.required::before {
    content: "\f06a";
}

/* Variant per comentaris d'ajuda */
.input-comment.help {
    color: var(--dark-text-secondary, #6c757d);
}

.input-comment.help::before {
    content: "\f0eb";
}

/* Responsive - en pantalles petites */
@media (max-width: 768px) {
    .input-comment {
        font-size: 9px;
    }
}

/* ========================================
   BARRES DE PROGRÉS HOSTINGS - DARK/LIGHT MODE
   ======================================== */

/* Variables de color per dark mode */
html[data-theme="dark"] {
    --progress-green: #10b981;
    --progress-green-bg: rgba(16, 185, 129, 0.15);
    --progress-orange: #fb923c;
    --progress-orange-bg: rgba(251, 146, 60, 0.15);
    --progress-red: #f87171;
    --progress-red-bg: rgba(248, 113, 113, 0.15);
    --progress-border: rgba(255, 255, 255, 0.1);
}

/* Variables de color per light mode */
html[data-theme="light"] {
    --progress-green: #059669;
    --progress-green-bg: #d1fae5;
    --progress-orange: #ea580c;
    --progress-orange-bg: #ffedd5;
    --progress-red: #dc2626;
    --progress-red-bg: #fee2e2;
    --progress-border: rgba(0, 0, 0, 0.08);
}

.hosting-progress-wrapper {
    min-width: 160px !important;
    max-width: 220px !important;
    display: block; padding-right: 5px !important;
}

.hosting-progress-container {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.hosting-progress-bar-bg {
    flex: 1 !important;
    border-radius: 6px !important;
    height: 14px !important;
    overflow: hidden !important;
    border: 1px solid var(--progress-border) !important;
    position: relative !important;
}

.hosting-progress-bar-bg.green {
    background: var(--progress-green-bg) !important;
}

.hosting-progress-bar-bg.orange {
    background: var(--progress-orange-bg) !important;
}

.hosting-progress-bar-bg.red {
    background: var(--progress-red-bg) !important;
}

.hosting-progress-bar-fill {
    height: 100% !important;
    min-width: 4px !important;
    max-width: 100% !important;
    transition: width 0.3s ease !important;
}

.hosting-progress-bar-fill.green {
    background: var(--progress-green) !important;
}

.hosting-progress-bar-fill.orange {
    background: var(--progress-orange) !important;
}

.hosting-progress-bar-fill.red {
    background: var(--progress-red) !important;
}

.hosting-progress-label {
    font-size: 10px !important;
    font-weight: 400 !important;
    min-width: 42px !important;
    text-align: right !important;
}

.hosting-progress-label.green {
    color: var(--progress-green) !important;
}

.hosting-progress-label.orange {
    color: var(--progress-orange) !important;
}

.hosting-progress-label.red {
    color: var(--progress-red) !important;
}

/* Label inline dins de la barra */
.hosting-progress-label-inline {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    z-index: 10 !important;
}

.hosting-progress-label-inline.green {
    color: var(--progress-green) !important;
}

.hosting-progress-label-inline.orange {
    color: var(--progress-orange) !important;
}

.hosting-progress-label-inline.red {
    color: var(--progress-red) !important;
}

/* Hosting usage bars - utilitzant variables CSS per fila */
html[data-theme="dark"] .hosting-usage-wrapper .hosting-bar-container { background: var(--bg-dark); border-color: rgba(255,255,255,0.1) !important; }
html[data-theme="light"] .hosting-usage-wrapper .hosting-bar-container { background: var(--bg-light); border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="dark"] .hosting-usage-wrapper .hosting-bar-fill { background: var(--color-dark); }
html[data-theme="light"] .hosting-usage-wrapper .hosting-bar-fill { background: var(--color-light); }
html[data-theme="dark"] .hosting-usage-wrapper .hosting-bar-label { color: var(--color-dark); }
html[data-theme="light"] .hosting-usage-wrapper .hosting-bar-label { color: var(--color-light); }
html[data-theme="dark"] .hosting-usage-wrapper .hosting-bar-percent { color: var(--color-dark); }
html[data-theme="light"] .hosting-usage-wrapper .hosting-bar-percent { color: var(--color-light); }

html[data-theme="dark"] .hosting-usage-wrapper-t .hosting-bar-container-t { background: var(--bg-dark); border-color: rgba(255,255,255,0.1) !important; }
html[data-theme="light"] .hosting-usage-wrapper-t .hosting-bar-container-t { background: var(--bg-light); border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="dark"] .hosting-usage-wrapper-t .hosting-bar-fill-t { background: var(--color-dark); }
html[data-theme="light"] .hosting-usage-wrapper-t .hosting-bar-fill-t { background: var(--color-light); }
html[data-theme="dark"] .hosting-usage-wrapper-t .hosting-bar-label-t { color: var(--color-dark); }
html[data-theme="light"] .hosting-usage-wrapper-t .hosting-bar-label-t { color: var(--color-light); }
html[data-theme="dark"] .hosting-usage-wrapper-t .hosting-bar-percent-t { color: var(--color-dark); }
html[data-theme="light"] .hosting-usage-wrapper-t .hosting-bar-percent-t { color: var(--color-light); }

/* Vhost Usage Progress Bars - Similar to Cloud Hosting */
html[data-theme="dark"] .vhost-usage-wrapper .vhost-bar-container { background: var(--bg-dark); border-color: rgba(255,255,255,0.1) !important; }
html[data-theme="light"] .vhost-usage-wrapper .vhost-bar-container { background: var(--bg-light); border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="dark"] .vhost-usage-wrapper .vhost-bar-fill { background: var(--color-dark); }
html[data-theme="light"] .vhost-usage-wrapper .vhost-bar-fill { background: var(--color-light); }
html[data-theme="dark"] .vhost-usage-wrapper .vhost-bar-label { color: var(--color-dark); }
html[data-theme="light"] .vhost-usage-wrapper .vhost-bar-label { color: var(--color-light); }
html[data-theme="dark"] .vhost-usage-wrapper .vhost-bar-percent { color: var(--color-dark); }
html[data-theme="light"] .vhost-usage-wrapper .vhost-bar-percent { color: var(--color-light); }

html[data-theme="dark"] .vhost-usage-wrapper-t .vhost-bar-container-t { background: var(--bg-dark); border-color: rgba(255,255,255,0.1) !important; }
html[data-theme="light"] .vhost-usage-wrapper-t .vhost-bar-container-t { background: var(--bg-light); border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="dark"] .vhost-usage-wrapper-t .vhost-bar-fill-t { background: var(--color-dark); }
html[data-theme="light"] .vhost-usage-wrapper-t .vhost-bar-fill-t { background: var(--color-light); }
html[data-theme="dark"] .vhost-usage-wrapper-t .vhost-bar-label-t { color: var(--color-dark); }
html[data-theme="light"] .vhost-usage-wrapper-t .vhost-bar-label-t { color: var(--color-light); }
html[data-theme="dark"] .vhost-usage-wrapper-t .vhost-bar-percent-t { color: var(--color-dark); }
html[data-theme="light"] .vhost-usage-wrapper-t .vhost-bar-percent-t { color: var(--color-light); }

/* Separator en kmsbut sense imatge */
.kmsbut.separator {
    display: inline-block;
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom, transparent 0%, var(--dark-border) 20%, var(--dark-border) 80%, transparent 100%);
    margin: 0 10px;
    vertical-align: middle;
}

/* Loader per databrowser, dataeditor i dataFuncionCaller */
#kms-content-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 26, 26, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

#kms-content-loader.loaded {
    opacity: 0;
    pointer-events: none;
}

.content-loader-spinner {
    text-align: center;
}

.content-loader-spinner i {
    font-size: 48px;
    color: #12a595;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Personalització Barcelonastudios - Mida de font del pressupostador */
div#application .row .label {
  padding-top: 13px;
  font-size: 13px;
}

div#application .editable-field {
  font-size: 13px;
}

div#application .row .value {
  font-size: 13px;
}

div#application .condicions li {
  color: var(--text-secondary) !important;
}

select.editable-field {
  font-size: 13px;
}

/* Datetimepicker Component - Readonly Visual Style (no background) */
.datetimepicker-readonly {
  color: #666;
  font-size: 0.95em;
}

[data-theme=dark] .datetimepicker-readonly {
  color: #a0aec0;
}

[data-theme=light] .datetimepicker {
  background-color: #ffffff;
  border-color: #d1d5db;
}

[data-theme=light] .datetimepicker span {
  border-color: #d1d5db;
}

/* Timestamp display in dataEditor */
.timestamp-wrapper {
  border: 1px solid #d1d5db24;
  border-radius: 4px;
  padding: 9px 14px;
}

.timestamp-wrapper span {
  color: #a9a9a9;
}

.timestamp-display {
  font-size: 13px;
  color: #374151;
}

[data-theme=dark] .timestamp-display {
  color: #d1d5db;
}

/* Textarea component */
.kms-textarea {
  width: 100%;
  max-width: 535px;
}

/* DataBrowser - No data available message */
.db-nodata {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.db-nodata i {
    font-size: 64px;
    color: #dee2e6;
    margin-bottom: 20px;
    display: block;
}

.db-nodata h3 {
    font-size: 20px;
    font-weight: 600;
    color: #495057;
    margin: 0 0 10px 0;
}

.db-nodata p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

[data-theme=dark] .db-nodata {
    color: #8b949e;
}

[data-theme=dark] .db-nodata i {
    color: #30363d;
}

[data-theme=dark] .db-nodata h3 {
    color: #c9d1d9;
}

[data-theme=dark] .db-nodata p {
    color: #8b949e;
}

/* ===== ALERT DIALOGS (Delete Confirmation) ===== */
.kms-alert-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    /* background: var(--dark-bg-secondary); */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); */
    background: #181a1f;
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    max-width: 600px;
    margin: 20px auto;
}

.kms-alert-icon {
    text-align: center;
    font-size: 48px;
    color: #ff6b6b;
    margin-bottom: 10px;
}

.kms-alert-content {
    text-align: center;
}

.kms-alert-message {
    font-size: 16px;
    color: var(--dark-text-primary);
    line-height: 1.5;
    margin-bottom: 10px;
}

.kms-alert-additional {
    font-size: 14px;
    color: var(--dark-text-secondary);
    margin-top: 10px;
}

.kms-alert-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.kms-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: center;
}

.kms-btn i {
    font-size: 14px;
}

.kms-btn-danger,
.kms-alert-container .kms-btn-danger,
.kms-alert-container button.kms-btn-danger {
    background: #dc2626 !important;
    background-color: #dc2626 !important;
    background-image: none !important;
    color: #fff !important;
}

.kms-btn-danger:hover,
.kms-alert-container .kms-btn-danger:hover,
.kms-alert-container button.kms-btn-danger:hover {
    background: #b91c1c !important;
    background-color: #b91c1c !important;
    background-image: none !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3) !important;
}

.kms-btn-danger:active,
.kms-alert-container .kms-btn-danger:active {
    transform: translateY(0);
}

.kms-btn-secondary,
.kms-alert-container .kms-btn-secondary,
.kms-alert-container button.kms-btn-secondary {
    background: #6b7280 !important;
    background-color: #6b7280 !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid #4b5563 !important;
}

.kms-btn-secondary:hover,
.kms-alert-container .kms-btn-secondary:hover,
.kms-alert-container button.kms-btn-secondary:hover {
    background: #4b5563 !important;
    background-color: #4b5563 !important;
    background-image: none !important;
    border-color: #374151 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.kms-btn-secondary:active,
.kms-alert-container .kms-btn-secondary:active {
    transform: translateY(0);
}

/* Light theme */
html[data-theme="light"] .kms-alert-container {
    background: #fff;
    border-color: #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .kms-alert-message {
    color: #333;
}

html[data-theme="light"] .kms-alert-additional {
    color: #666;
}

html[data-theme="light"] .kms-btn-secondary {
    background-color: #f5f5f5;
    color: #333;
    border-color: #d0d0d0;
}

html[data-theme="light"] .kms-btn-secondary:hover {
    background-color: #e8e8e8;
    border-color: #3dbdd9;
}

/* ========================================
   LOGO STYLES (moved from headers/default.php)
   ======================================== */
/* Logo styles */
.intergrid-logo-column {
	padding: 0 5px 0 10px;
	vertical-align: middle;
	white-space: nowrap;
}

.intergrid-logo-wrapper {
	display: flex;
	align-items: center;
	gap: 15px;
}

.intergrid-logo-wrapper img {
	width: 24px;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Hide logo based on theme */
html[data-theme="dark"] .logo-light {
	display: none;
}

html[data-theme="light"] .logo-dark {
	display: none;
}

/* Logo text styling - adaptable to light/dark theme */
.intergrid-logo-text {
	font-size: 16px;
	font-weight: bold;
	font-family: Space Grotesk;
	color: var(--text-primary, #333);
	line-height: 25px;
}

/* Dark theme */
html[data-theme="dark"] .intergrid-logo-text {
	color: var(--text-primary, #fff);
}

/* Light theme */
html[data-theme="light"] .intergrid-logo-text {
	color: var(--text-primary, #1e293b);
}

/* Quick Menu Corporate Colors - Intergrid Brand */

/* Responsive behavior for mobile */
@media (max-width: 768px) {
	.intergrid-logo-column {
		padding: 0 10px 0 5px;
	}

	.intergrid-logo-wrapper img {
		width: 20px;
		height: auto;
	}

	.intergrid-logo-text {
		font-size: 14px;
		line-height: 20px;
	}
}

/* Light theme for div.datacell */
html[data-theme="light"] div.datacell {
    color: #1e293b;
}

/* Light theme for html and body text color */
[data-theme='light'] html,
[data-theme='light'] body {
    color: #000 !important;
}

/* Light theme for top options */
[data-theme='light'] table.top .topoptions font,
[data-theme='light'] table.top .topoptions a,
[data-theme='light'] #head-app .topoptions font,
[data-theme='light'] #head-app .topoptions a {
    color: #1e293b !important;
}

/* ============================================
   ERROR HANDLER STYLES
   ============================================ */

/* Light theme styles (default) */
html[data-theme="light"] body:has(.error-container),
body:has(.error-container) {
    margin: 0;
    padding: 0px;
    background: #f5f6f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[data-theme="light"] .error-container,
.error-container {
    max-width: 900px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: slideUp 0.6s ease-out;
    margin:auto;
}

html[data-theme="light"] .error-message,
.error-message {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #495057;
    word-break: break-word;
}

html[data-theme="light"] .error-details,
.error-details {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

html[data-theme="light"] .error-details h3,
.error-details h3 {
    margin: 0 0 15px 0;
    color: #856404;
    font-size: 16px;
}

html[data-theme="light"] .suggestions li,
.suggestions li {
    padding: 8px 0;
    border-bottom: 1px solid #f1c40f;
    color: #856404;
}

html[data-theme="light"] .error-meta,
.error-meta {
    background: #f8f9fa;
    padding: 20px;
    border-top: 1px solid #e9ecef;
    font-size: 12px;
    color: #6c757d;
}

html[data-theme="light"] .error-meta strong,
.error-meta strong {
    color: #495057;
}

html[data-theme="light"] .expandable:hover,
.expandable:hover {
    background: #f1f3f4;
}

html[data-theme="light"] .debug-info,
.debug-info {
    display: none;
    margin-top: 15px;
    padding: 15px;
    padding-top: 0;
    background: #f8f9fa;
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
    max-height: 300px;
    overflow-y: auto;
    position: relative;
}

html[data-theme="light"] .copy-header,
.copy-header {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    padding: 0 0 10px 0;
    margin: -15px -15px 10px -15px;
    padding: 10px 15px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Dark theme styles */
html[data-theme="dark"] body:has(.error-container) {
    background: #1a1d23;
}

html[data-theme="dark"] .error-container {
    background: #2d3139;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

html[data-theme="dark"] .error-content {
    color: #e0e0e0;
}

html[data-theme="dark"] .error-message {
    background: #23262d;
    border: 1px solid #3a3f4a;
    color: #e0e0e0;
}

html[data-theme="dark"] .error-details {
    background: #3a2e1f;
    border: 1px solid #5a4a2f;
}

html[data-theme="dark"] .error-details h3 {
    color: #ffd54f;
}

html[data-theme="dark"] .suggestions li {
    border-bottom: 1px solid #5a4a2f;
    color: #ffd54f;
}

html[data-theme="dark"] .error-meta {
    background: #23262d;
    border-top: 1px solid #3a3f4a;
    color: #9ca3af;
}

html[data-theme="dark"] .error-meta strong {
    color: #e0e0e0;
}

html[data-theme="dark"] .expandable:hover {
    background: #3a3f4a;
}

html[data-theme="dark"] .debug-info {
    background: #23262d;
    color: #e0e0e0;
}

html[data-theme="dark"] .copy-header {
    background: #23262d;
    border-bottom: 1px solid #3a3f4a;
}

html[data-theme="dark"] .btn.secondary {
    background: #4a5160;
}

html[data-theme="dark"] .btn.secondary:hover {
    background: #5a6170;
}

/* Light theme button styles */
html[data-theme="light"] .btn {
    background: #3498db;
    color: white;
}

html[data-theme="light"] .btn:hover {
    background: #2980b9;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    color: white;
}

html[data-theme="light"] .btn.secondary {
    background: #95a5a6;
    color: white;
}

html[data-theme="light"] .btn.secondary:hover {
    background: #7f8c8d;
    box-shadow: 0 4px 12px rgba(149, 165, 166, 0.3);
}

/* Shared styles */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.intergrid-header {
    background: #2c3e50;
    color: white;
    padding: 15px 30px;
    text-align: center;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.intergrid-logo {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.intergrid-subtitle {
    font-size: 12px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.error-header {
    padding: 30px;
    text-align: center;
}

/* Error header with light theme - FIXED: color white */
.error-header[data-theme="light"] {
    color: #fff;
}

/* Error header without data-theme or with dark theme */
.error-header:not([data-theme]),
.error-header[data-theme="dark"] {
    color: white;
}

.error-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.error-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    color:#fff
}

.error-content {
    padding: 40px;
}

.suggestions {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.suggestions li:last-child {
    border-bottom: none;
}

.suggestions li:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0eb ";
    margin-right: 8px;
}

.actions {
    text-align: center;
    margin: 30px 0;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    margin: 0 10px 10px 0;
    background: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    text-decoration: none;
    color: white;
}

.btn.secondary {
    background: #6c757d;
}

.expandable {
    cursor: pointer;
    user-select: none;
    padding: 10px;
    border-radius: 4px;
    display: inline-block;
}

.technical-details-section {
    margin: 20px 0;
}

.copy-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 400;
    transition: all 0.2s ease;
    position: relative;
}

.copy-btn:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

.copy-btn:active {
    transform: translateY(0);
}

.copy-btn.copied {
    background: #28a745;
}

.copy-btn.copied::after {
    content: " ✓ Copied!";
    position: absolute;
    top: -30px;
    right: 0;
    background: #28a745;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    animation: fadeInOut 2s ease-in-out;
    z-index: 1000;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(10px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

#technical-content {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    cursor: text;
}

.debug-info * {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

html[data-theme="light"] .error-container, .error-container, html[data-theme="dark"] .error-container {
  margin-top: 100px;
}

/* DNS Record Type Badges */
.kms-dns-type-ns {
    background-color: #3498db;
    color: white;
}

.kms-dns-type-a {
    background-color: #2ecc71;
    color: white;
}

.kms-dns-type-aaaa {
    background-color: #27ae60;
    color: white;
}

.kms-dns-type-cname {
    background-color: #9b59b6;
    color: white;
}

.kms-dns-type-mx {
    background-color: #e74c3c;
    color: white;
}

.kms-dns-type-ptr {
    background-color: #f39c12;
    color: white;
}

.kms-dns-type-txt {
    background-color: #34495e;
    color: white;
}

.kms-dns-type-srv {
    background-color: #16a085;
    color: white;
}

@media (max-width: 768px) {
    body:has(.error-container) {
        padding: 10px;
    }

    .error-container {
        margin: 0;
    }

    .error-content {
        padding: 20px;
    }

    .btn {
        display: block;
        margin: 10px 0;
    }

    /* Dashboard apps: neutralitzar colors i borders que dominen */
    .fa-icon-large {
        color: inherit !important;
    }

    /* App activa al menú lateral: ressalt a la icona (degradat corporatiu),
       sense la vora lateral que dominava massa. */
    .dashboard-app-item.active {
        border-left-color: transparent !important;
    }
    .dashboard-app-item.active .app-icon-wrapper {
        background: linear-gradient(135deg, #00c1aa 0%, #00a3c6 100%) !important;
    }
    .dashboard-app-item.active .app-icon-wrapper .app-icon,
    .dashboard-app-item.active .app-icon-wrapper i {
        color: #fff !important;
    }

    .intergrid-logo-wrapper img {
        width: 30px;
        max-width: inherit;
    }

    #leftmenu-container {
        position: fixed !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: transparent !important;
        overflow: visible !important;
        z-index: 9999998;
    }

    #contents, div#contents {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-bottom: 50px !important;
        overflow-x: hidden !important;
    }

    div#kmsbody {
        overflow-x: hidden !important;
    }

    body, html {
        padding-bottom: 50px !important;
    }

    div#application:not(.view_on_map) {
        height: calc(100vh - 100px) !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }

    div#dbtable-wrapper {
        overflow-y: auto;
        max-height: calc(100vh - 200px);
    }
}

/* Ocultar h1.mob i td.mob de table#idtable en versió desktop */
@media (min-width: 769px) {
    table#idtable h1.mob,
    table#idtable td.mob {
        display: none !important;
    }
}

/* Alinear datacell a la dreta quan el td està alineat a la dreta (per camps money) */
table#dbtable td[align="right"] .datacell,
table#dbtable td[align="right"] .datacell .money-value {
    text-align: right !important;
}

/* Eliminar padding per la vista de mapa (view_on_map action) */
div.view_on_map #application_contents.dataEditor,
div.view_on_map div#application_contents {
    padding: 0px;
}


/* ===== FILE COMPONENT (dataEditor) ===== */
.kms-file-wrapper {
    background: var(--kms-bg-secondary);
    border: 1px solid var(--kms-border);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 15px;
}

.kms-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.kms-file-details {
    flex: 1;
}

.kms-file-name {
    font-weight: 600;
    color: var(--kms-text-primary);
    margin-bottom: 4px;
    word-break: break-word;
}

.kms-file-size {
    font-size: 12px;
    color: var(--kms-text-secondary);
}

.kms-file-open {
    display: inline-block;
    margin-top: 6px;
    color: var(--kms-accent);
    text-decoration: none;
    font-size: 13px;
}

.kms-file-open:hover {
    color: var(--kms-accent-hover, #4dc9e0);
    text-decoration: underline;
}

.kms-file-delete {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    background: rgba(245, 124, 0, 0.12);
    border-radius: 4px;
    margin-top: 8px;
}

html[data-theme="light"] .kms-file-delete {
    background: #fff3e0;
}

.kms-file-delete input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.kms-file-delete label {
    margin: 0;
    cursor: pointer;
    color: #f57c00;
    font-weight: 500;
    font-size: 13px;
}

.kms-file-notfound {
    background: rgba(198, 40, 40, 0.15);
    border: 1px solid rgba(239, 83, 80, 0.5);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 15px;
    color: #ef5350;
}

html[data-theme="light"] .kms-file-notfound {
    background: #ffebee;
    border-color: #ef5350;
    color: #c62828;
}

.kms-file-upload-wrapper {
    margin-top: 0;
}

.kms-file-upload-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--kms-text-secondary);
    font-size: 13px;
}

.kms-file-upload-input {
    width: 100%;
    padding: 8px;
    border: 2px dashed var(--kms-border, #bdbdbd);
    border-radius: 4px;
    background: var(--kms-bg-secondary);
    color: var(--kms-text-primary);
    box-sizing: border-box;
}

html[data-theme="light"] .kms-file-upload-input {
    border-color: #bdbdbd;
    background: #fafafa;
}

/* ===== GLOBAL: Evitar scroll vertical a nivell de pàgina ===== */
/* El scroll ha de passar DINS #contents, no a nivell de html/body   */
/* S'aplica a TOTES les vistes del KMS, per a tots els clients        */
/* Topbar height = 50px, per tant #kmsbody = calc(100vh - 50px)       */
@media (min-width: 769px) {
    html {
        overflow: hidden !important;
        height: 100vh !important;
    }

    body.kms_f,
    body.kms_b,
    body[class*="kms_"] {
        overflow: hidden !important;
        height: 100vh !important;
    }

    #kmsbody,
    div#kmsbody {
        height: calc(100vh - 50px) !important;
        max-height: calc(100vh - 50px) !important;
        overflow: hidden !important;
    }

    #kmsbody > #contents,
    #kmsbody > div#contents {
        height: calc(100vh - 50px) !important;
        max-height: calc(100vh - 50px) !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
    }
}

/* ===== VISTA DE MAPA (view_on_map): sense scroll dins #contents ===== */
/* El mapa ha d'ocupar tot l'espai disponible sense scroll              */
@media (min-width: 769px) {
    #kmsbody:has(#application.view_on_map) > #contents,
    #kmsbody:has(div.view_on_map) > #contents,
    #kmsbody:has(div.view_on_map) > div#contents {
        overflow: hidden !important;
    }

    #application.view_on_map,
    div.application.view_on_map,
    div.view_on_map {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        position: relative !important;
    }

    #application.view_on_map #application_contents,
    div.application.view_on_map div#application_contents,
    div.view_on_map div#application_contents,
    div.view_on_map #application_contents {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        padding: 0 !important;
    }

    #application.view_on_map #map,
    div.application.view_on_map #map,
    div.view_on_map #map {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ===== BADGE MISSATGES NO LLEGITS (#apps icona messaging) ===== */
.app-icon-wrapper {
    position: relative !important;
}

.kms-msg-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #e91e63;
    color: #fff;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
    box-sizing: border-box;
    display: none;
    z-index: 20;
    pointer-events: none;
    border: 1px solid rgba(0,0,0,0.2);
}

.kms-msg-badge.active {
    display: block;
    animation: kms-badge-pop 0.3s ease-out;
}

@keyframes kms-badge-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1);   opacity: 1; }
}

@media (max-width: 768px) {
    #application_contents.dataEditor, div#application_contents {
        width: 100%;
        padding: 0px 10px;
    }

    .pagination-pages {
        display: none;
    }

    /* Ocultar botó eliminar al dataBrowser en mòbil */
    body.dbtable-overflow.mobile-view table.smallicons td:has(a[href*="delete_confirm"]) {
        display: none !important;
    }

    .dataEditor select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        min-height: 42px;
        padding: 10px 14px !important;
        width: 100%;
        max-width: 100%;
    }

    /* Vista de mapa en mòbil: alçada i posicionament */
    #kmsbody:has(#application.view_on_map) > #contents,
    #kmsbody:has(div.view_on_map) > #contents,
    #kmsbody:has(div.view_on_map) > div#contents {
        overflow: hidden !important;
    }

    #application.view_on_map,
    div.application.view_on_map,
    div.view_on_map {
        height: calc(100vh - 100px) !important;
        max-height: calc(100vh - 100px) !important;
        overflow: hidden !important;
        position: relative !important;
    }

    #application.view_on_map #application_contents,
    div.view_on_map div#application_contents,
    div.view_on_map #application_contents {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
        position: relative !important;
        padding: 0 !important;
    }

    #application.view_on_map #map,
    div.application.view_on_map #map,
    div.view_on_map #map {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Forçar visibilitat de #apps a pantalles molt petites */
@media (max-width: 480px) {
    #apps, div#apps {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 50px !important;
        z-index: 9999999 !important;
    }
}

/* kms-styles.css | https://control.intergrid.cat/kms/css/kms-styles.css?k=20260302142204 */

div#buttonbar, #buttonbar {
  width: 100%;
}

/* kms-styles.css | https://intranet.thebubble-bus.com/kms/css/kms-styles.css?k=20260304102245 */

.intergrid-logo-wrapper {
  margin-left: 9px;
}

/* Botó invertit (contrast): definit també aquí perquè les pàgines del tauler
   que no carreguen kms-dashboard.css (clients, dominis...) el tinguin igual. */
.widget-btn-white {
    background: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #111827 !important;
    font-weight: 600 !important;
}
.widget-btn-white:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}
.widget-btn-white i, .widget-btn-white svg {
    color: #111827 !important;
}

/* Botó invertit respecte del tema: contrast màxim.
   Tema clar (per defecte, sense data-theme o amb "light"): fons negre,
   lletra blanca. Amb data-theme="dark": fons blanc, lletra negra.
   Selectors amb especificitat alta a posta: cap regla de tema no els
   ha de poder trepitjar. */
/* Botó "outline intens": com el widget-btn-base (fons clar/tertiari) però
   amb la vora del color del text (negra en tema clar, blanca en fosc).
   Substitueix l'antic widget-btn-invert (fons ple invertit). */
.widget-btn-strong-outline,
html:not([data-theme="dark"]) .widget-btn-base.widget-btn-strong-outline {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    color: #000000 !important;
    font-weight: 600 !important;
}
.widget-btn-strong-outline:hover,
html:not([data-theme="dark"]) .widget-btn-base.widget-btn-strong-outline:hover {
    background: #f1f5f9 !important;
    border-color: #000000 !important;
    color: #000000 !important;
}
.widget-btn-strong-outline i, .widget-btn-strong-outline svg,
html:not([data-theme="dark"]) .widget-btn-base.widget-btn-strong-outline i,
html:not([data-theme="dark"]) .widget-btn-base.widget-btn-strong-outline svg {
    color: #000000 !important;
}
html[data-theme="dark"] .widget-btn-base.widget-btn-strong-outline {
    background: var(--dark-bg-tertiary) !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .widget-btn-base.widget-btn-strong-outline:hover {
    background: var(--dark-bg-primary) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .widget-btn-base.widget-btn-strong-outline i,
html[data-theme="dark"] .widget-btn-base.widget-btn-strong-outline svg {
    color: #ffffff !important;
}

/* Menú lateral d'apps (#apps): icones sempre blanques, en tots dos temes */
#apps .app-icon,
#apps .app-icon-wrapper i,
#apps .fa-icon-large {
    color: #ffffff !important;
}

/* Xarxa de seguretat: si el DOM encara porta la classe antiga widget-btn-white
   a les accions ràpides del widget d'agència (pàgina no recarregada), en tema
   clar també s'inverteix. */
html:not([data-theme="dark"]) .agency-header-actions .widget-btn-base.widget-btn-white {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}
html:not([data-theme="dark"]) .agency-header-actions .widget-btn-base.widget-btn-white i,
html:not([data-theme="dark"]) .agency-header-actions .widget-btn-base.widget-btn-white svg {
    color: #ffffff !important;
}

/* ===== Capa de consistència del tauler de control =====================
   Regles transversals perquè totes les seccions (clients, dominis,
   allotjaments, bústies, factures) comparteixin el mateix llenguatge:
   targetes compactes, focus teal als cercadors i hover coherent. */

/* Targetes d'estadística compactes a tot arreu */
.widget-stat-card-base { padding: 8px 10px !important; }
.widget-stat-card-base .widget-stat-value-lg { font-size: 22px; margin-top: 2px; }
.widget-stat-card-base .widget-stat-value { margin-top: 2px; }

/* Cercadors dels llistats: radi i focus amb l'accent corporatiu */
.widget-search-input {
    border-radius: 6px !important;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.widget-search-input:focus {
    outline: none !important;
    border-color: #08b29e !important;
    box-shadow: 0 0 0 3px rgba(8, 178, 158, .15) !important;
}

/* Hover coherent dels botons primaris de secció que queden amb accent ple
   (els *-btn-primary d'algunes pàgines tenien hovers de blaus antics) */
.cl-btn-primary:hover, .dom-btn-primary:hover, .host-btn-primary:hover, .mbx-btn-primary:hover {
    background: #0d7a92 !important;
    border-color: #0d7a92 !important;
}

/* ===== PAGINES INCRUSTADES (iframe dins d'un modal del tauler) =====
   Les pagines que se serveixen sense el marc del tauler per anar dins d'una
   finestra (domains-tool.php, hosting_limits, hosting_new_embed, logs_embed,
   web_manage&embed=logs, ...) posen la classe "kms-embed" al <body>: el fons
   el pinta la finestra que les conte, en el seu tema, i aqui NO s'ha de
   pintar res. Aixo desfa d'un sol cop les regles de mes amunt que posen el
   body de negre (en fosc i, expressament, tambe en clar), que abans obligaven
   a un pedaç per pagina. - 2026-08-16 */
html body.kms-embed,
html[data-theme="dark"] body.kms-embed, html[data-theme="light"] body.kms-embed,
html[data-theme="dark"] body.kms-embed.kms_f, html[data-theme="light"] body.kms-embed.kms_f,
html[data-theme="dark"] body.kms-embed.kms_b, html[data-theme="light"] body.kms-embed.kms_b,
html[data-theme="dark"] body.kms-embed.kms_e, html[data-theme="light"] body.kms-embed.kms_e {
    background: transparent !important;
    background-color: transparent !important;
}
html:has(> body.kms-embed), html[data-theme="dark"]:has(> body.kms-embed), html[data-theme="light"]:has(> body.kms-embed) {
    background: transparent !important;
    background-color: transparent !important;
}