@charset "UTF-8";

/* ================================================================
   Plik: custom-softstar.css
   Umieść w katalogu: css/  (obok osticket.css, ROOT_PATH)
   Podepnij w head PO pliku theme.css, np.:

   <link rel="stylesheet" href="<?php echo ASSETS_PATH; ?>css/theme.css?2570d69" media="screen"/>
   <link rel="stylesheet" href="<?php echo ROOT_PATH; ?>css/custom-softstar.css" media="screen"/>

   ----------------------------------------------------------------
   SOFTSTAR — szablon CSS ujednolicający wygląd systemu zgłoszeń
   (zgloszenia.softstar.com.pl) ze stroną główną (softstar.com.pl)
   ----------------------------------------------------------------
   Motyw klienta: osTicket "Oscar" (potwierdzone na podstawie kodu
   head przesłanego przez użytkownika — pliki osticket.css, theme.css,
   favicony oscar-favicon-*).

   Kolor bazowy (#131A2E) pochodzi z metadanych strony głównej
   (theme-color) — jest potwierdzony. Kolor akcentu, dokładne
   odcienie pomocnicze oraz nazwa czcionki wymagają weryfikacji
   bezpośrednio w kodzie źródłowym softstar.com.pl (patrz instrukcja,
   pkt 3 i 7) i zostały oznaczone poniżej jako "DO WERYFIKACJI".
   ================================================================ */

:root {
  --softstar-navy: #131a2e;        /* potwierdzone: theme-color strony głównej */
  --softstar-navy-dark: #0c111f;   /* odcień pomocniczy — DO WERYFIKACJI */
  --softstar-accent: #2f6fed;      /* kolor akcentu / przycisków — DO WERYFIKACJI */
  --softstar-text: #1c1f2a;
  --softstar-text-light: #ffffff;
  --softstar-bg: #f5f6f8;
  --softstar-border-radius: 8px;
  --softstar-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* DO WERYFIKACJI */
}

/* ---------- Globalne tło i typografia ---------- */
body {
  background-color: var(--softstar-bg);
  font-family: var(--softstar-font);
  color: var(--softstar-text);
}

h1, h2, h3, h4 {
  color: var(--softstar-navy);
  font-weight: 700;
}

/* ---------- Nagłówek / pasek górny (logo, "Zaloguj się") ---------- */
#header,
header,
.navbar {
  background-color: var(--softstar-navy) !important;
  color: var(--softstar-text-light) !important;
}

#header a,
header a,
.navbar a {
  color: var(--softstar-text-light) !important;
}

#header a:hover {
  color: var(--softstar-accent) !important;
}

/* Logo w nagłówku */
#header img,
header img,
.logo img,
a#logo img {
  max-height: 48px;
  width: auto;
}

/* ---------- Pasek zakładek (Strona główna / Utwórz nowe zgłoszenie / Sprawdź statusy) ----------
   Selektory dopasowane 1:1 do rzeczywistego kodu HTML Twojej instalacji:

   <ul id="nav" class="flush-left">
     <li><a class="active home" href="/index.php">Strona główna</a></li>
     <li><a class=" new" href="/open.php">Utwórz nowe zgłoszenie</a></li>
     <li><a class=" status" href="/view.php">Sprawdź statusy zgłoszenia</a></li>
   </ul>

   #nav to sam znacznik <ul> (nie ma osobnego diva-kontenera), a klasa
   aktywnej zakładki (active) siedzi na <a>, nie na <li> — to właśnie
   różniło się od poprzedniej, zgadywanej wersji tego pliku.
------------------------------------------------------------- */
#nav {
  background: var(--softstar-navy-dark) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#nav li {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#nav li a {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-shadow: none !important;
  color: var(--softstar-text-light) !important;
  font-weight: 500 !important;
  padding: 12px 20px !important;
}

#nav li a.active,
#nav li a:hover {
  color: var(--softstar-accent) !important;
  background: transparent !important;
}

/* ---------- Przyciski (CTA, formularze) ---------- */
.button,
.btn,
input[type="submit"],
button {
  background-color: var(--softstar-accent) !important;
  color: var(--softstar-text-light) !important;
  border: none !important;
  border-radius: var(--softstar-border-radius) !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  transition: opacity 0.2s ease;
}

.button:hover,
.btn:hover,
input[type="submit"]:hover,
button:hover {
  opacity: 0.85;
  cursor: pointer;
}

/* ---------- Sekcja treści ---------- */
#content,
.content,
.container {
  background-color: #ffffff;
  border-radius: var(--softstar-border-radius);
}

a {
  color: var(--softstar-accent);
}

/* ---------- Stopka ---------- */
#footer,
footer {
  background-color: var(--softstar-navy) !important;
  color: var(--softstar-text-light) !important;
  text-align: center;
  padding: 24px 16px;
  font-size: 13px;
}

#footer a,
footer a {
  color: var(--softstar-text-light) !important;
  text-decoration: underline;
}

/* ---------- Odnośnik powrotny do strony głównej ----------
   Klasę tę należy dopisać ręcznie do linku wstawionego
   w szablonie nagłówka lub stopki (patrz instrukcja, pkt 5).
   Przykład znacznika HTML do wstawienia:
   <a class="softstar-back-link" href="https://softstar.com.pl/">
     ← Powrót do strony głównej SOFTSTAR
   </a>
------------------------------------------------------------- */
.softstar-back-link {
  display: inline-block;
  margin: 12px 0;
  font-size: 13px;
  color: var(--softstar-text-light);
}

.softstar-back-link:hover {
  color: var(--softstar-accent);
}

/* ---------- Opcjonalnie: ukrycie logotypu "powered by osTicket" w stopce ----------
   WYŁĄCZONE domyślnie (poniższy blok jest częścią tego komentarza,
   więc przeglądarka go ignoruje). Aby go włączyć, wytnij te trzy
   linijki z reguły CSS i wklej je poza tym komentarzem — ale rób to
   tylko jeśli licencja Twojej instalacji osTicket na to pozwala,
   ponieważ w wersji open source odnośnik do osTicket zwykle powinien
   pozostać widoczny w stopce.

   #footer img, footer img { display: none !important; }
------------------------------------------------------------- */