body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #333; /* Default background color */
    color: #333;
}

.navbar {
    background-color: gray;

    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 60px;
    width: 90%;

    margin: 20px auto;
    padding: 0 30px;

    border-radius: 20px;

    /* box-shadow: 0 8px 20px rgba(0,0,0,.35); */
    box-shadow:0 10px 25px rgba(0,0,0,.3);

    position: sticky;
    top: 15px;
    z-index: 1000;
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

.navbar ul li {
    margin: 0 15px;
}

.navbar ul li a {
    color: black;
    text-decoration: none;
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    transition: color 0.3s;
}

.navbar ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: #d4a017;
    transition: width 0.25s ease;
}

.navbar ul li a:hover {
    color: #f4a261;
}

.navbar ul li a:hover::after {
    width: 100%;
}

.navbar .welcome-user {
    margin-left: 150px; /* Dodajte razmak s lijeve strane */
    font-weight: normal; /* Možete prilagoditi stil fonta ako želite */
    color: #ffcc00; /* Promijenite boju teksta ako želite */
}

.navbar-left{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:240px;
}

.logo{
    width:42px;
    height:42px;
    border-radius:12px;
    /* filter: brightness(0) saturate(100%) invert(194%) sepia(100%) saturate(1000%) hue-rotate(10deg) brightness(105%); */
    /* filter: brightness(0) saturate(100%) invert(37%) sepia(97%) saturate(1812%) hue-rotate(204deg) brightness(101%) contrast(98%); */
}

.logo-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
    line-height:1.1;
}

.logo-title{
    font-size:22px;
    font-weight:700;
    color:#4b1616e1;
}

.logo-subtitle{
    margin-top:2px;
    font-size:11px;
    /* color:#9ea6b0; */
    color:#ddd7d2;
    letter-spacing:1px;
    text-transform:uppercase;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 12px;
}

.logo-link:hover {
    cursor: pointer;
}

.program-name{
    font-size:22px;
    font-weight:600;
    color:#fff;
}

.navbar-menu{
    display:flex;
    gap:10px;

    list-style:none;

    margin:0;
    padding:0;
}

.navbar-menu a{
    color:white;
    text-decoration:none;
    font-weight:600;
}

.navbar-menu a:hover{
    color:#f4a261;
}


.navbar-right{
    display:flex;
    align-items:center;
}

.login-card,
.user-card{
    display:flex;
    align-items:center;
    gap:12px;

    padding:8px 18px;

    border-radius:999px;

    background:#616953;

    border:2px solid white;

    cursor:pointer;

    transition:.25s;
}

.login-card:hover,
.user-card:hover{
    background:#454c56;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
}

.login-icon,
.user-icon{
    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#4a5568;

    color:#4da3ff;
}

.login-icon svg{
    width:20px;
    height:20px;
}

.login-text,
.user-text{
    display:flex;
    flex-direction:column;
}

.login-title,
.user-title{
    color:#fff;
    font-size:15px;
    font-weight:600;
}

.login-subtitle,
.user-subtitle{
    font-size:12px;
    color:#aeb6c2;
}

.user-subtitle a{
    color:#aeb6c2;
    text-decoration:none;
}

.user-subtitle a:hover{
    color:white;
}

.navbar-right a{
    color:white;
    text-decoration:none;
}

.welcome-user{
    color:#ffcc00;
}






.container {
    display: flex;
}


.main-content {
    flex-grow: 1;
    padding: 20px;
}

.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu > li {
    position: relative;
}

.menu > li > a {
    display: block;
    padding: 10px;
    background-color: #333;
    color: #ffcc00;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px; /* Add this line to reduce font size */
}

.menu > li > a:hover {
    background-color: #555;
}

.submenu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
    position: relative;
    background-color: #444;
}

.submenu > li {
    display: flex;
    align-items: center;
    padding: 1px 0; /* Adjust this line to reduce padding */
}

.submenu > li > input[type="checkbox"] {
    margin-right: 10px;
}

.submenu > li > a {
    display: block;
    padding: 5px 10px; /* Adjust this line to reduce padding */
    background-color: #444;
    color: white;
    text-decoration: none;
    font-size: 12px; /* Add this line to reduce font size */
}

.submenu > li > a:hover {
    background-color: #555;
}

.submenu.open {
    display: block;
}


.flex-container {
    display: flex;
    align-items: flex-start; /* Poravnajte elemente na vrhu */
    gap: 20px; /* Razmak između elemenata */
}
/* Pozadina od drop down dijela*/

.info-section {
    width: 70%; /* Prilagodite širinu po potrebi */
}

.info-section h1 {
    margin-top: 5px;
}

.info-section p {
    margin-top: -25px; /* Smanjite razmak iznad <p> elementa */
}

/* Pozadina od upload bttona*/
.button_up {
    background-color: #4CAF50; /* Change this to your desired color */
    color: black;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    margin-top: 10px;
}
/* isto od upload buttona*/
.button_up:hover {
    background-color: #45a049; /* Change this to your desired hover color */
}

.my-form {
    margin-bottom: 10px;
}

.my-form p {
    margin: 0;
    font-size: 1.2em;
}

.button {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    background: #333;
    color: #fff;
    border-radius: 5px;
    margin-top: 10px;
    text-decoration: none;
}

.button:hover {
    background: #555;
}

#fileElem {
    display: none;
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: #d1a835;
    color: black;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    text-align: center;
    position: relative; /* Add this to position the close button */
}

#swVersionModal .modal-content {
    margin: 2% auto;
}

.close {
    color: black;
    position: absolute; /* Change to absolute positioning */
    top: 3px; /* Position from the top */
    right: 10px; /* Position from the right */
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#modalOkButton {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    margin-top: 20px;
    border: none;
    cursor: pointer;
}

#modalOkButton:hover {
    background-color: #45a049;
}

/* Pure-CSS gear spinner (replaces the old 1.2 MB anim_gear.gif). */
.loading-gear {
    display: block;
    margin: 18px auto 4px;
    width: 88px;
    height: 88px;
}

.loading-gear svg {
    width: 100%;
    height: 100%;
    fill: #e46666;
    animation: gear-spin 1.6s linear infinite;
}

@keyframes gear-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loading-gear svg { animation-duration: 4.5s; }
}

#analyzingModal {
    background-color: rgba(0, 0, 0, 0.8); /* Background color with transparency */
}

#analyzingModal .modal-content {
    background-color: #58ABA1; /* Change this to your desired color */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}


.button_up[disabled] {
    background-color: #ccc; /* Siva boja za onemogućeno dugme */
    cursor: not-allowed; /* Promijenite kursor na not-allowed */
}

.close-upload, .close-selection {
    color: black;
    position: absolute; /* Change to absolute positioning */
    top: 3px; /* Position from the top */
    right: 10px; /* Position from the right */
    font-size: 28px;
    font-weight: bold;
}

.close-upload:hover, .close-upload:focus,
.close-selection:hover, .close-selection:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* od modalnog prozora kada nije selektovan menu */
#selectionOkButton {
    background-color: #ccc; /* Zelena boja pozadine */
    color: rgb(10, 2, 2); /* Bijela boja teksta */
    padding: 10px 20px; /* Unutrašnji razmak */
    border: none; /* Bez obruba */
    border-radius: 5px; /* Zaobljeni uglovi */
    cursor: pointer; /* Kursor u obliku ruke */
    text-align: center; /* Centriranje teksta */
    display: inline-block; /* Inline-block prikaz */
    font-size: 16px; /* Veličina fonta */
    margin-top: 10px; /* Gornji razmak */
}

#selectionOkButton:hover {
    background-color: #10ee538e; /* Tamnija zelena boja pri prelasku miša */
}

.sw-version-modal-body {
    text-align: left;
    margin-top: 10px;
}

.sw-version-modal-list {
    max-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #8a6b12;
    border-radius: 6px;
    background-color: #f8e7b1;
    padding: 8px 10px;
    margin-top: 6px;
    font-family: monospace;
    font-size: 0.95em;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
}

.sw-version-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.sw-version-modal-actions button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
}

.sw-version-modal-actions button:hover {
    background-color: #45a049;
}

/* toggle buttons */
.switch {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.switch input {
    display: none;
}

.slider {
    position: relative;
    width: 40px;
    height: 20px;
    background-color: #ccc;
    border-radius: 34px;
    cursor: pointer;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.switch-text {
    margin-left: 10px;
    font-size: 16px;
}

/* Stil za toggle-group */
.toggle-group {
    display: flex;
    flex-direction: column;
    margin-right: 20px; /* Razmak između grupa */
}

.sidebar {
    width: 235px;
    height: auto;
    background-color: #333;
    color: white;
    padding: 15px;
    font-size: 14px; /* Add this line to reduce font size */
    position: fixed;
    top: 95px;
    bottom: 0;
    overflow-y: auto;
}

.repl-output {
    position: fixed; /* Postavite fiksnu poziciju za REPL prozor */
    top: 400px; /* Postavite REPL prozor na dno stranice */
    left: 270px; /* Postavite REPL prozor na levu stranu stranice */
    width: 36%; /* Postavite širinu REPL prozora */
    height: 200px; /* Postavite visinu REPL prozora */
    background-color: #f8e7b1; /* Match modal info list background */
    color: #1f1f1f; /* Dark text for readability */
    overflow-y: auto; /* Omogućite vertikalno skrolovanje unutar REPL prozora */
    overflow-x: hidden;
    padding: 12px; /* Dodajte padding unutar REPL prozora */
    box-sizing: border-box; /* Uključite padding i border u ukupnu širinu i visinu */
    line-height: 1.5;
    font-family: monospace;
    font-size: 0.95em;
    border: 1px solid #8a6b12;
    border-radius: 10px;
    white-space: pre-wrap;
    word-break: break-word;
}

.repl-output p {
    margin: 0 0 8px;
}

#drop-area {
    border: 2px dashed hsl(130, 90%, 4%);
    border-radius: 20px;
    width: 18%;
    height: 245px;
    padding: 15px;
    text-align: center;
    margin-top: -12px;
    margin-left: 252px;
    transition: border-color 0.3s;
    background-color: #d1a835;
}

#drop-area.highlight {
    border-color: purple;
}

.info-section {
    display: flex;
    flex-wrap: wrap;
    width: 16%; /* Prilagodite širinu po potrebi */
    min-height: 280px; /* Increase height of info section box */
    border: 2px solid #2c2b2b; /* Dodajte border */
    padding: 10px; /* Dodajte padding unutar border-a */
    box-sizing: border-box; /* Osigurajte da padding ne utječe na ukupnu širinu */
    margin-top: -12px; /* Dodajte negativni margin za poravnanje */	
    margin-left: -10px;
    border-radius: 10px;
    background-color: #d1a835;
}

#searchInput {
    margin-top: 0px;
    margin-bottom: 1px;
    padding: 5px;
    width: 100%;
    height: 40px;
    font-size: medium;
    font-weight: bold;
    box-sizing: border-box;
    background-color: #d1a835;

}

.data-table-section {
    width: 39%; /* Prilagodite širinu po potrebi */
    max-height: 533px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: -12px;
    border: 2px solid #2c2b2b;
    border-radius: 6px;
    background-color: #d1a835;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    overflow: hidden;
    border-radius: 6px;
}
 

thead, tbody tr {
    width: 100%;
}

tbody {
    min-height: 100px; /* Dodajte minimalnu visinu za tbody */
}

th, td {
    border: 1px solid #ddd;
    padding: 0px;
    border-color: blue;
    height: 20px; /* Postavite fiksnu visinu za ćelije */
    line-height: 20px;
    box-sizing: border-box;
    white-space: nowrap; /* Sprečite prelamanje teksta */
    overflow: hidden; /* Sakrijte višak teksta */
    text-overflow: ellipsis;
}

th {
    background-color: #e46666; /* Promijenite boju pozadine za zaglavlje */
    text-align: center;
    color : black; /* Promijenite boju teksta za zaglavlje */
}

.col-nr {
    width: 8%;
    color: black;
}

.col-dtc {
    width: 28%;
    color: black;
}

.col-dtc-int {
    width: 35%;
    color: black;
}

.col-status {
    width: 15%;
    color: black
}

tr.status-on {
    background-color: #2fb64f; /* Zelena pozadina za status ON */
}

tr.status-off {
    background-color: #828c97; /* Siva pozadina za status OFF */
}

tr.selected {
    background-color: #1253a8; /* Boja za selektovani red */
}

tr.selected td {
    color: #ffffff; /* Bela boja teksta za ćelije unutar selektovanog reda */
}

.file-name { 
    margin-top: 15px; 
    font-weight: bold; 
    max-width: 100%; 
    word-wrap: break-word; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    text-align: left;
}

.file-name-input {
    display: block;
    width: 100%;
    margin-top: 5px;
    padding: 8px 10px;
    font-size: 0.85em;
    font-family: inherit;
    color: #1f1f1f;
    background-color: #ffffff;
    border: 1px solid #8a6b12;
    border-radius: 6px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-name-label-container {
    text-align: left;
    margin-top: 12px;
}

.file-name-label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
}

.file-name-input:focus {
    outline: none;
    border-color: #4CAF50;
}

.sw-version-link {
    cursor: pointer !important;
    color: #1a73e8;
    text-decoration: underline;
    transition: color 0.2s ease;
    display: inline-block;
    margin-top: 8px;
}

.sw-version-link:hover {
    color: #0b57d0;
}

.fixed-search {
    position: sticky;
    top: 0;
    background-color: #d1a835;
    z-index: 1;
    padding: 5px;
}

.start-codes {
    display: flex;
    color : yellow;
    gap: 10px; /* Razmak između elemenata */
}

.start-codes span {
    white-space: nowrap; /* Sprečava prelamanje teksta */
}

.dashboard{
    max-width:1100px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
    padding:40px;
}

.menu-card{
    height:180px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:#2c3136;
    border-radius:20px;
    text-decoration:none;
    color:white;
    transition:.25s;
    box-shadow:0 10px 25px rgba(0,0,0,.3);
}

.menu-card:hover{
    transform:translateY(-6px);
    background:#0d6efd;
    box-shadow:0 18px 40px rgba(0,0,0,.4);
}

.menu-card img{
    width:70px;
    margin-bottom:15px;
    /* filter: brightness(0) saturate(100%) invert(84%) sepia(100%) saturate(1000%) hue-rotate(10deg) brightness(105%); */
    filter: brightness(0) saturate(100%) invert(56%) sepia(98%) saturate(1500%) hue-rotate(359deg) brightness(103%) contrast(101%);
}


.title{
    font-size:22px;
    font-weight:600;
    color:#fff;
    margin-top:0px;
    margin-bottom:6px;
}

.description{
    margin-top:0px;
    font-size:13px;
    color:#b0b0b0;
    line-height:1.3;
    max-width:220px;
}

.menu-card:hover .description{
    color:#e6e6e6;
}

/* ---------------------------------------------------------------- auth UI */
.navbar-right{ position:relative; }

.login-card,
.user-card{
    border:1px solid rgba(255,255,255,.55);
    background:rgba(255,255,255,.10);
    padding:6px 14px 6px 8px;
    gap:10px;
    color:#fff;
    font:inherit;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

.login-card:hover,
.user-card:hover{
    background:rgba(255,255,255,.18);
    border-color:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.28);
}

.login-icon,
.user-icon{
    width:34px;
    height:34px;
    background:rgba(0,0,0,.28);
    flex:0 0 auto;
}

.user-avatar{
    width:34px;
    height:34px;
    flex:0 0 auto;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#4da3ff,#2b6fd6);
    color:#fff;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
}

.user-avatar img{ width:100%; height:100%; object-fit:cover; }

.user-text,
.login-text{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }

.user-title,
.login-title{ font-size:13px; font-weight:600; color:#fff; }

.user-subtitle,
.login-subtitle{ font-size:11px; color:rgba(255,255,255,.72); }

.user-chevron{
    width:16px;
    height:16px;
    color:rgba(255,255,255,.8);
    transition:transform .18s;
}

.user-card[aria-expanded="true"] .user-chevron{ transform:rotate(180deg); }

.user-wrap{ position:relative; }

.user-menu{
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    min-width:232px;
    padding:6px;
    background:#0f1319;
    border:1px solid #1f2733;
    border-radius:12px;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    transition:opacity .16s, transform .16s, visibility .16s;
    z-index:1200;
}

.user-menu.is-open{ opacity:1; visibility:visible; transform:none; }

.user-menu-head{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:10px 12px 8px;
    margin-bottom:6px;
    border-bottom:1px solid #1f2733;
}

.user-menu-name{ color:#eaf2ff; font-size:13px; font-weight:600; }
.user-menu-mail{ color:#7f8ea3; font-size:11px; word-break:break-all; }

.user-menu-item{
    display:block;
    width:100%;
    padding:9px 12px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#cfdae8;
    font:inherit;
    font-size:13px;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
}

.user-menu-item:hover{ background:#1a2330; color:#fff; }
.user-menu-item.is-out{ color:#ff8a8a; }
.user-menu-item.is-out:hover{ background:#2a1a1c; color:#ffb3b3; }
.user-menu-form{ margin:0; }

/* login modal */
.auth-modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(6,10,14,.62);
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
    z-index:2000;
}

.auth-modal.is-open{ display:flex; }
body.auth-locked{ overflow:hidden; }

.auth-dialog{
    position:relative;
    width:380px;
    max-width:100%;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    padding:26px 26px 20px;
    background:#0f1319;
    border:1px solid #1f2733;
    border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.55);
    animation:auth-in .18s ease-out;
}

@keyframes auth-in{
    from{ opacity:0; transform:translateY(8px) scale(.99); }
    to{ opacity:1; transform:none; }
}

.auth-close{
    position:absolute;
    top:12px;
    right:12px;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#7f8ea3;
    cursor:pointer;
}

.auth-close svg{ width:16px; height:16px; }
.auth-close:hover{ background:#1a2330; color:#fff; }

.auth-head{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.auth-logo{
    width:36px;
    height:36px;
    padding:3px;
    border-radius:9px;
    object-fit:contain;
    background:#131a22;
}
.auth-title{ margin:0; font-size:18px; font-weight:600; color:#eaf2ff; }
.auth-sub{ margin:2px 0 0; font-size:12px; color:#7f8ea3; }

.auth-field{ margin-bottom:14px; }
.auth-field label{
    display:block;
    margin-bottom:6px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#8c9aad;
}
.auth-field input{
    width:100%;
    box-sizing:border-box;
    height:40px;
    padding:0 12px;
    border:1px solid #233041;
    border-radius:9px;
    background:#0b0f14;
    color:#eaf2ff;
    font:inherit;
    font-size:14px;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
}
.auth-field input:focus{
    border-color:#4da3ff;
    box-shadow:0 0 0 3px rgba(77,163,255,.18);
}

.auth-field textarea,
.auth-field select{
    width:100%;
    box-sizing:border-box;
    padding:9px 12px;
    border:1px solid #233041;
    border-radius:9px;
    background:#0b0f14;
    color:#eaf2ff;
    font:inherit;
    font-size:14px;
    resize:vertical;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
}

.auth-field textarea:focus,
.auth-field select:focus{
    border-color:#4da3ff;
    box-shadow:0 0 0 3px rgba(77,163,255,.18);
}

.auth-field input:disabled,
.auth-field textarea:disabled,
.auth-field select:disabled{
    opacity:.55;
    cursor:not-allowed;
}

/* Avatar widget = Django ClearableFileInput ("Currently: …" / "Clear" / "Change:").
   The generic .auth-field input rule forced a 40px box on the checkbox → white square. */
.auth-field input[type=checkbox]{
    -webkit-appearance:none;
    appearance:none;
    width:16px;
    height:16px;
    padding:0;
    margin:0 7px 0 0;
    vertical-align:-3px;
    border:1px solid #33465c;
    border-radius:4px;
    background:#0b0f14;
    box-shadow:none;
    cursor:pointer;
}
.auth-field input[type=checkbox]:hover{ border-color:#4d7fb8; }
.auth-field input[type=checkbox]:focus-visible{ border-color:#4da3ff; box-shadow:0 0 0 3px rgba(77,163,255,.18); }
.auth-field input[type=checkbox]:checked{
    border-color:#2b6fd6;
    background:#2b6fd6 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.4l3 3L12.9 5'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}
/* Avatar widget rows: "Currently: <file>" + pill [x] Clear avatar, then "Change: [file]" */
.acct-file-current{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px;
    margin:0 0 10px;
    font-size:12.5px;
    color:#96a4b8;
}
.acct-file-text{ color:#8c9aad; }
.acct-file-link{
    color:#7fb3d5;
    text-decoration:none;
    word-break:break-all;
}
.acct-file-link:hover{ text-decoration:underline; }
.acct-file-clear{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin:0;
    padding:4px 11px 4px 9px;
    border:1px solid #263244;
    border-radius:999px;
    font-size:12.5px;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    color:#96a4b8;
    cursor:pointer;
    user-select:none;
}
.acct-file-clear:hover{
    color:#cfe0f5;
    border-color:#3d5570;
    background:#141c26;
}
.acct-file-clear input[type=checkbox]{ margin:0; }
.acct-file-change{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 10px;
}
.acct-file-change input[type=file]{
    flex:1 1 220px;
    width:auto;
    min-width:0;
}
.auth-field input[type=file]{
    height:auto;
    padding:8px 10px;
    font-size:12.5px;
    color:#96a4b8;
    cursor:pointer;
}
.auth-field input[type=file]::file-selector-button{
    margin-right:10px;
    padding:6px 12px;
    border:1px solid #2b3a4d;
    border-radius:7px;
    background:#16202b;
    color:#cfe0f5;
    font:inherit;
    font-size:12.5px;
    cursor:pointer;
}
.auth-field input[type=file]::file-selector-button:hover{
    background:#1d2a38;
    border-color:#3d5570;
}

.auth-pass{ position:relative; }
.auth-pass input{ padding-right:44px; }
.auth-eye{
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#7f8ea3;
    cursor:pointer;
}
.auth-eye svg{ width:18px; height:18px; }
.auth-eye:hover,
.auth-eye.is-on{ background:#1a2330; color:#cfe6ff; }

.auth-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:4px 0 16px;
    font-size:12px;
}
.auth-check{ display:flex; align-items:center; gap:7px; color:#9aabbd; cursor:pointer; }
.auth-check input{ width:14px; height:14px; accent-color:#4da3ff; }
.auth-link{ color:#8ab4e0; font-size:12px; text-decoration:none; }
.auth-link:hover{ color:#fff; }

.auth-error{
    display:none;
    margin:0 0 12px;
    padding:9px 11px;
    border:1px solid rgba(255,90,90,.35);
    border-radius:9px;
    background:rgba(255,90,90,.10);
    color:#ffb3b3;
    font-size:12.5px;
}
.auth-error.is-visible{ display:block; }

.auth-submit{
    width:100%;
    height:42px;
    border:0;
    border-radius:9px;
    background:#2f7fe0;
    color:#fff;
    font:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s, opacity .15s;
}
.auth-submit:hover{ background:#3d90f0; }
.auth-submit:disabled{ opacity:.6; cursor:default; }
.auth-submit.is-busy span{ opacity:.55; }

.auth-foot{ margin:16px 0 0; text-align:center; font-size:12px; color:#7f8ea3; }
.auth-foot a{ color:#8ab4e0; text-decoration:none; }
.auth-foot a:hover{ color:#fff; }

.auth-field-error{ margin-top:6px; font-size:11.5px; color:#ffb3b3; }
.auth-help{ margin-top:5px; font-size:11px; color:#6f7f93; }
.auth-opt{ color:#5f6d7f; font-weight:400; letter-spacing:0; text-transform:none; }

.auth-row-two{ display:flex; gap:10px; }
.auth-row-two .auth-field{ flex:1; min-width:0; }

.auth-note{
    padding:14px 16px;
    border:1px solid #233041;
    border-radius:10px;
    background:#0b0f14;
    color:#cfdae8;
    font-size:13px;
    line-height:1.5;
}
.auth-note strong{ color:#eaf2ff; }
.auth-note.is-warn{
    border-color:rgba(255,90,90,.35);
    background:rgba(255,90,90,.08);
    color:#ffb3b3;
}

.auth-passkey{
    width:100%;
    height:40px;
    margin-top:10px;
    border:1px solid #2b3a4d;
    border-radius:9px;
    background:transparent;
    color:#cfe6ff;
    font:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s, border-color .15s;
}
.auth-passkey:hover{ background:#16202c; border-color:#3d5169; }
.auth-passkey:disabled{ opacity:.6; cursor:default; }

/* ------------------------------------------------------------ account page */
.acct-wrap{
    max-width:760px;
    margin:0 auto;
    padding:10px 20px 60px;
    display:flex;
    flex-direction:column;
    gap:18px;
}
.acct-wrap.is-wide{ max-width:1120px; }
.acct-card{
    padding:22px 24px;
    background:#0f1319;
    border:1px solid #1f2733;
    border-radius:14px;
}
.acct-title{ margin:0 0 6px; font-size:17px; font-weight:600; color:#eaf2ff; }
.acct-avatar{
    width:96px;
    height:96px;
    margin:0 0 10px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#4da3ff,#2b6fd6);
    color:#fff;
    font-size:26px;
    font-weight:700;
    letter-spacing:1px;
    border:1px solid #263244;
}
.acct-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.acct-avatar-hint{ margin-top:6px; font-size:11.5px; color:#7f8ea3; }
.acct-sub{ margin:0 0 14px; font-size:12.5px; color:#7f8ea3; }
.acct-dl{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:10px 14px;
    margin:10px 0 0;
    font-size:13.5px;
}
.acct-dl dt{ color:#7f8ea3; }
.acct-dl dd{ margin:0; color:#e6eef8; word-break:break-word; }
.acct-tag{
    display:inline-block;
    margin-left:8px;
    padding:1px 8px;
    border-radius:999px;
    font-size:10.5px;
    letter-spacing:.03em;
}
.acct-tag.is-ok{ background:rgba(62,240,122,.12); border:1px solid rgba(62,240,122,.35); color:#3ef07a; }
.acct-tag.is-warn{ background:rgba(255,196,90,.10); border:1px solid rgba(255,196,90,.3); color:#ffc45a; }
.acct-list{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; }
.acct-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 14px;
    border:1px solid #233041;
    border-radius:10px;
    background:#0b0f14;
}
.acct-item.is-empty{ justify-content:center; color:#6f7f93; font-size:13px; }
.acct-item-name{ color:#eaf2ff; font-size:13.5px; font-weight:600; }
.acct-item-meta{ margin-top:2px; color:#7f8ea3; font-size:11.5px; }
.acct-danger{
    padding:6px 12px;
    border:1px solid rgba(255,90,90,.35);
    border-radius:8px;
    background:transparent;
    color:#ff8a8a;
    font:inherit;
    font-size:12px;
    cursor:pointer;
}
.acct-danger:hover{ background:rgba(255,90,90,.1); }
.acct-primary{
    padding:10px 18px;
    border:0;
    border-radius:9px;
    background:#2f7fe0;
    color:#fff;
    font:inherit;
    font-size:13.5px;
    font-weight:600;
    cursor:pointer;
}
.acct-primary:hover{ background:#3d90f0; }
.acct-primary:disabled{ opacity:.6; cursor:default; }

.acct-head-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:6px;
}
.acct-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.acct-btn{
    display:inline-block;
    padding:8px 14px;
    border:1px solid #2b3a4d;
    border-radius:8px;
    background:transparent;
    color:#cfe6ff;
    font:inherit;
    font-size:12.5px;
    text-decoration:none;
    cursor:pointer;
}
.acct-btn:hover{ background:#16202c; border-color:#3d5169; color:#fff; }
.acct-btn.is-small{ padding:5px 10px; font-size:11.5px; }

.acct-danger.is-small{ padding:5px 10px; font-size:11.5px; }

.acct-flash{
    padding:10px 14px;
    border:1px solid rgba(62,240,122,.35);
    border-radius:10px;
    background:rgba(62,240,122,.10);
    color:#3ef07a;
    font-size:13px;
}

.acct-form .auth-field{ margin-bottom:14px; }
.acct-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:0 14px;
}
@media (max-width:640px){
    .acct-grid{ grid-template-columns:1fr; }
    .acct-dl{ grid-template-columns:110px 1fr; }
}

.jobs-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 16px; }
.jobs-tab{
    padding:6px 12px;
    border:1px solid #233041;
    border-radius:999px;
    color:#9fb3c8;
    font-size:12px;
    text-decoration:none;
}
.jobs-tab:hover{ color:#fff; border-color:#3d5169; }
.jobs-tab.is-active{ background:#16202c; border-color:#4da3ff; color:#cfe6ff; }

.jobs-scroll{ overflow-x:auto; }.jobs-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}
.jobs-table th{
    text-align:left;
    padding:9px 10px;
    color:#9fb3c8;
    background:#141b24;
    font-size:11px;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    border:0;
    border-bottom:1px solid #2a3644;
    white-space:nowrap;
}
.jobs-table td{
    padding:10px;
    border:0;
    border-bottom:1px solid #18202b;
    color:#dbe6f3;
    vertical-align:middle;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
}
.jobs-table td:first-child{ min-width:230px; }
.jobs-table .jobs-name,
.jobs-table .jobs-id{ overflow-wrap:anywhere; }
.jobs-table tr:last-child td{ border-bottom:0; }
.jobs-name{ display:block; color:#eaf2ff; font-weight:600; }
.jobs-id{ display:block; margin-top:2px; color:#6f7f93; font-size:11px; font-family:monospace; }
.jobs-actions{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.jobs-cell-actions{ white-space:nowrap; }
.jobs-actions .acct-btn,
.jobs-actions .acct-danger{ line-height:1.25; }
.jobs-status{
    display:inline-block;
    padding:2px 9px;
    border-radius:999px;
    font-size:11px;
    border:1px solid #2b3a4d;
    color:#9fb3c8;
}
.jobs-status.is-done{ border-color:rgba(62,240,122,.35); color:#3ef07a; }
.jobs-status.is-running{ border-color:rgba(77,163,255,.4); color:#8ab4e0; }
.jobs-status.is-queued{ border-color:rgba(255,196,90,.3); color:#ffc45a; }
.jobs-status.is-failed{ border-color:rgba(255,90,90,.35); color:#ff8a8a; }

@media (max-width:640px){
    .user-text,
    .login-text{ display:none; }
    .login-card,
    .user-card{ padding:6px; }
    .auth-dialog{ padding:22px 18px 16px; }
}