/* ====== Animations (REMOVED: @keyframes fadeIn) ====== */
@keyframes subtlePulse {
  0% { box-shadow: 0 0 0 0 rgba(99,102,241, 0.4); }
  70% { box-shadow: 0 0 0 5px rgba(99,102,241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241, 0); }
}
/* REMOVED: .animated-load class */

/* ====== Base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,Helvetica,sans-serif;
  line-height:1.35;
  color:#0f172a; /* slate-900 */
  background:linear-gradient(180deg,#f8fafc, #f1f5f9 1200px); /* very light slate gradient */
  /* REMOVED: animation: fadeIn 0.5s ease-out; */
}

/* ====== Layout ====== */
.container{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
}

.header{
  position:sticky; top:0; z-index:10;
  background:#ffffffcc; backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid #e2e8f0;
  transition: box-shadow 0.3s ease; /* Subtle shadow transition */
}
.header:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header .container{
  display:flex; align-items:center; justify-content:space-between;
  min-height:58px;
}
.header .brand{
  display:flex; gap:10px; align-items:center;
  font-weight:700; letter-spacing:.2px;
}

/* ====== NAVIGATION MENU (DESKTOP) ====== */
.header nav {
    /* Desktop Default: Always flex-row, always visible */
    display: flex;
    align-items: center;
    font-size: 0.95em;
}
.header nav a{
  color:#334155; text-decoration:none; padding:6px 10px; border-radius:8px;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
/* FIX: Exclude the logout button from the general hover style */
.header nav a:not(.btn-logout):hover { 
  background:#e2e8f0; 
  color:#0f172a 
}
.header nav strong {
    /* Style for the pipe separators | */
    color: #cbd5e1;
    font-weight: 300;
    margin: 0 4px;
}

/* Red Logout Button/Link */
.btn-logout {
    border: 1px solid #fecaca; 
    background: #fee2e2; 
    color: #b91c1c !important; 
    padding: 6px 10px;
    border-radius: 8px;
    margin-left: 8px; 
    font-weight: 500;
    transition: background 0.2s, color 0.2s, border-color 0.2s; /* Added transition */
}
.btn-logout:hover {
    background: #fca5a5; 
    color: white !important;
    border-color: #f87171;
}

/* Hamburger Button style */
.menu-toggle {
    display: none; /* Hidden by default on desktop */
    font-size: 1.5rem;
    background: none;
    border: none;
    color: #334155;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 20;
}

/* ====== Cards / sections ====== */
h1{font-size:32px;margin:18px 0 14px 0}
h2{font-size:20px;margin:0 0 10px 0}
.card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  padding:16px;
  transition: box-shadow 0.2s, transform 0.2s; /* Card animation */
}
.card:hover {
  box-shadow: 0 4px 10px rgba(15,23,42,.08);
}
.alert{
  border:1px solid #fecaca;
  background:#fff1f2;
  color:#991b1b;
  padding:8px 10px; border-radius:10px; margin:10px 0;
}

/* ====== Grid ====== */
.grid{ display:grid; gap:16px }
.grid.two{ grid-template-columns: 1fr 1fr }

/* ====== Mobile Styles (Tablet/Mobile Breakpoint) ====== */
@media (max-width: 980px){
  .grid.two{ grid-template-columns: 1fr }

    .header nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #fff;
        padding: 70px 16px 16px; 
        display: none; 
        flex-direction: column;
        align-items: flex-start;
        z-index: 15;
        overflow-y: auto;
    }

    .header nav.is-open {
        display: flex; 
    }

    .header nav a {
        width: 100%;
        padding: 12px 10px;
        margin-bottom: 5px;
        font-size: 1.1rem;
    }

    .header nav strong {
        display: none;
    }
    
    .header .btn-logout {
        width: 100%;
        margin-left: 0;
        margin-top: 15px; 
        text-align: center;
    }

    .menu-toggle {
        display: block; 
    }
}

/* ====== Form ====== */
label{display:block; font-size:12px; color:#475569; margin:10px 0 4px}
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], input:not([type]),
select, textarea{
  width:100%;
  height:40px;
  padding:8px 10px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  background:#fff;
  outline:none;
  transition: border-color 0.2s, box-shadow 0.2s; /* Input animation */
}
input:focus, select:focus, textarea:focus{
  border-color:#6366f1; /* indigo */
  box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
button{
  height:40px; padding:0 14px; border-radius:10px; border:1px solid #3b82f6;
  background:#2563eb; color:#fff; font-weight:600; cursor:pointer;
  transition: background 0.2s, filter 0.2s, transform 0.1s; /* Button animation */
}
button:active {
  transform: scale(0.99);
}
button.secondary{
  border-color:#cbd5e1; background:#f8fafc; color:#0f172a;
}
button.secondary:hover{ background:#e2e8f0 }
button:hover{ filter:brightness(.98) }

.badge{
  display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px;
  background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe;
}

.btn-secondary-promo {
  border: 1px solid #c7d2fe; /* Muted indigo border */
  background: #eef2ff; /* Very light indigo background */
  color: #4338ca; /* Darker indigo text */
  font-weight: 600; 
  cursor: pointer;
  transition: background 0.2s, filter 0.2s, transform 0.1s;
}
.btn-secondary-promo:hover {
  background: #dce7ff; /* Slightly darker hover */
}
.btn-secondary-promo:active {
  transform: scale(0.99);
}


/* ====== Tables ====== */
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td{ padding:10px 12px; text-align:left; border-bottom:1px solid #e2e8f0; }
.table th{ color:#475569; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
.table tr:last-child td{ border-bottom:none }

/* ====== QR preview panel ====== */
.qr-preview{
  width:100%;
  display:flex; align-items:center; justify-content:center;
  background:#ffffff;
  border:1px dashed #e2e8f0;
  border-radius:12px;
  min-height:520px; /* keeps the right card same height as form */
  overflow:hidden;
}
.qr-preview svg, .qr-preview canvas{ max-width:100%; height:auto }

/* Tweak small controls row under the preview */
.controls-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px }
.controls-row > div{ min-width:120px; flex:1 }

/* ====== Links in content ====== */
a{ color:#2563eb; transition: color 0.2s; }
a:hover{ text-decoration:none }
code{ background:#f1f5f9; padding:2px 6px; border-radius:6px; }

/* ====== Utilities ====== */
.mt-2{ margin-top:8px } .mt-3{ margin-top:12px } .mt-4{ margin-top:16px }


/* ====== FOOTER (Ensure footer sticks to the bottom) ====== */
.footer{
  padding: 15px 0;
  border-top: 1px solid #e2e8f0; 
  background: #f8fafc; 
  color: #6c757d; 
  text-align: center;
  font-size: 0.85em;
}
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
.header { flex-shrink: 0; }
.container:first-of-type { flex-grow: 1; }
.footer { flex-shrink: 0; }