/* ========================================
   FONT AWESOME 6 VARIABLES
   ======================================== */
:root {
    --fa-style-family: "Font Awesome 6 Free";
    --fa-style: 900;
}

/* 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;
}


/* ========================================
   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;
}

<!--
/*@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) ===== */
:root,
html[data-theme="dark"] {
    /* Backgrounds */
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #2d2d2d;
    --dark-bg-tertiary: #3a3a3a;
    --dark-bg-hover: #292929;
    
    /* Text colors */
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
    
    /* Borders & accents */
    --dark-border: #222;
    --dark-accent: #3dbdd9;
    --dark-accent-hover: #4dc9e0;
    
    /* Additional variables for consistency */
    --card-bg: #2d2d2d;
    --border-color: #404040;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --primary-color: #22d3ee;
    --radius: 8px;
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* ===== LIGHT MODE THEME ===== */
html[data-theme="light"] {
    /* Backgrounds */
    --dark-bg-primary: #ffffff;
    --dark-bg-secondary: #f5f5f5;
    --dark-bg-tertiary: #e8e8e8;
    --dark-bg-hover: #e0e0e0;
    
    /* Text colors */
    --dark-text-primary: #1a1a1a;
    --dark-text-secondary: #404040;
    
    /* Borders & accents */
    --dark-border: #d0d0d0;
    --dark-accent: #3dbdd9;
    --dark-accent-hover: #4dc9e0;
    
    /* Additional variables for consistency */
    --card-bg: #ffffff;
    --border-color: #d0d0d0;
    --text-primary: #1a1a1a;
    --text-secondary: #404040;
    --primary-color: #14a7c9;
    --radius: 8px;
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.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(74, 158, 255, 0.9) 0%, rgba(74, 158, 255, 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: 11px;
	color: var(--dark-text-primary);
}

input, select, textarea {
    background-color: var(--dark-bg-tertiary);
    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 tr { line-height:26px; }
table#dbtable tr,table#dbtable td { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size:12px;
    color: var(--dark-text-primary);
    background-color: var(--dark-bg-secondary);
}

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;
}

/* --- 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);
}

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

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

html[data-theme="light"] #contents {
    display:none;
    height:auto;
    background-color: #fff;
}

.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;
}

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

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

html,body,table.document {
  scrollbar-color: var(--dark-bg-tertiary) var(--dark-bg-primary);
}

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

.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);
}

div#buttonbar {
  padding-top:2px;
  height:26px;
  overflow:hidden;
  border-bottom: 1px solid var(--dark-border);
  background-color: var(--dark-bg-tertiary);
}

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

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

div.datacell {
    display:-webkit-inline-grid;
    padding-left:3px;
    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-color: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  border: 1px solid var(--dark-border);
  border-left-width:0px;
  border-top:0px;
  padding-left:5px;
  padding-right:2px;
  height:14px;
  line-height:12px;
}

.HDR {
  height:23px;
  padding: 5px 5px 0px 5px !important;
}

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

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

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;
}

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

.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: 28px;
  height: 27px;
  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);
}

.leftmenu-content-wrapper { background: #1a1a1a; }

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

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

#leftmenu a:hover {
    background-color: var(--dark-bg-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;
}

.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: #1a1a1a;
}

/* --- 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 {
    background-color: var(--dark-bg-secondary);
    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: -6px;
}

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

table#dbtable tr.HDR th:first-child {
    padding: 3px 0px 0px 7px !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 {
    background-color: var(--dark-bg-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) {
    .leftmenu, #leftmenu {
        flex: 0 0 0;
        max-width: 0;
        min-width: 0;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        transition: all 0.3s ease;
    }
    
    .leftmenu.show, #leftmenu.show {
        flex: 0 0 250px;
        max-width: 250px;
        min-width: 250px;
    }
    
    .contents, #contents {
        flex: 1 1 100%;
    }
}

/* 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;
}


/* ===== 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;
}

/* 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(74, 158, 255, 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 {
    background-color: var(--dark-bg-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%;
    background: rgba(255, 255, 255, 0.1);
    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(74, 158, 255, 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 {
    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);
    width: 100%;
}

/* 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 {
    background-color: var(--dark-bg-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%;
    background: rgba(255, 255, 255, 0.15);
    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(74, 158, 255, 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(74, 158, 255, 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: 16px;
    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;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    border-radius: 4px;
    margin: 2px 5px;
}

/* Butmenu category */
div#butmenu.category {
    display: flex;
    position: relative;
    align-items: center;
    gap: 8px;
    padding: 12px 10px 8px 5px;
    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;
}

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: 0px !important;
    top: 18px;
    transform: rotate(90deg);
    color: #e0e0e0;
}

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

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

#leftmenu li:hover div#butmenu {
    background: linear-gradient(90deg, rgba(74, 158, 255, 0.1) 0%, transparent 100%);
    border-left-color: var(--dark-accent);
    padding-left: 18px;
}

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

/* Menu name dins butmenu */
div#butmenu div.menu_name,
#butmenu .menu_name {
    padding: 0px 0px 0px 8px !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 {
    background: linear-gradient(90deg, rgba(74, 158, 255, 0.15) 0%, transparent 100%);
}

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 */

ul#viewchange_left li.selected a,
ul#leftmenu li ul#viewchange_left li.selected a {
    color: #fff;
    font-weight: 600;
    border-left-color: transparent;
}

ul#viewchange_left li.selected a::before {
    opacity: 1;
    color: #fff;
}

/* 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 */
li.sub_selected {
    display: inline-block;
    border-left: 3px solid var(--dark-accent);
}

/* 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%;
    background: rgba(255, 255, 255, 0.1);
    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 */
.dataEditor,
div.dataEditor {
    background-color: var(--dark-bg-secondary);
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 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: 20px;
}

.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(74, 158, 255, 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='%234a9eff' 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: 600px;
    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: 10px 20px;
    background: linear-gradient(to bottom, var(--dark-accent) 0%, #3a87e8 100%);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    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: linear-gradient(to bottom, var(--dark-accent-hover) 0%, var(--dark-accent) 100%);
    box-shadow: 0 4px 8px rgba(74, 158, 255, 0.3);
    transform: translateY(-1px);
}

.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;
}

/* File uploads */
.dataEditor input[type="file"] {
    padding: 8px;
    border: 1px dashed var(--dark-border);
    border-radius: 4px;
    background-color: rgba(74, 158, 255, 0.03);
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 450px;
}

.dataEditor input[type="file"]:hover {
    border-color: var(--dark-accent);
    background-color: rgba(74, 158, 255, 0.08);
}

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

.dataEditor .alert-info {
    background-color: rgba(74, 158, 255, 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;
    }
    
    .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 input[type="text"],
    .dataEditor input[type="email"],
    .dataEditor select,
    .dataEditor textarea {
        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(74, 158, 255, 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;
}

.dataEditor .row.ROW1,
.dataEditor .ROW1 {
    background-color: rgba(45, 45, 45, 0.2);
}

/* Hover en files */
.dataEditor .row:hover {
    background-color: rgba(74, 158, 255, 0.05);
    border-radius: 4px;
}

/* 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: 20px;
    border-radius:0 !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: linear-gradient(to bottom, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%);
    border: 1px solid var(--dark-border);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 20px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

form#dm .group:hover {
    background: linear-gradient(to bottom, var(--dark-bg-hover) 0%, var(--dark-bg-tertiary) 100%);
    border-color: var(--dark-accent);
    box-shadow: 0 4px 8px rgba(74, 158, 255, 0.15);
    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: 12px;
    font-weight: 500;
    color: var(--dark-accent);
    padding: 4px 12px;
    background-color: rgba(74, 158, 255, 0.1);
    border-radius: 4px;
    transition: all 0.2s ease;
}

form#dm .group:hover .ctr,
form#dm .group:hover .right {
    background-color: rgba(74, 158, 255, 0.2);
    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: 0 0 6px 6px;
    padding: 0;
    margin-top: -10px;
    margin-bottom: 20px;
    overflow: hidden;
}

div[id^="group"] .LISTFORM {
    padding: 20px;
    background-color: rgba(45, 45, 45, 0.3);
}

/* 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(74, 158, 255, 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: 8px 0;
}

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

/* 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 12px;
    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: 12px;
    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);
}

/* 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;
    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;
}


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

/* Datacell com a contenidor flex */
div.datacell {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-left: 3px;
    width: inherit;
    max-height: 60px;
    min-height: 15px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 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;
}

/* 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: 6px;
    margin: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 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;
}

/* 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: space-between;
    align-items: center;
    padding: 10px;
    background: linear-gradient(to bottom, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%);
    border-bottom: 1px solid var(--dark-border);
    min-height: 45px;
    gap: 15px;
}

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

/* Right buttons - Alineats a la dreta */
div#rightbuttons,
#rightbuttons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: 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"] {
    background: linear-gradient(to bottom, var(--dark-accent) 0%, #3a87e8 100%);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

#buttonbar button:hover,
#buttonbar input[type="button"]:hover,
#leftbuttons button:hover,
#rightbuttons button:hover {
    background: linear-gradient(to bottom, var(--dark-accent-hover) 0%, var(--dark-accent) 100%);
    box-shadow: 0 3px 6px rgba(74, 158, 255, 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: linear-gradient(to bottom, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%);
    border: 1px solid var(--input-border, rgba(255, 255, 255, 0.2)) !important;
    color: #dedede;
    padding: 6px 10px !important;
}

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

/* Search dins del rightbuttons */
#rightbuttons #search,
#buttonbar #search {
    display: flex;
    align-items: center;
    gap: 8px;
}

#rightbuttons #search input[type="text"],
#buttonbar #search input[type="text"] {
    padding: 6px 12px;
    background-color: var(--dark-bg-tertiary);
    border: 1px solid var(--dark-border);
    border-radius: 4px;
    color: var(--dark-text-primary);
    font-size: 12px;
    width: 200px;
    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(74, 158, 255, 0.15);
}

/* 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='%234a9eff' 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='%234a9eff' 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: 32px !important;
    height: 32px !important;
    background-color: var(--dark-bg-tertiary) !important;
    border: 1px solid var(--dark-border) !important;
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    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: 6px 12px;
    background-color: var(--dark-bg-tertiary);
    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;
}

/* Responsive */
@media (max-width: 768px) {
    #buttonbar {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
    }
    
    #leftbuttons,
    #rightbuttons {
        justify-content: center;
        width: 100%;
    }
    
    #rightbuttons {
        margin-left: 0;
        margin-top: 10px;
    }
    
    #rightbuttons #search input[type="text"] {
        width: 100%;
    }
}

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

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


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

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

/* Hover en files ROW_ */
tr.ROW_:hover,
tr[class*="ROW_"]:hover {
    background-color: rgba(74, 158, 255, 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 */

div.panel_header div.content { padding:0px 10px }

#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: 10px 2px;
  font-size: 15px;
  font-weight: 600;
}

/* 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;
}

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 span {
    color: var(--dark-border) !important;
}

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

/* 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;
    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);
}

/* 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;
}

.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 < 1400px */
@media (max-width: 1400px) {
    /* OCULTAR quick_menu */
    ul.quick_menu {
        display: none !important;
    }
    
    /* OCULTAR elements topoptions */
    .topoptions-wrapper > .theme-switcher,
    .topoptions-wrapper > .top-user,
    .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(--card-bg);
    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;
}

/* 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 10px;
    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;
}

#mobile-dropdown-menu .mobile-menu-item:hover,
#mobile-dropdown-menu .mobile-menu-item:active {
    background: var(--hover-bg);
    color: #fff !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 {
    width: 20px;
    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;
}

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

.topoptions-wrapper .top-logout > span:first-child {
    color: var(--border-color, #666) !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;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 4px;
    color: #ef4444 !important;
    transition: all 0.2s ease;
}

.topoptions-wrapper .logout-btn:hover {
    background: var(--dark-bg-hover, #e0e0e0);
    color: var(--dark-text-primary, #1a1a1a) !important;
}

/* 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 - hamburger negre */
html[data-theme="light"] .topoptions-wrapper .hamburger-menu {
    color: #000000;
}

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

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

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"] .highlight,
html[data-theme="light"] .selected {
    background-color: rgba(8, 145, 178, 0.1);
}

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

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);
}

/* 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: #1a1a1a;
    color: #e0e0e0;
}

/* Light theme */
html[data-theme="light"] body,
body[data-theme="light"] {
    background-color: #ffffff;
    color: #1a1a1a;
}

/* Assegurar que kms_f pages també tinguin el background correcte */
html[data-theme="dark"] body.kms_f {
    background-color: #1a1a1a !important;
}

html[data-theme="light"] body.kms_f {
    background-color: #ffffff !important;
}
/* ===== LAYOUT CORRECTE: LEFT MENU + CONTENTS ===== */

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

/* Left menu - fixat a l'esquerra amb amplada fixa */
#kmsbody #leftmenu,
#kmsbody .leftmenu {
    flex: 0 0 300px !important;
    max-width: 250px;
    min-width: 250px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--dark-border);
    position: relative;
    z-index: 10;
    padding-bottom: 24px;
}

/* 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;
}

/* 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. #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: none !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    display: block !important;
}

/* ===== FIX CRÍTIC: Evitar que #contents sigui 100% de width ===== */

/* 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;
}

#kmsbody > div#contents,
#kmsbody .contents {
    max-width: calc(100vw - 300px) !important; /* viewport - leftmenu */
    box-sizing: border-box !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 */

/* #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;
    min-height: calc(100vh - 50px) !important;
    overflow: hidden !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;
    max-width: 100vw !important;
    min-height: calc(100vh - 50px) !important;
    overflow: hidden !important;
    box-sizing: border-box !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;
}

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

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

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

/* ========================================
   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(76, 175, 80, 0.1);
    --msg-border: rgba(76, 175, 80, 0.3);
    --msg-text: #4caf50;
}

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: inline-flex !important;
    align-items: center;
    max-width: 220px;
    min-width: 180px;
    position: relative !important;
    order: 2;
    height: 30px !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: 30px !important;
    padding: 0 12px 0 36px !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;
    background: var(--input-bg-focus, rgba(255, 255, 255, 0.15)) !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: 30px !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;
    }
    
    #searchBox,
    #fieldSelector,
    #searchBut,
    #searchCombo {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #searchBox input[type='text'],
    #searchBox input#query,
    #fieldSelector select:not(#queryfield) {
        width: 100% !important;
    }
}

/* ========================================
   Millores als botons d'importar, exportar i imprimir
   ======================================== */

.importButton,
.exportButton {
    background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
    border: 1px solid #cccccc;
    border-radius: 4px;
    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);
}

.importButton:hover,
.exportButton:hover {
    background: linear-gradient(to bottom, #f8f8f8 0%, #d9d9d9 100%);
    border-color: #adadad;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* 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;
}


/* ========================================
   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;
	}
}

/* Ocultar leftmenu quan apareix hamburguesa (< 1400px) */
@media (max-width: 1400px) {
	/* Ocultar NOMÉS leftmenu-content-wrapper, mantenir #apps visible */
	.leftmenu-content-wrapper {
		display: none !important;
	}

	/* Ocultar la columna td que conté el leftmenu (però no el contingut) */
	.leftmenu-column,
	#leftmenu-column {
		/* No ocultem completament, només reduïm amplada */
		width: 50px !important;
		min-width: 50px !important;
		max-width: 50px !important;
	}

	/* El leftmenu es manté però amb amplada reduïda */
	#leftmenu,
	.leftmenu {
		width: 50px !important;
		min-width: 50px !important;
		max-width: 50px !important;
	}

	/* Fer que el contingut ocupi la resta de l'ample */
	.content-column,
	#content-column {
		width: calc(100% - 50px) !important;
	}

	/* Ajustar grid layout amb leftmenu estret (però NO al dashboard) */
	body:not(.dashboard) #kmsbody,
	html body.kms_f:not(.dashboard) #kmsbody,
	html body.kms_b:not(.dashboard) #kmsbody,
	html body:not(.dashboard) div#kmsbody,
	body.kms_f:not(.dashboard) div#kmsbody,
	body.kms_b:not(.dashboard) div#kmsbody {
		grid-template-columns: 50px 1fr !important;
	}

	/* Leftmenu manté grid-column 1 */
	#kmsbody > #leftmenu,
	#kmsbody > div#leftmenu,
	html body.kms_f #kmsbody > #leftmenu,
	html body.kms_b #kmsbody > #leftmenu,
	body div#kmsbody > #leftmenu {
		grid-column: 1 !important;
		width: 50px !important;
		max-width: 50px !important;
		min-width: 50px !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: 12px 21px 11px 15px;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	transition: all 0.2s ease;
	position: relative;
	z-index: 2;
}

.mobile-submenu-toggle:hover {
	background: rgba(255, 255, 255, 0.1);
}

.mobile-submenu-toggle span {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	color: var(--text-primary, #fff);
}

.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;
}

/* ===== 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;
}

/* 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;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    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;
}

/* Dark mode específic */
html[data-theme="dark"] table.OPT button,
html[data-theme="dark"] table.OPT .kmsbut button {
    box-shadow: 0 2px 4px rgba(46, 185, 189, 0.3);
}

/* Light mode */
html[data-theme="light"] table.OPT {
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
    border-color: #dee2e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}


/* ========================================
   CUSTOM SELECT (queryfield flotant - estil viewchange)
   ======================================== */

.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(74, 158, 255, 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(74, 158, 255, 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(74, 158, 255, 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;
}

/* 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;
}

/* 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;
}

/* 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-right: 18px;
}

/* 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%;
}

/* Leftmenu content wrapper */
.leftmenu-content-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: clip;
}

/* 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; }
/* ===== 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: 2px 10px 0px 11px;
}

/* Mod header title container */
.mod-header-title {
    float: left;
}

/* 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 amb color accent (24px) */
.fa-icon-large {
    font-size: 20px;
    color: #3dbdd9;
}

/* 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: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

#ai-attach-btn:hover {
    background: rgba(59, 130, 246, 0.15);
}

#ai-attach-btn:hover i {
    color: #3b82f6;
}

/* 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: 8rem;
    padding: 10px 0px 10px 14px;
    max-width: 140px !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.5rem;
    border-right: 1px solid var(--dark-border);
    flex-shrink: 0;
}


/* ============================================
   INPUT COMMENTS - Comentaris per inputs
   ============================================ */

.input-comment {
    display: block;
    /* margin-top: 4px; */
    /* letter-spacing: 0.5px; */
    margin-top: 14px;
    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: "\f0e0";
    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;
}