/* ==========================
   Reset a základní nastavení
========================== */
html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

@media (max-width: 576px) {
  html {
      font-size: 110%;
  }
}

/* ==========================
 Font-face definice
========================== */
@font-face {
  font-family: "Nulshock bd";
  src: url("/webfonts/nulshock bd.ttf");
}
@font-face {
  font-family: "Simple Nathalie";
  src: url("/webfonts/Simple Nathalie.otf");
}
@font-face {
  font-family: "cfont";
  src: url("/webfonts/cfont.otf");
}

/* ==========================
 Light / Dark Theme Variables
========================== */
body.light-theme {
  --bg-color1: rgb(255, 255, 255);
  --bg-color2: rgb(255, 255, 255);
  --bg-color3: rgb(255, 255, 255);
  --bg-color4: #e7e6ff; 
  --bg-color5: rgb(255, 255, 255);
  --bg-navbar: rgba(255, 255, 255, 0.95);
  --bg-footer: #e7e6ff;
  --bg-blob: #e2eaf7;

  --color-text-main: rgba(10, 10, 40, 0.9);
  --color-text-muted: rgba(10, 10, 20, 0.8);

  --color-text-special: rgba(10, 10, 40, 0.7);

  --color-text-accent1: #635bff;
  --color-text-accent2: #8b5cf6;



  --color-text-placeholder: rgba(50, 50, 50, 0.5);

  --bg-btn1: rgba(230,230,230,1); 
  --bg-btn1-hover: rgba(220,220,220,1); 

  --border-color: #e2eaf7;
  --box-shadow: 12px 12px 12px rgba(100, 100, 100, 0.3);


	--bg-gradient-primary:transparent;
	--bg-gradient-success:transparent;
	--bg-gradient-warning:transparent;
  --bg-gradient-secondary:transparent;
  --bg-gradient-danger:transparent;
  --bg-gradient-amber:transparent;
  --bg-gradient-teal:transparent;
  --bg-gradient-orange:transparent;
  --bg-gradient-orange:transparent;
  --bg-gradient-purple:transparent;

	--border-gradient-primary:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(99, 91, 255) 40%, rgb(99, 91, 255) 60%, rgba(255, 99, 8, 0) 100%);
	--border-gradient-success:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(91, 255, 127) 40%, rgb(91, 255, 127) 60%, rgba(255, 99, 8, 0) 100%);
	--border-gradient-warning:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(255, 221, 109) 40%, rgb(255, 221, 109) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-danger:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(236, 64, 122) 40%, rgb(236, 64, 122) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-secondary:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(167, 64, 236) 40%, rgb(167, 64, 236) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-amber:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(255, 215, 64) 40%, rgb(255, 215, 64) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-teal:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(24, 255, 255) 40%, rgb(24, 255, 255) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-orange:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(255, 112, 67) 40%, rgb(255, 112, 67) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-lightgreen:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(118, 255, 3) 40%, rgb(118, 255, 3) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-purple:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(245, 0, 87) 40%, rgb(245, 0, 87) 60%, rgba(255, 99, 8, 0) 100%);

}

body.dark-theme {
  --bg-color1: #16151a;
  --bg-color2:  rgb(32, 29, 38); /*OLD #27242d*/
  --bg-color3: #302d37;
  --bg-color4: #3b3744;
  --bg-color5: rgb(32, 29, 38);
  --bg-navbar: rgba(22, 21, 26, 0.95);
  --bg-footer: rgb(18, 17, 22);
  --bg-blob: #302d37;

  --color-text-main: rgb(245, 245, 245);

  --color-text-muted: rgb(150, 150, 150);


  --color-text-special: rgba(245, 245, 245, 0.8);
  --color-text-accent1: #635bff;
  --color-text-accent2: #8b5cf6;


  --color-text-placeholder: rgba(255, 255, 255, 0.4);

  --bg-btn1: #3d3946;
  --bg-btn1-hover: #555061;

  --border-color: rgba(85, 80, 97, 0.6);
  --box-shadow: 2px 8px 8px 8px rgba(12, 11, 14, 0.6);

	--bg-gradient-primary:radial-gradient(circle at center top, rgba(99, 91, 255, 0.4) 0%, transparent 45%);
	--bg-gradient-success:radial-gradient(circle at center top, rgba(91, 255, 127, 0.616) 0%, transparent 45%);
	--bg-gradient-warning:radial-gradient(circle at center top, rgba(255, 221, 109, 0.836) 0%, transparent 45%);
 	--bg-gradient-secondary:radial-gradient(circle at center top, rgba(167, 64, 236, 0.436) 0%, transparent 45%);
 	--bg-gradient-danger:radial-gradient(circle at center top, rgba(220, 76, 100, 0.436) 0%, transparent 45%);
  --bg-gradient-amber:radial-gradient(circle at center top, rgba(255, 215, 64, 0.436) 0%, transparent 45%);
  --bg-gradient-teal:radial-gradient(circle at center top, rgba(24, 255, 255, 0.436) 0%, transparent 45%);
  --bg-gradient-orange:radial-gradient(circle at center top, rgba(255, 112, 67, 0.436) 0%, transparent 45%);
  --bg-gradient-lightgreen:radial-gradient(circle at center top, rgba(118, 255, 3, 0.436) 0%, transparent 45%);
  --bg-gradient-purple:radial-gradient(circle at center top, rgba(245, 0, 87, 0.436) 0%, transparent 45%);

	--border-gradient-primary:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(99, 91, 255) 40%, rgb(99, 91, 255) 60%, rgba(255, 99, 8, 0) 100%);
	--border-gradient-success:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(91, 255, 127) 40%, rgb(91, 255, 127) 60%, rgba(255, 99, 8, 0) 100%);
	--border-gradient-warning:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(255, 221, 109) 40%, rgb(255, 221, 109) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-danger:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(236, 64, 122) 40%, rgb(236, 64, 122) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-secondary:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(167, 64, 236) 40%, rgb(167, 64, 236) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-amber:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(255, 215, 64) 40%, rgb(255, 215, 64) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-teal:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(24, 255, 255) 40%, rgb(24, 255, 255) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-orange:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(255, 112, 67) 40%, rgb(255, 112, 67) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-lightgreen:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(118, 255, 3) 40%, rgb(118, 255, 3) 60%, rgba(255, 99, 8, 0) 100%);
 	--border-gradient-purple:linear-gradient(90deg, rgba(177, 80, 24, 0) 0%, rgb(245, 0, 87) 40%, rgb(245, 0, 87) 60%, rgba(255, 99, 8, 0) 100%);

}

/* ==========================
 Základní body, přechody a utility třídy
========================== */
body {
  background-color: var(--bg-color1);
  color: var(--color-text-main1);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.c-bg1 { background-color: var(--bg-color1); }
.c-bg2 { background-color: var(--bg-color2)!important; }
.c-bg3 { background-color: var(--bg-color3)!important; }
.c-bg4 { background-color: var(--bg-color4); }

.c-btn1 {
  background: var(--bg-btn1) !important;
  color:var(--color-text-main) !important;
  box-shadow: none !important;
}
.c-btn1:hover,
.c-btn1:active {
  background: var(--bg-btn1-hover)!important;
  color: var(--color-text-main)!important;
  box-shadow: none !important;
}

.c-btn2, .c-btn2:hover, .c-btn2:active {
  color:white!important; 
	background: linear-gradient(to right, #635bff, #8b5cf6)!important; 
	outline: 2px solid transparent;
	padding: 10px 25px;
}

.c-btn2-outline, .c-btn2-outline:hover, .c-btn2-outline:active {
	color:#8b5cf6; 
	background: linear-gradient(var(--bg-navbar), var(--bg-navbar)); 
	outline: 2px solid #8b5cf6;
  padding: 8px 23px; 
}

h1, h2, h3, h4, h5, h6, strong, 
p, small, span, a, .nav-link,
a:hover, a:active, .nav-link:hover, .nav-link:active, li {
  color: var(--color-text-main);
}

.sidebar .nav-item .nav-link {
  padding:8px; 
  border-radius:15px; 
}

.sidebar .nav-item .nav-link:hover {
  background: var(--bg-color4)!important; 
}

.c-text-main, .c-text-main:hover, .c-text-main:active { color: var(--color-text-main); }
.c-text-accent1, .c-text-accent1:hover, .c-text-accent1:active { color: var(--color-text-accent1); }
.c-text-accent2, .c-text-accent2:hover, .c-text-accent2:active { color: var(--color-text-accent2); }
.c-text-muted, .c-text-muted:hover, .c-text-muted:active { color: var(--color-text-muted); }
.c-text-special {
	color: var(--color-text-special);
}

/* ==========================
 Layout Sidebar
========================== */
.basic-layout #left-sidebar-wrapper { width: 0; }

@media (min-width: 768px) {
  .basic-layout #left-sidebar-wrapper { width: 250px; }
  .basic-layout #main-wrapper { margin-left: 250px; }
}

.full-layout #left-sidebar-wrapper { display: none; }
.full-layout #main-wrapper { width: 100%; margin-left: 0; }

.fullscreen {
  min-height: calc(100vh - var(--navbar-height));
  height: auto;
}

/* ==========================
 Tooltipy
========================== */
.tooltip-inner {
  background-color: var(--bg-btn1-hover);
  color: var(--color-text-main);
  font-size: 0.8rem;
  padding: 6px 10px;
  border-radius: 8px;
}

/* ==========================
 Modaly a dropdowny
========================== */
.c-modal {
  background: var(--bg-color2);
  color: var(--color-text-main);
}

.c-dropdown, .c-dropdown-item, .c-dropdown li a {
  background: var(--bg-color3) !important;
  color: var(--color-text-main) !important;
}

.c-dropdown li a:hover,
.c-dropdown li a:active, 
.c-dropdown-item:hover, 
.c-dropdown-item:active {
  background: var(--bg-color4) !important;
  color: var(--color-text-main) !important;
}

/* ==========================
 Karty
========================== */
.c-card {
  background: var(--bg-color2);
  color: var(--color-text-main);
}

/* ==========================
 Formulářové prvky
========================== */
.form-control,
.form-select,
.input-group-text {
  border:none; 
  background:var(--bg-color2)!important;
  color: var(--color-text-main)!important;
  
}

input, select, textarea {
  border:none!important; 
  background:var(--bg-color2)!important;
  color: var(--color-text-main)!important;

}
input, select {
  border-left:1px solid var(--bg-color1)!important; 
}

::placeholder { color: var(--color-text-placeholder) !important; }

/* ==========================
 Blob animace
========================== */
.blob {
  width: 500px;
  aspect-ratio: 1;
  background: var(--bg-blob);
  border-radius: 85% 150% 105% 100%;
  transition: border-radius 1.5s ease;
}

/* ==========================
 Border a shadow utility
========================== */
.c-border { border: 1px solid var(--border-color); }
.c-border-top { border-top: 1px solid var(--border-color); }
.c-border-bottom { border-bottom: 1px solid var(--border-color); }
.c-border-left { border-left: 1px solid var(--border-color); }
.c-border-right { border-right: 1px solid var(--border-color); }
.c-box-shadow { box-shadow: var(--box-shadow); }


.c-text-danger { color: #EC407A!important; }
.c-text-warning { color: #FFCA28!important;  }
.c-text-success { color: #00E676!important;  }
.c-text-secondary1 { color: #635bff!important;  }
.c-text-secondary2 { color: #673AB7!important;  }
.c-text-secondary3 { color: #8b5cf6!important;  }
.c-text-secondary4 { color: #673AB7!important;  }



.c-bg-gradient-primary { background: var(--bg-gradient-primary); }
.c-bg-gradient-success { background: var(--bg-gradient-success); }
.c-bg-gradient-warning { background: var(--bg-gradient-warning); }
.c-bg-gradient-secondary { background: var(--bg-gradient-secondary); }
.c-bg-gradient-danger { background: var(--bg-gradient-danger); }
.c-bg-gradient-amber { background: var(--bg-gradient-amber); }
.c-bg-gradient-teal { background: var(--bg-gradient-teal); }
.c-bg-gradient-orange { background: var(--bg-gradient-orange); }
.c-bg-gradient-lightgreen { background: var(--bg-gradient-lightgreen); }
.c-bg-gradient-purple { background: var(--bg-gradient-purple); }

.c-border-gradient-primary { 
	position:absolute;
	z-index:1;  
	width:100%; 
	height:2px;
	background: var(--border-gradient-primary);
	top:0; 
	left:0;  
}


.c-border-gradient-success { 
	position:absolute;
	z-index:1;  
	width:100%; 
	height:2px;
	background: var(--border-gradient-success);
	top:0; 
	left:0;  
}

.c-border-gradient-warning { 
	position:absolute;
	z-index:1;  
	width:100%; 
	height:2px;
	background: var(--border-gradient-warning);
	top:0; 
	left:0;  
}

.c-border-gradient-danger { 
	position:absolute;
	z-index:1;  
	width:100%; 
	height:2px;
	background: var(--border-gradient-danger);
	top:0; 
	left:0;  
}

.c-border-gradient-secondary { 
	position:absolute;
	z-index:1;  
	width:100%; 
	height:2px;
	background: var(--border-gradient-secondary);
	top:0; 
	left:0;  
}

.c-border-gradient-amber { 
	position:absolute;
	z-index:1;  
	width:100%; 
	height:2px;
	background: var(--border-gradient-amber);
	top:0; 
	left:0;  
}

.c-border-gradient-teal { 
	position:absolute;
	z-index:1;  
	width:100%; 
	height:2px;
	background: var(--border-gradient-teal);
	top:0; 
	left:0;  
}

.c-border-gradient-orange { 
	position:absolute;
	z-index:1;  
	width:100%; 
	height:2px;
	background: var(--border-gradient-orange);
	top:0; 
	left:0;  
}

.c-border-gradient-lightgreen { 
	position:absolute;
	z-index:1;  
	width:100%; 
	height:2px;
	background: var(--border-gradient-lightgreen);
	top:0; 
	left:0;  
}

.c-border-gradient-purple { 
	position:absolute;
	z-index:1;  
	width:100%; 
	height:2px;
	background: var(--border-gradient-purple);
	top:0; 
	left:0;  
}


.smooth {
  transition: all 1.5s ease;
}

.nicename {
  display:none!important; 
}

.c-bg-danger-transparent {
  background:rgba(220, 76, 100, 0.2); 
}

.c-bg-warning-transparent {
  background:rgba(228, 161, 27, 0.2); 
}


.no-hover:hover,
.no-hover:focus,
.no-hover:active {
    background-color: transparent !important;

}

 pre[class*="language-"],
code[class*="language-"] {
    background: transparent;
}

pre {
    background: var(--bg-color2)!important;
    border-radius: 12px;
    padding: 1rem;
}


				.logo {
  border: 6px solid transparent; 
  border-top: 6px solid #0d6efd; 
	border-bottom: 6px solid var(--color-text-main); 
	border-left: 0px solid transparent; 
	border-right: 0px solid transparent; 
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.markdown-content > *:last-child {
	font-size:0.9rem; 
    margin-bottom: 0;
}

.markdown-content > *:first-child {
	font-size:0.9rem; 
    margin-top: 0;
}

.markdown-content p {
		font-size:0.9rem; 
    margin-bottom: 0;
}


.my-link, .my-link:hover {
	color:#3B71CA; 
	font-weight:bold; 
	text-decoration: underline; 
}

.custom-code  {
	color:var(--text-colo-main)!important;  
	background:var(--bg-color3); 
	margin:5px; 
	padding:5px; 
	border-radius:5px; 

}




body.light-theme .CodeMirror-selected,
body.light-theme .CodeMirror-selectedtext {
    background-color: #c7d2fe !important;
    color: #111827 !important;
}

body.dark-theme .CodeMirror-selected,
body.dark-theme .CodeMirror-selectedtext {
    background-color: rgba(139, 92, 246, 0.5) !important;
    color: white !important;
}


.pod-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 20px;
    background: rgba(0,0,0,0.15);
}

.led {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.led-green {
    background: #00ff55;
    box-shadow:
        0 0 5px #00ff55,
        0 0 12px #00ff55,
        0 0 20px rgba(0,255,85,.8);
}

.led-green.active {
    animation: podPulse 1.8s infinite ease-in-out;
}

@keyframes podPulse {
    0%,100% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 5px #00ff55,
            0 0 12px #00ff55,
            0 0 20px rgba(0,255,85,.8);
    }

    50% {
        opacity: .65;
        transform: scale(.85);
        box-shadow:
            0 0 3px #00ff55,
            0 0 8px #00ff55,
            0 0 14px rgba(0,255,85,.5);
    }
}