:root { --card-bg:#fff; --card-bg-dark:#0f172a; --badge-bg:#f1f5f9; }
    .card{ background:var(--card-bg); border-radius:1rem; padding:1rem; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 15px -3px rgba(0,0,0,.1) }
    html.dark .card{ background:#0f172a !important; border:1px solid #1f2937 !important; }
    html.dark .table-sticky thead tr{ background:#1f2937 !important; color:#e5e7eb !important; }
    html.dark table tbody, html.dark table td, html.dark table th{ color:#e5e7eb !important; }
    html.dark input[type="text"], html.dark input[type="date"], html.dark input[type="search"], html.dark input[type="password"], html.dark select{
      background:#1f2937 !important; color:#f3f4f6 !important; border-color:#374151 !important;
    }
    html.dark ::placeholder{ color:#9ca3af !important; }
    .btn{ display:inline-flex; align-items:center; gap:.5rem; border-radius:.75rem; padding:.5rem .75rem; font-weight:500; font-size:.875rem }
    .btn-primary{ background:#0284c7; color:#fff } .btn-primary:hover{ background:#0369a1 }
    .btn-ghost{ background:#e2e8f0; color:#0f172a } .btn-ghost:hover{ background:#cbd5e1 }
    [x-cloak]{ display:none !important }
    #errorToast{ position:fixed; right:1rem; bottom:1rem; z-index:9999; background:#fee2e2; color:#7f1d1d; padding:.75rem 1rem; border-radius:.75rem; box-shadow:0 6px 20px rgba(0,0,0,.15); display:none }
  
    .badge {
      display:inline-flex;
      align-items:center;
      padding:2px 8px;
      font-size:11px;
      font-weight:600;
      border-radius:9999px;
      text-transform:uppercase;
    }
    .badge-ok {
      background:#dcfce7;       /* zelena */
      color:#065f46;
    }
    .badge-warn {
      background:#fef9c3;       /* žuta */
      color:#92400e;
    }
    .badge-neutral {
      background:#e5e7eb;       /* siva */
      color:#374151;
    }
    .badge-danger {
      background:#fee2e2;       /* crvena */
      color:#991b1b;
      border:1px solid #ef4444; /* crveni okvir */
    }

   /* ===== STUDENTSKA ISKAZNICA (popup) ===== */
    .sc-overlay{ backdrop-filter: blur(6px); }
    body.sc-lock{ overflow:hidden; touch-action:none; }
    .sc-modal{ animation: scFadeIn .16s ease-out; }
    .sc-shell{ width:560px; min-width:560px; }

    @keyframes scFadeIn{ from{opacity:0} to{opacity:1} }

    .student-card-mock{
  width: 560px;
  min-width: 560px;
  aspect-ratio: 1.586 / 1; /* 85.6mm x 54mm */
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  border: 2px solid rgba(148,163,184,.55);
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(226,232,240,.95) 0%, rgba(248,250,252,.92) 55%, rgba(241,245,249,.9) 100%),
    linear-gradient(135deg, rgba(241,245,249,.85) 0%, rgba(226,232,240,.75) 55%, rgba(248,250,252,.85) 100%);
}

.student-card-mock.sc-expired{
  border-color: rgba(239,68,68,.85);
  box-shadow:
    0 14px 45px rgba(239,68,68,.18),
    0 12px 40px rgba(0,0,0,.25);
}

/* crveno-bijeli uzorak (donji lijevi kut) */
.student-card-mock::before{
  content:"";
  position:absolute;
  left:-40px;
  bottom:-70px;
  width:320px;
  height:220px;
  transform: rotate(-10deg);
  background:
    repeating-linear-gradient(45deg,
      rgba(220,38,38,.95) 0 18px,
      rgba(255,255,255,.96) 18px 36px);
  opacity:.9;
  filter: saturate(1.05);
}

/* suptilna geometrija */
.student-card-mock::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg, rgba(248,113,113,.18) 0 12%, rgba(0,0,0,0) 12% 100%),
    linear-gradient(25deg, rgba(148,163,184,.18) 0 8%, rgba(0,0,0,0) 8% 100%);
  opacity:.55;
  pointer-events:none;
}

.sc-right-vertical{
  position:absolute;
  top:18px;
  right:-34px;
  transform: rotate(90deg);
  transform-origin: top right;
  font-weight:800;
  letter-spacing:.08em;
  font-size:14px;
  color: rgba(15,23,42,.85);
  text-transform: uppercase;
  opacity:.85;
  z-index:2;
}

.sc-eu{
  position:absolute;
  top:14px;
  right:14px;
  width:46px;
  height:30px;
  border-radius:6px;
  overflow:hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  border:1px solid rgba(15,23,42,.15);
  background: linear-gradient(180deg, #1d4ed8, #1e40af);
  z-index:2;
}
.sc-eu span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fbbf24;
  font-weight:800;
  font-size:11px;
  letter-spacing:.08em;
}

.sc-content{
  position:relative;
  z-index:1;
  height:100%;
  padding: 18px 18px 12px;
  display:grid;
  grid-template-columns: 128px 1fr;
  gap:14px;
}

.sc-photo{
  width:128px;
  height:160px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(226,232,240,.9), rgba(248,250,252,.95));
  border: 2px dashed rgba(100,116,139,.55);
  display:grid;
  place-items:center;
  color: rgba(51,65,85,.85);
  position:relative;
  overflow:hidden;
}
.sc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.sc-photo .sc-photo-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.sc-meta{ display:flex; flex-direction:column; min-width:0; }
.sc-institution,
.sc-faculty{
  font-size:12px;
  font-weight:700;
  color: rgba(15,23,42,.85);
  line-height:1.15;
}

.sc-title{
  margin-top:10px;
  font-size:15px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: rgba(15,23,42,.9);
}

.sc-name{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(148,163,184,.45);
}
.sc-name .lbl{
  font-size:10px;
  letter-spacing:.10em;
  font-weight:800;
  text-transform:uppercase;
  color: rgba(51,65,85,.75);
}
.sc-name .val{
  margin-top:2px;
  font-size:20px;
  font-weight:900;
  color: rgba(15,23,42,.92);
  line-height:1.12;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sc-row{
  margin-top:10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.sc-field{
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.65);
  border:1px solid rgba(148,163,184,.45);
  min-width:0;
}
.sc-field .k{
  font-size:10px;
  letter-spacing:.10em;
  font-weight:800;
  text-transform:uppercase;
  color: rgba(51,65,85,.75);
}
.sc-field .v{
  margin-top:2px;
  font-size:12px;
  font-weight:800;
  color: rgba(15,23,42,.92);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sc-field .v.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.sc-bottom{
  position:absolute;
  left:18px;
  right:18px;
  bottom:14px;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  gap:12px;
  z-index:2;
}

.sc-footer{
  background: rgba(255,255,255,.72);
  border:1px solid rgba(148,163,184,.45);
  border-radius:14px;
  padding:8px 10px;
  max-width: 70%;
}
.sc-footer .k{
  font-size:10px;
  letter-spacing:.10em;
  font-weight:800;
  text-transform:uppercase;
  color: rgba(51,65,85,.75);
}
.sc-footer .v{
  margin-top:2px;
  font-size:12px;
  font-weight:900;
  color: rgba(15,23,42,.92);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.sc-hint{ font-size:11px; color: rgba(51,65,85,.7); }

/* mobilni layout: spriječi preklapanja (mobile + zoom-safe) */
.student-card-mock.sc-mobile{
  width: min(520px, 96vw);
  aspect-ratio: auto;
  border-radius:16px;
}

/* Na mobitelu složi sve u jedan stupac (nema preklapanja) */
@media (max-width: 640px){
  /* v5: ne skalirati karticu na mobitelu (scroll umjesto resiza) */
  .student-card-mock.sc-mobile{ width: 560px; min-width:560px; }
  .student-card-mock.sc-mobile .sc-right-vertical{ display:none; }
  .student-card-mock.sc-mobile .sc-content{
    padding: 14px 14px 12px;
    grid-template-columns: 1fr;
    gap:12px;
  }
  .student-card-mock.sc-mobile .sc-photo{
    width: 100%;
    height: 170px;
  }
  .student-card-mock.sc-mobile .sc-title{ font-size:13px; }
  .student-card-mock.sc-mobile .sc-name .val{
    font-size:18px;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    line-height:1.15;
  }

  .student-card-mock.sc-mobile .sc-row{
    grid-template-columns: 1fr;
    gap:10px;
  }
  .student-card-mock.sc-mobile .sc-field .v{
    font-size:12px;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .student-card-mock.sc-mobile .sc-footer{
    max-width: 100%;
  }
}

/* ultra mali ekrani */
@media (max-width: 360px){
  .student-card-mock.sc-mobile .sc-photo{ height: 155px; }
  .student-card-mock.sc-mobile .sc-name .val{ font-size:17px; }
}
.sc-photo{ width:104px; height:140px; }
}

/* klikabilno prezime */
.student-link{ color:#0369a1; font-weight:700; }
.student-link:hover{ text-decoration: underline; }


*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* tailwindcss reset skraćen radi mjesta */