:root{
    --bg:#f3f4f6; --sidebar:#ffffff; --text:#111827; --muted:#6b7280; --line:#e5e7eb;
    --card:#ffffff; --primary:#2563eb; --green:#10b981; --red:#ef4444;
    --shadow:0 10px 25px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:#2563eb}
.app-shell{display:flex;min-height:100vh}
.sidebar{width:244px;background:#fff;border-right:1px solid var(--line);padding:18px;flex-shrink:0}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.sidebar-logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.sidebar-title{font-size:14px;font-weight:700}.sidebar-subtitle{font-size:12px;color:var(--muted)}
.nav-label{font-size:12px;color:#6b7280;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.nav-list a{display:block;text-decoration:none;color:#374151;padding:12px 14px;border-radius:12px;margin-bottom:6px;font-weight:600}
.nav-list a:hover,.nav-list a.active{background:#e8eef9;color:#2563eb}
.main{flex:1;padding:28px 32px}
.page-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:24px}
.page-title{margin:0;font-size:30px;font-weight:800}.page-subtitle{margin:8px 0 0;color:var(--muted);font-size:14px}
.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;text-decoration:none;padding:11px 18px;border-radius:12px;font-weight:700;cursor:pointer}
.primary-btn{background:#2563eb;color:#fff;box-shadow:var(--shadow)} .secondary-btn{background:#fff;color:#374151;border:1px solid var(--line)} .full{width:100%}
.metric-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:24px}
.metric-card{color:#fff;border-radius:18px;padding:24px;min-height:132px;box-shadow:var(--shadow)}
.gradient-blue{background:linear-gradient(135deg,#4f8df7,#2563eb)}
.gradient-purple{background:linear-gradient(135deg,#c15cff,#9333ea)}
.gradient-orange{background:linear-gradient(135deg,#ff8c3a,#f97316)}
.metric-label{font-size:14px;font-weight:700}.metric-value{font-size:32px;font-weight:800;margin-top:14px}.metric-foot{font-size:14px;margin-top:8px;opacity:.92}.smallish{font-size:22px}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.surface-card{background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.surface-card.narrow{max-width:760px}
.surface-head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px 14px}.surface-head h2{margin:0;font-size:18px}.surface-head a{text-decoration:none;color:#111827;font-size:14px;font-weight:600}
.surface-body{padding:14px 26px 26px}.surface-body.centered{min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.empty-icon{font-size:44px;color:#c7ccd4;margin-bottom:14px}.empty-state{color:#64748b;font-size:15px}.muted{color:var(--muted)} .small{font-size:12px}
.list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line)} .list-item:first-child{border-top:none;padding-top:0}
.list-title{font-size:18px;font-weight:700}.list-subtitle{margin-top:6px;color:var(--muted)}
.pill{font-size:12px;padding:8px 12px;border-radius:999px;font-weight:700}.pill-muted{background:#eef2f7;color:#475569}.pill-success{background:#dcfce7;color:#166534}.pill-warning{background:#dcfce7;color:#166534}
.stack>label{display:block;margin:10px 0 6px;font-weight:600}
input,select,button,textarea{font:inherit}
input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#111827}
.check{display:flex;align-items:center;gap:10px;margin-top:10px}.check input{width:auto}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.toolbar input{max-width:280px}
.modern-table{width:100%;border-collapse:collapse}
.modern-table th,
.modern-table td{
padding:6px 10px;
text-align:left;
border-top:1px solid var(--line);
font-size:13px;
line-height:1.2;
}
.modern-table th{color:#6b7280;font-size:13px;border-top:none}
.modern-table tr:hover td{background:#fafafa}
.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px}.status-dot.online{background:var(--green)}.status-dot.offline{background:var(--red)}
#preview{height:58px;background:#111827;border-radius:14px;color:#fff;display:flex;align-items:center;overflow:hidden;padding:0 16px}
#preview span{white-space:nowrap;display:inline-block;padding-left:100%;animation:scroll 10s linear infinite}
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,#eef2ff,#f8fafc)}
.auth-card{width:100%;max-width:460px;background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:28px}.auth-card.wide{max-width:520px}
.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:18px}.brand-icon{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:20px}
.auth-brand h1{margin:0;font-size:24px}.auth-brand p{margin:4px 0 0;color:var(--muted)}
.alert,.success{padding:12px 14px;border-radius:12px;margin-bottom:14px}.alert{background:#fef2f2;color:#991b1b}.success{background:#ecfdf5;color:#166534;word-break:break-all}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (max-width:1100px){.metric-row,.content-grid{grid-template-columns:1fr}}
@media (max-width:860px){.app-shell{display:block}.sidebar{width:auto;border-right:none;border-bottom:1px solid var(--line)}.main{padding:20px}.page-top{flex-direction:column}}
.login-card{
max-width:420px;
}

.login-header{
text-align:center;
margin-bottom:25px;
}

.login-logo{
width:200px;
margin:auto;
display:block;
}

.login-subtitle{
margin-top:10px;
color:#6b7280;
font-size:14px;
}

.login-form{
display:flex;
flex-direction:column;
gap:14px;
}

.login-row{
display:flex;
align-items:center;
gap:10px;
}

.login-row label{
width:70px;
font-weight:600;
font-size:14px;
}

.login-row input{
flex:1;
padding:10px;
border-radius:10px;
border:1px solid #ddd;
}

.login-btn{
width:120px;
align-self:center;
margin-top:10px;
padding:8px;
border-radius:10px;
border:none;
background:#2563eb;
color:white;
font-weight:600;
cursor:pointer;
}

.login-btn:hover{
background:#1d4ed8;
}
.table-btn{
padding:3px 8px;
font-size:12px;
border-radius:6px;
border:1px solid #ddd;
background:#f9fafb;
cursor:pointer;
text-decoration:none;
}

.table-btn:hover{
background:#e5e7eb;
}
.room-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
gap:10px;
margin-bottom:20px;
}

.room-btn {
    padding: 12px 8px; /* Horný/dolný a bočný padding */
    border-radius: 10px;
    border: 1px solid var(--line);
    background: white;
    cursor: pointer;
    font-weight: 700;
    transition: 0.2s;
    text-align: center;
    
    /* FIX PRE JEDNOTNÚ ŠÍRKU */
    min-width: 65px;  /* Dosť miesta pre "4567" */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.room-btn:hover{
background:#e0f2fe;
}

.room-btn.selected{
background:#2563eb;
color:white;
border-color:#2563eb;
}

/* Odstránenie čierneho štvorca a zjednotenie so sidebarom */
.sidebar-footer {
    padding: 20px;
    border-top: 1px solid #2a2a2a; /* Jemná deliaca čiara */
    background: transparent !important; /* Vynútené priehľadné pozadie */
    margin-top: auto;
}

.user-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.u-icon {
    font-size: 18px;
    opacity: 0.7;
}

.u-details {
    display: flex;
    flex-direction: column;
}

.u-name {
    font-weight: 600;
    color: #000000;
    font-size: 13px;
    line-height: 1.2;
}

.u-ip {
    font-size: 11px;
    color: #3b99fc; /* Modrá z vášho loga */
    margin-top: 2px;
    font-family: monospace; /* Pre IP adresu to vyzerá technickejšie */
}

/* Oprava pre prípad, že by tam bol globálny štýl pre div v sidebare */
.sidebar div {
    background: none;
    box-shadow: none;
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 30px;
    padding-bottom: 20px;
}

.page-link {
    min-width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1b1b1b;
    border: 1px solid #333;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    transition: 0.2s;
}

.page-link:hover {
    border-color: #3b99fc;
    color: #3b99fc;
}

.page-link.active {
    background: #3b99fc; /* Tvoja modrá z loga */
    border-color: #3b99fc;
    font-weight: bold;
}

.page-sep {
    color: #555;
    padding: 0 5px;
}

.selection-toolbar {
    border-bottom: 1px dashed var(--line);
    padding-bottom: 10px;
}

.secondary-btn.small:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.deploy-settings-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
}

.deploy-settings-row .field {
    flex: 1;
    min-width: 100px;
}

.deploy-settings-row .field.date-field {
    flex: 2;
    min-width: 180px;
}

.deploy-settings-row input, 
.deploy-settings-row select {
    margin-bottom: 0 !important;
}

.full-width-input {
    font-size: 16px;
    font-weight: 600;
    /*border-color: var(--primary-light);*/
}

.selection-toolbar .secondary-btn.small {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
}

@media (max-width: 1000px) {
    .deploy-settings-row .field { flex: 1 1 calc(33.33% - 15px); }
}

@media (max-width: 600px) {
    .deploy-settings-row .field { flex: 1 1 100%; }
}
.deploy-form input[type="text"],
.deploy-form input[type="number"],
.deploy-form input[type="datetime-local"],
.deploy-form select {
    font-weight: 400 !important; /* Normálne písmo namiesto boldu */
    color: var(--text) !important;
    font-size: 14px !important;
}

/* Štýlovanie placeholderu (toho sivého textu) */
.deploy-form input::placeholder {
    color: var(--muted);
    font-weight: 400;
}

/* Samostatná úprava pre riadok nastavení */
.deploy-settings-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    align-items: flex-end;
    margin-top: 20px; /* Odstup od textu správy */
}

/* Fixné šírky pre číselné polia v riadku */
.deploy-settings-row .field:not(.date-field) {
    flex: 0 0 auto;
    width: 85px; 
}

.deploy-settings-row .field select {
    width: 110px;
}

.deploy-settings-row .field.date-field {
    flex: 1;
    min-width: 180px;
}

/* Odstránenie starého ohraničenia pre full-width text */
.form-group.full-width {
    width: 100%;
}
.deploy-settings-row label, 
.form-group label {
    margin-bottom: 0px !important; 
    padding-bottom: 0px !important;
    line-height: 1 !important; /* Odstráni prázdne miesto okolo textu */
    display: block;
}

.deploy-settings-row input, 
.deploy-settings-row select,
.form-group input {
    margin-top: 5px !important; /* Nastav presnú medzeru v pixeloch, ktorú chceš */
}
#monitor th {
    cursor: pointer;
    user-select: none; /* Prevents text highlighting when clicking fast */
    transition: background 0.2s;
}

#monitor th:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Subtle highlight on hover */
}
.table-controls {
    padding: 15px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

#searchInput {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 250px;
    font-size: 14px;
}

#searchInput:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
    .room-grid {
        position: relative; /* Dôležité pre správne umiestnenie lasso */
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 10px;
        padding: 15px;
        background: #fdfdfd;
        border: 1px solid #eee;
        border-radius: 8px;
        user-select: none; /* Zabráni modrému označovaniu textu pri ťahaní */
    }

    /* Lasso obdĺžnik */
    #selection-lasso {
        position: absolute;
        border: 1px solid #007bff;
        background-color: rgba(0, 123, 255, 0.2);
        pointer-events: none; /* Myš ho "nevidí", takže neblokuje tlačidlá */
        z-index: 100;
        display: none;
        left: 0;
        top: 0;
    }

    .room-btn {
        width: 100%;
        padding: 12px 5px;
        cursor: pointer;
        border: 1px solid #ccc;
        background: #fff;
        border-radius: 4px;
        font-weight: bold;
    }

    .room-btn.selected {
        background-color: #007bff !important;
        color: white !important;
        border-color: #0056b3;
    }
.btn-deploy-main {
    background: linear-gradient(135deg, #007bff 0%, #0069d9 100%); /* Modrý gradient */
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2); /* Modrý tieň */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    user-select: none;
}

.btn-deploy-main:hover {
    background: linear-gradient(135deg, #0069d9 0%, #0056b3 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3);
}

.btn-deploy-main:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.btn-deploy-main:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

.btn-deploy-main i {
    font-size: 1.3rem;
}
body.dark-mode {
    --bg: #111827;
    --sidebar: #1f2937;
    --text: #f9fafb;
    --muted: #9ca3af;
    --line: #374151;
    --card: #1f2937;
    --shadow: 0 10px 25px rgba(0,0,0,.3);
}

/* Úprava konkrétnych elementov pre Dark Mode */
body.dark-mode .sidebar, 
body.dark-mode .surface-card,
body.dark-mode .auth-card,
body.dark-mode input, 
body.dark-mode select, 
body.dark-mode textarea {
    background: var(--card);
    color: var(--text);
}

body.dark-mode .secondary-btn {
    background: #374151;
    color: #f9fafb;
    border-color: var(--line);
}

body.dark-mode .nav-list a {
    color: #d1d5db;
}

body.dark-mode .nav-list a:hover {
    background: #374151;
}

body.dark-mode .modern-table tr:hover td {
    background: #2d3748;
}

body.dark-mode .u-name {
    color: #fff;
}

body.dark-mode .room-btn {
    background: #374151;
    color: #fff;
}