/* ==========================================
   New Educational Theme for PGTesty
   ========================================== */

/* 1. ROOT VARIABLES - New Color Palette
   ========================================== */
:root {
  /* Primary Colors (Calm Blue)
     - Good for branding, links, and primary actions. */
  --primary: #2A75C9; /* A calm, accessible blue */
  --primary-dark: #1E5B9A; /* For hover states */
  --primary-light: #EAF2FA; /* For light backgrounds, e.g., alerts */

  /* Accent Colors (Encouraging Green)
     - Good for success states, highlights, and secondary actions. */
  --accent: #28a745; /* Bootstrap's default success green */
  --accent-dark: #218838; /* Darker for hover */
  --accent-light: #D4EDDA; /* Lighter for backgrounds */

  /* Neutral Colors (Grays for UI)
     - For text, backgrounds, borders, and UI elements. */
  --text-main: #333A42; /* Dark slate for high-contrast text */
  --text-secondary: #5E6D7E; /* Lighter gray for secondary text */
  --text-light: #FFFFFF;
  --ui-dark: #333A42; /* For dark elements like navbars and footers */
  --ui-dark-hover: #49545E;
  --bg-page: #F8F9FA; /* Very light gray for the main page background */
  --bg-card: #FFFFFF; /* White for cards and content areas */
  --border-color: #DEE2E6; /* Standard light border */

  /* Semantic Colors (for alerts, etc.) */
  --success: var(--accent);
  --success-bg: var(--accent-light);
  --success-text: #155724;
  --danger: #dc3545; /* Bootstrap red */
  --danger-bg: #F8D7DA;
  --danger-text: #721C24;
  --warning: #ffc107; /* Bootstrap yellow */
  --warning-bg: #FFF3CD;
  --warning-text: #856404;

  /* Focus Ring */
  --focus-ring: rgba(42, 117, 201, 0.5);
}

/* 2. GLOBAL STYLES
   ========================================== */
.theme-pg {
  background-color: var(--bg-page);
  color: var(--text-main);
}

.theme-pg h1, .theme-pg h2, .theme-pg h3, .theme-pg h4, .theme-pg h5, .theme-pg h6 {
  color: var(--text-main);
}

.theme-pg a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.theme-pg a:hover, .theme-pg a:focus {
  color: #fff;
  text-decoration: none;
}

.generator-kodu {
    background-color: #e5e5e5 !important;
}

.theme-pg main, .theme-pg .container, .theme-pg .content {

}

/* 3. COMPONENT STYLES
   ========================================== */

/* Navbar */
.theme-pg .navbar.bg-dark {
  background-color: var(--ui-dark) !important;
}

.theme-pg .navbar-dark .navbar-brand,
.theme-pg .navbar-dark .nav-link {
  color: var(--text-light);
}

.theme-pg .navbar-dark .nav-link:hover,
.theme-pg .navbar-dark .nav-link:focus {
  color: var(--white);
}

.theme-pg .dropdown-item:hover, .theme-pg .dropdown-item:focus {
  background-color: var(--primary);
  color: var(--white);
}

/* Buttons */
.theme-pg .btn:focus {
  box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

.theme-pg .btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color:#fff;
}

.theme-pg .btn-primary:hover, .theme-pg .btn-primary:focus {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color:#fff;
  text-decoration: none;
}

.theme-pg .btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color:#fff;
}

.theme-pg .btn-success:hover {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    color:#fff;
    text-decoration: none;
}

/* Cards */
.theme-pg .card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
}

.theme-pg .card-header {
  background-color: var(--bg-page);
  border-bottom: 1px solid var(--border-color);
}

/* Tables */
.theme-pg .table thead th {
  background-color: var(--bg-page);
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color);
}

.theme-pg .table .thead-dark th {
    background-color: var(--ui-dark);
    color: var(--text-light);
    border-color: var(--ui-dark-hover);
}

.theme-pg .table .thead-dark a {
    color: var(--text-light);
}

.theme-pg .table .thead-dark a:hover {
    color: var(--white);
}

.theme-pg .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-page);
}

.theme-pg .table-hover tbody tr:hover {
  background-color: #E9ECEF; /* A slightly darker gray for hover */
}

/* Forms */
.theme-pg .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem var(--focus-ring);
}

.theme-pg .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Alerts */
.theme-pg .alert-success {
  color: var(--success-text);
  background-color: var(--success-bg);
  border-color: #b6dfc9;
}

.theme-pg .alert-warning {
  color: var(--warning-text);
  background-color: var(--warning-bg);
  border-color: #ffe69c;
}

.theme-pg .alert-danger {
  color: var(--danger-text);
  background-color: var(--danger-bg);
  border-color: #249b22;
}

/* Pagination */
.theme-pg .page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
}

.theme-pg .page-link {
  color: var(--primary);
}

.theme-pg .page-link:hover {
  color: var(--primary-dark);
}

/* Footer */
.theme-pg .footer.bg-dark {
  background-color: var(--ui-dark) !important;
  color: var(--text-light);
}

.theme-pg .footer a {
  color: var(--white);
}

.theme-pg .footer a:hover {
  color: var(--primary-light);
}

/* =========================
   HERO (pełne RWD + kontrast)
   ========================= */
:root{
  --hero-grad-a:#0d6efd;
  --hero-grad-b:#4c8dff;
  --hero-text:#fff;
}

.hero{
  position: relative;
  background: linear-gradient(135deg, var(--hero-grad-a) 0%, var(--hero-grad-b) 100%);
  color: var(--hero-text);
  min-height: clamp(420px, 62vh, 680px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(48px, 6vw, 80px) 0;
}

.hero::before{
  /* lekki highlight po prawej górze */
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(800px 520px at 85% 15%, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}

.hero .container{ position: relative; z-index: 1; }

/* Teksty */
.hero h1{
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  margin-bottom: .5rem;
  text-wrap: balance;
  color:#fff !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.hero p.lead{
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  margin-bottom: 1.25rem;
  opacity: .95;
  max-width: 640px;
  color:#fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.hero .btn{
  margin-right: .5rem;
  margin-bottom: .75rem;
}

/* Przyciski – warianty do HERO */
.hero .btn-hero{
  background-color:#fff;
  color: var(--hero-grad-a);
  font-weight:600;
  border:none;
  transition: transform .15s ease-in-out, box-shadow .15s ease-in-out, color .2s ease-in-out, background-color .2s ease-in-out;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.hero .btn-hero:hover{
  background-color:#f8f9fa;
  color:var(--hero-grad-b);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.hero .btn-outline-hero{
  border:2px solid #fff;
  color:#fff;
  font-weight:600;
  transition: transform .15s ease-in-out, background-color .2s ease-in-out, color .2s ease-in-out;
}
.hero .btn-outline-hero:hover{
  background-color:#fff;
  color:var(--hero-grad-a);
  transform: translateY(-1px);
}

/* Ilustracja – zawsze w siatce, skaluje się z kolumną */
.hero-illustration-wrap{
  position: relative;
  width: 100%;
  max-width: 560px;         /* bezpieczny limit dla średnich ekranów */
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 4 / 3;      /* rezerwuje miejsce -> brak skoków układu */
  display: grid;
  place-items: center;
}

.hero-illustration{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.22));
}

/* Dekoracyjne „bąble” */
.hero .blob{
  position:absolute; border-radius:50%;
  opacity:.12; background:#fff; filter: blur(6px);
}
.hero .blob.b1{ width:180px; height:180px; right:-60px; bottom:-40px; }
.hero .blob.b2{ width:120px; height:120px; right:240px; top:-30px; }
.hero .blob.b3{ width: 90px; height: 90px;  left:-30px; bottom:-20px; }

/* ===== Responsywność ===== */

/* Mobile-first: wyśrodkowane treści i ilustracja dopasowana */
@media (max-width: 991.98px){
  .hero{ text-align:center; }
  .hero p.lead{ margin-left:auto; margin-right:auto; }
  .hero-illustration-wrap{ margin-top:16px; max-width: 520px; }
}

/* Bardziej kompaktowe na bardzo małych ekranach */
@media (max-width: 575.98px){
  .hero{ min-height:auto; padding: 40px 0 48px; }
  .hero-illustration-wrap{ aspect-ratio: 16 / 11; max-width: 88vw; }
}

/* Większa ilustracja na tabletach w poziomie */
@media (min-width: 768px){
  .hero-illustration-wrap{ max-width: 64vw; }
}

/* Desktop – ilustracja znacznie większa po prawej */
@media (min-width: 992px){
  .hero-illustration-wrap{
    width: min(42vw, 760px);
    max-width: none;
    margin-left: auto;
    margin-right: 0;
    aspect-ratio: 4 / 3;
  }
}

/* Duże desktopy */
@media (min-width: 1200px){
  .hero-illustration-wrap{ width: min(44vw, 820px); }
}
@media (min-width: 1400px){
  .hero-illustration-wrap{ width: min(46vw, 880px); }
}

/* Preferencje dostępności */
@media (prefers-reduced-motion: reduce){
  .hero .btn-hero,
  .hero .btn-outline-hero{ transition: none; }
}

.pb-5, .py-5 {
    padding-bottom: 1rem !important;
}

/* Custom class for links inside tables to override default white color */
.table-link {
    color: #007bff !important; /* Use !important to ensure override */
    text-decoration: underline;
}

.table-link:hover {
    color: #0056b3 !important;
}

/* Responsive Welcome Box on Dashboard */
.welcome-box {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    flex-direction: row; /* Default for desktop */
}

.welcome-box img {
    width: 300px; /* User's preferred size */
    height: auto;
    margin-right: 25px;
}

/* On mobile, stack the image on top of the text */
@media (max-width: 767.98px) {
    .welcome-box {
        flex-direction: column;
        text-align: center; /* Center text when stacked */
    }

    .welcome-box img {
        width: 100%;      /* Make image responsive and fluid */
        max-width: 200px; /* But not too large on mobile */
        height: auto;     /* Ensures aspect ratio is maintained */
        display: block;   /* Removes any extra space below the image */
        margin-right: 0;
        margin-bottom: 15px; /* Add space between image and text */
    }
}

/* Responsive Instruction Box */
.instruction-box {
    /* The display property is set by JavaScript to 'flex' or 'none' */
    flex-direction: row; /* Default: text on left, image on right */
    align-items: flex-start;
}

.instruction-box-content {
    flex: 1; /* Takes up available space */
}

.instruction-box-img {
    width: 100%;
    max-width: 250px; /* User's requested size */
    height: auto;
    margin-left: 20px;
    order: 2; /* Puts image on the right */
}

/* On mobile, stack image on top */
@media (max-width: 767.98px) {
    .instruction-box {
        flex-direction: column;
    }

    .instruction-box-img {
        order: 0; /* Puts image back on top */
        margin-left: 0;
        margin-bottom: 15px;
        display: block;
        margin-left: auto;
        margin-right: auto; /* Center the image */
    }
}

/* Code Generator Image Styling */
.generator-image {
    float: right;
    width: 250px;
    height: auto;
    margin-left: 20px;
    margin-bottom: 10px;
}

/* On mobile, un-float the image and center it */
@media (max-width: 767.98px) {
    .generator-image {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
}