/* ==========================
   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: rgb(245, 245, 245);
  --bg-navbar: rgba(255, 255, 255, 0.95);
  --bg-footer: #e9f5ff;
  --bg-blob: #e2eaf7;

  --color-text-main: rgba(10, 10, 40, 0.9);
  --color-text-accent: #006dba;
  --color-text-muted: rgba(10, 10, 20, 0.8);
  --color-text-placeholder: rgba(50, 50, 50, 0.5);

  --bg-btn1: #f4faff;
  --bg-btn1-hover: #e9f5ff;

  --border-color: #e2eaf7;
  --box-shadow: rgba(100, 100, 100, 0.4);
}

body.dark-theme {
  --bg-color1: #16151a;
  --bg-color2: #27242d;
  --bg-color3: #302d37;
  --bg-color4: #3b3744;
  --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-accent: rgb(255, 255, 255);
  --color-text-muted: rgb(150, 150, 150);
  --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: rgba(22, 21, 26, 0.6);
}

/* ==========================
 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); }
.c-bg3 { background-color: var(--bg-color3); }
.c-bg4 { background-color: var(--bg-color4); }

.c-btn1 {
  background: var(--bg-btn1) !important;
  color: var(--color-text-main);
  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;
}

h1, h2, h3, h4, h5, h6,
p, small, span, a, .nav-link,
a:hover, a:active, .nav-link:hover, .nav-link:active {
  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-accent, .c-text-accent:hover, .c-text-accent:active { color: var(--color-text-accent); }
.c-text-muted, .c-text-muted:hover, .c-text-muted:active { color: var(--color-text-muted); }
.c-text-special {
	color: #ff0066;
}

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

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

.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 li a {
  background: var(--bg-color3) !important;
  color: var(--color-text-main) !important;
}

.c-dropdown li a:hover,
.c-dropdown li a: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
========================== */
input, select, textarea {
  background: transparent !important;
  color: var(--color-text-main) !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-right { border-right: 1px solid var(--border-color); }
.c-box-shadow { box-shadow: 12px 12px 12px var(--box-shadow); }

.c-text-danger { color: #EC407A!important; }
.c-text-warning { color: #FFCA28!important;  }
.c-text-success { color: #00E676!important;  }
.c-text-secondary { color: #673AB7!important;  }

.smooth {
  transition: all 1.5s ease;
}