/* ============================================================
   PRISM-AI Stylesheet
   Standalone CSS – no external dependencies
   ============================================================ */

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; line-height: 1.5; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
table { border-collapse: collapse; width: 100%; }
a { color: inherit; text-decoration: none; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ─── Base ───────────────────────────────────────────────── */
.min-h-screen { min-height: 100vh; }
.h-full  { height: 100%; }
.w-full  { width: 100%; }
.mt-auto { margin-top: auto; }

/* ─── Display ────────────────────────────────────────────── */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.inline-block { display: inline-block; }
.block        { display: block; }
.grid         { display: grid; }
.hidden       { display: none; }

/* ─── Flex ───────────────────────────────────────────────── */
.flex-col      { flex-direction: column; }
.flex-row      { flex-direction: row; }
.flex-1        { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-start   { justify-content: flex-start; }

/* ─── Grid ───────────────────────────────────────────────── */
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ─── Gap ────────────────────────────────────────────────── */
.gap-1   { gap: 0.25rem; }
.gap-1\.5{ gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }

/* ─── Sizing ─────────────────────────────────────────────── */
.w-1\.5 { width: 0.375rem; }
.w-3\.5 { width: 0.875rem; }
.w-4  { width: 1rem; }
.w-5  { width: 1.25rem; }
.w-6  { width: 1.5rem; }
.w-8  { width: 2rem; }
.w-9  { width: 2.25rem; }
.w-14 { width: 3.5rem; }
.w-24 { width: 6rem; }
.h-1\.5 { height: 0.375rem; }
.h-2\.5 { height: 0.625rem; }
.h-4  { height: 1rem; }
.h-5  { height: 1.25rem; }
.h-6  { height: 1.5rem; }
.h-7  { height: 1.75rem; }
.h-8  { height: 2rem; }
.h-9  { height: 2.25rem; }
.h-14 { height: 3.5rem; }
.h-24 { height: 6rem; }
.h-px { height: 1px; }

/* ─── Max-width ──────────────────────────────────────────── */
.max-w-sm  { max-width: 24rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }

/* ─── Margin ─────────────────────────────────────────────── */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-1  { margin-left: 0.25rem; }
.ml-2  { margin-left: 0.5rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1  { margin-top: 0.25rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-7  { margin-bottom: 1.75rem; }
.mb-8  { margin-bottom: 2rem; }

/* ─── Padding ────────────────────────────────────────────── */
.p-1  { padding: 0.25rem; }
.p-3  { padding: 0.75rem; }
.p-4  { padding: 1rem; }
.p-6  { padding: 1.5rem; }
.p-7  { padding: 1.75rem; }
.p-8  { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.px-2\.5 { padding-left: 0.625rem;  padding-right: 0.625rem; }
.px-3    { padding-left: 0.75rem;   padding-right: 0.75rem; }
.px-3\.5 { padding-left: 0.875rem;  padding-right: 0.875rem; }
.px-4    { padding-left: 1rem;      padding-right: 1rem; }
.px-5    { padding-left: 1.25rem;   padding-right: 1.25rem; }
.px-6    { padding-left: 1.5rem;    padding-right: 1.5rem; }
.px-8    { padding-left: 2rem;      padding-right: 2rem; }
.py-0\.5 { padding-top: 0.125rem;   padding-bottom: 0.125rem; }
.py-1    { padding-top: 0.25rem;    padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem;   padding-bottom: 0.375rem; }
.py-2    { padding-top: 0.5rem;     padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem;   padding-bottom: 0.625rem; }
.py-3    { padding-top: 0.75rem;    padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem;   padding-bottom: 0.875rem; }
.py-4    { padding-top: 1rem;       padding-bottom: 1rem; }
.py-5    { padding-top: 1.25rem;    padding-bottom: 1.25rem; }
.py-8    { padding-top: 2rem;       padding-bottom: 2rem; }
.py-12   { padding-top: 3rem;       padding-bottom: 3rem; }
.pt-1  { padding-top: 0.25rem; }
.pt-4  { padding-top: 1rem; }
.pt-5  { padding-top: 1.25rem; }
.pl-3  { padding-left: 0.75rem; }

/* ─── Space between ──────────────────────────────────────── */
.space-y-1\.5 > * + * { margin-top: 0.375rem; }
.space-y-4    > * + * { margin-top: 1rem; }
.space-y-5    > * + * { margin-top: 1.25rem; }

/* ─── Typography ─────────────────────────────────────────── */
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;   line-height: 2rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.font-medium  { font-weight: 500; }
.font-semibold{ font-weight: 600; }
.font-bold    { font-weight: 700; }
.font-mono    { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.uppercase    { text-transform: uppercase; }
.leading-none    { line-height: 1; }
.leading-tight   { line-height: 1.25; }
.leading-snug    { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.tracking-wide   { letter-spacing: 0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }
.whitespace-nowrap { white-space: nowrap; }
.underline  { text-decoration: underline; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ─── Text colors ────────────────────────────────────────── */
.text-white    { color: #fff; }
.text-slate-300{ color: #cbd5e1; }
.text-slate-400{ color: #94a3b8; }
.text-slate-500{ color: #64748b; }
.text-slate-600{ color: #475569; }
.text-slate-700{ color: #334155; }
.text-slate-800{ color: #1e293b; }
.text-prism-600{ color: #2248d4; }
.text-prism-700{ color: #1a38b8; }
.text-prism-800{ color: #142a8c; }
.text-prism-900{ color: #0e1c60; }
.text-blue-100 { color: #dbeafe; }
.text-blue-200 { color: #bfdbfe; }
.text-blue-300 { color: #93c5fd; }
.text-blue-400 { color: #60a5fa; }
.text-indigo-600{ color: #4f46e5; }
.text-emerald-600{ color: #059669; }
.text-emerald-700{ color: #047857; }
.text-rose-600 { color: #e11d48; }
.text-red-400  { color: #f87171; }
.text-red-700  { color: #b91c1c; }
.text-amber-600{ color: #d97706; }
.text-amber-900{ color: #78350f; }
.text-gray-600 { color: #4b5563; }

/* ─── Background colors ──────────────────────────────────── */
.bg-white      { background-color: #fff; }
.bg-slate-50   { background-color: #f8fafc; }
.bg-slate-100  { background-color: #f1f5f9; }
.bg-prism-50   { background-color: #eef2ff; }
.bg-prism-100  { background-color: #dce5fa; }
.bg-prism-700  { background-color: #1a38b8; }
.bg-indigo-600 { background-color: #4f46e5; }
.bg-indigo-700 { background-color: #4338ca; }
.bg-emerald-100{ background-color: #d1fae5; }
.bg-emerald-500{ background-color: #10b981; }
.bg-emerald-600{ background-color: #059669; }
.bg-rose-50    { background-color: #fff1f2; }
.bg-red-50     { background-color: #fef2f2; }
.bg-red-100    { background-color: #fee2e2; }
.bg-red-400    { background-color: #f87171; }
.bg-red-500    { background-color: #ef4444; }
.bg-red-600    { background-color: #dc2626; }
.bg-red-700    { background-color: #b91c1c; }
.bg-gray-100   { background-color: #f3f4f6; }
.bg-gray-400   { background-color: #9ca3af; }
.bg-amber-300  { background-color: #fcd34d; }
.bg-amber-400  { background-color: #fbbf24; }
.bg-amber-500  { background-color: #f59e0b; }
.bg-yellow-400 { background-color: #facc15; }
.bg-yellow-600 { background-color: #ca8a04; }
.bg-cover      { background-size: cover; }
.bg-center     { background-position: center; }

/* ─── Background with opacity ────────────────────────────── */
.bg-slate-50\/50  { background-color: rgba(248,250,252,0.50); }
.bg-slate-50\/60  { background-color: rgba(248,250,252,0.60); }
.bg-prism-50\/40  { background-color: rgba(238,242,255,0.40); }
.bg-prism-50\/60  { background-color: rgba(238,242,255,0.60); }
.bg-rose-50\/30   { background-color: rgba(255,241,242,0.30); }

/* ─── Border colors ──────────────────────────────────────── */
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-slate-300 { border-color: #cbd5e1; }
.border-prism-100 { border-color: #dce5fa; }
.border-prism-200 { border-color: #c0d0f8; }
.border-prism-400 { border-color: #6b87f0; }
.border-red-200   { border-color: #fecaca; }
.border-white\/10 { border-color: rgba(255,255,255,0.10); }
.border-white\/20 { border-color: rgba(255,255,255,0.20); }
.border-white\/25 { border-color: rgba(255,255,255,0.25); }
.border-white\/30 { border-color: rgba(255,255,255,0.30); }

/* ─── Borders ────────────────────────────────────────────── */
.border   { border-width: 1px; border-style: solid; border-color: #e2e8f0; }
.border-0 { border-width: 0; }
.border-2 { border-width: 2px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; border-top-color: #e2e8f0; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e2e8f0; }
.border-l { border-left-width: 1px; border-left-style: solid; }
.border-r { border-right-width: 1px; border-right-style: solid; }
.border-dashed { border-style: dashed; }

/* ─── Border radius ──────────────────────────────────────── */
.rounded    { border-radius: 0.25rem; }
.rounded-sm { border-radius: 0.125rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl{ border-radius: 1rem; }
.rounded-full{ border-radius: 9999px; }

/* ─── Divide ─────────────────────────────────────────────── */
.divide-y > * + *          { border-top-width: 1px; border-top-style: solid; }
.divide-slate-100 > * + *  { border-top-color: #f1f5f9; }

/* ─── Shadows ────────────────────────────────────────────── */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow    { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

/* ─── Position ───────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { inset: 0; }
.left-0   { left: 0; }
.top-0    { top: 0; }
.z-10     { z-index: 10; }

/* ─── Overflow ───────────────────────────────────────────── */
.overflow-hidden  { overflow: hidden; }
.overflow-x-auto  { overflow-x: auto; }

/* ─── Object fit ─────────────────────────────────────────── */
.object-cover { object-fit: cover; }

/* ─── Opacity ────────────────────────────────────────────── */
.opacity-25 { opacity: 0.25; }
.opacity-40 { opacity: 0.40; }
.opacity-70 { opacity: 0.70; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.80; }
.opacity-90 { opacity: 0.90; }

/* ─── Cursor ─────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }

/* ─── Transition ─────────────────────────────────────────── */
.transition {
  transition-property: color, background-color, border-color, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ─── Focus ──────────────────────────────────────────────── */
.focus\:outline-none:focus { outline: none; }
/* ring-2 + ring-prism-600 combined for inputs */
.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px #2248d4;
}
.focus\:border-prism-600:focus { border-color: #2248d4; }

/* ─── Hover: text ────────────────────────────────────────── */
.hover\:text-white:hover      { color: #fff; }
.hover\:text-prism-600:hover  { color: #2248d4; }
.hover\:text-slate-700:hover  { color: #334155; }
.hover\:text-red-500:hover    { color: #ef4444; }
.hover\:text-indigo-800:hover { color: #3730a3; }
.hover\:underline:hover       { text-decoration: underline; }
.hover\:opacity-100:hover     { opacity: 1; }

/* ─── Hover: background ──────────────────────────────────── */
.hover\:bg-indigo-500:hover    { background-color: #6366f1; }
.hover\:bg-indigo-600:hover    { background-color: #4f46e5; }
.hover\:bg-emerald-500:hover   { background-color: #10b981; }
.hover\:bg-prism-50\/40:hover  { background-color: rgba(238,242,255,0.40); }
.hover\:bg-prism-50\/60:hover  { background-color: rgba(238,242,255,0.60); }
.hover\:bg-slate-50\/60:hover  { background-color: rgba(248,250,252,0.60); }
.hover\:bg-amber-500:hover     { background-color: #f59e0b; }
.hover\:bg-red-600:hover       { background-color: #dc2626; }
.hover\:bg-yellow-600:hover    { background-color: #ca8a04; }
.hover\:bg-red-700:hover       { background-color: #b91c1c; }

/* ─── Hover: border ──────────────────────────────────────── */
.hover\:border-prism-400:hover { border-color: #6b87f0; }

/* ─── Group hover ────────────────────────────────────────── */
.group:hover .group-hover\:opacity-100 { opacity: 1; }

/* ─── Animations ─────────────────────────────────────────── */
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-spin  { animation: spin  1s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ─── Range slider (alignment step 2) ────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e2e8f0;
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a38b8;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a38b8;
  cursor: pointer;
  border: 2px solid #fff;
}

/* ─── Footer logos ───────────────────────────────────────── */
.logo-campus  { height: clamp(2.75rem,   3.5vw, 4rem);     width: auto; padding-left: 0rem;   padding-right: 0.30rem;}
.logo-ccb     { height: clamp(3rem,  4vw,   4.5rem);   width: auto; padding-left: 0.30rem;   padding-right: 0.30rem;}
.logo-unimi   { height: clamp(2.75rem,   3.2vw, 3.625rem); width: auto; padding-left: 0.30rem;   padding-right: 0.30rem;}
.logo-unito   { height: clamp(2.75rem,  4vw,   4.5rem);   width: auto; padding-left: 0.30rem;   padding-right: 0.30rem;}
.logo-unipmn  { height: clamp(2rem,     2.6vw, 3rem);     width: auto; padding-left: 0.30rem;   padding-right: 0.30rem;}
.logo-uniroma { height: clamp(2.35rem,  3.3vw, 3.7rem);   width: auto; padding-left: 0.30rem;   padding-right: 0.30rem;}


/* ─── Responsive ─────────────────────────────────────────── */
@media (min-width: 640px) {
  .sm\:flex-row { flex-direction: row; }
}
@media (min-width: 1024px) {
  .lg\:hidden         { display: none; }
  .lg\:flex           { display: flex; }
  .lg\:w-\[58\%\]    { width: 58%; }
}