/* ══════════════════════════════════════════
   Student Notes Viewer – Frontend Styles
   v2.0 – View Only, Protected
══════════════════════════════════════════ */

/* ── Grid ─────────────────────────────── */
.snv-wrapper { font-family: inherit; position: relative; }
.snv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin: 16px 0 28px;
}
.snv-cols-1 .snv-grid { grid-template-columns: 1fr; }
.snv-cols-2 .snv-grid { grid-template-columns: repeat(2,1fr); }
.snv-cols-4 .snv-grid { grid-template-columns: repeat(4,1fr); }
@media (max-width:900px){ .snv-grid{ grid-template-columns:repeat(2,1fr)!important; } }
@media (max-width:580px){ .snv-grid{ grid-template-columns:1fr!important; } }

/* ── Subject heading ───────────────────── */
.snv-subject-group { margin-bottom: 36px; }
.snv-subject-heading {
    font-size: 1.1rem; font-weight: 700; color: #1e293b;
    border-left: 4px solid #6366f1; padding-left: 12px; margin-bottom: 16px;
}

/* ── Card ──────────────────────────────── */
.snv-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    /* Block drag-select on card */
    user-select: none;
    -webkit-user-select: none;
}
.snv-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.13); }

/* Thumbnail */
.snv-card-thumb { width:100%; height:170px; overflow:hidden; position:relative; }
.snv-thumb-img { background:#f8fafc; }
.snv-img-blur-wrap { position:relative; width:100%; height:100%; }
.snv-thumb-preview {
    width:100%; height:100%; object-fit:cover;
    filter: blur(3px) brightness(.85);
    transform: scale(1.05);
    pointer-events: none;
    draggable: none;
}
.snv-img-lock-overlay {
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; color:#fff; font-size:.85rem; font-weight:600;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    cursor:pointer;
}
.snv-img-lock-overlay span:first-child { font-size:28px; }
.snv-thumb-pdf {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
}
.snv-pdf-big { font-size:54px; }
.snv-pdf-label {
    font-size:11px; font-weight:700; letter-spacing:1px; color:#4f46e5;
    background:#c7d2fe; padding:2px 10px; border-radius:20px;
}

/* Card body */
.snv-card-body { padding:14px 16px 8px; flex:1; }
.snv-subject-tag {
    display:inline-block; font-size:11px; font-weight:600; text-transform:uppercase;
    letter-spacing:.7px; color:#4f46e5; background:#eef2ff;
    padding:2px 8px; border-radius:20px; margin-bottom:8px;
}
.snv-card-title { font-size:.95rem; font-weight:700; color:#1e293b; margin:0 0 6px; line-height:1.4; }
.snv-card-desc  { font-size:.82rem; color:#64748b; margin:0 0 8px; line-height:1.5; }
.snv-card-meta  { display:flex; gap:12px; font-size:.78rem; color:#94a3b8; flex-wrap:wrap; }

/* Card footer */
.snv-card-footer { padding:10px 16px 16px; }
.snv-view-btn {
    width:100%; padding:11px; cursor:pointer;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color:#fff; border:none; border-radius:9px;
    font-size:.9rem; font-weight:600;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition: opacity .2s, transform .1s;
}
.snv-view-btn:hover { opacity:.9; }
.snv-view-btn:active { transform:scale(.98); }

/* ── MODAL ─────────────────────────────── */
.snv-modal {
    display: none;
    position: fixed; inset:0; z-index:999999;
    align-items: center; justify-content: center;
}
.snv-modal.open { display: flex; }

.snv-modal-overlay {
    position:absolute; inset:0;
    background: rgba(15,23,42,.75);
    backdrop-filter: blur(4px);
}
.snv-modal-box {
    position: relative; z-index:1;
    background: #1e293b;
    border-radius: 16px;
    width: 92vw; max-width: 900px;
    height: 90vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
}

.snv-modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px;
    background:#0f172a;
    border-bottom:1px solid rgba(255,255,255,.08);
    flex-shrink:0;
}
.snv-modal-title-wrap { display:flex; align-items:center; gap:10px; }
.snv-modal-icon { font-size:1.3rem; }
.snv-modal-title { margin:0; font-size:1rem; font-weight:600; color:#f1f5f9; }
.snv-modal-close {
    background:rgba(255,255,255,.08); border:none; color:#94a3b8;
    width:34px; height:34px; border-radius:8px; cursor:pointer; font-size:1rem;
    transition:background .15s, color .15s;
}
.snv-modal-close:hover { background:rgba(255,255,255,.15); color:#fff; }

.snv-modal-body {
    flex:1; overflow-y:auto; overflow-x:hidden;
    padding:20px;
    /* CRITICAL: block right-click on content */
    position:relative;
}
/* Custom scrollbar */
.snv-modal-body::-webkit-scrollbar { width:6px; }
.snv-modal-body::-webkit-scrollbar-track { background:rgba(255,255,255,.05); }
.snv-modal-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.2); border-radius:3px; }

/* ── WATERMARK overlay ─────────────────── */
.snv-watermark {
    position:absolute; inset:0;
    pointer-events:none;
    z-index:10;
    overflow:hidden;
    /* Diagonal repeated text via generated CSS – JS fills it */
}

/* ── PDF canvas pages ──────────────────── */
.snv-pdf-page {
    display:block; margin:0 auto 16px;
    border-radius:6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    max-width:100%;
    pointer-events:none; /* no drag */
    user-select:none;
    -webkit-user-select:none;
}
.snv-pdf-page-wrap {
    position:relative; display:inline-block; width:100%; text-align:center;
}

/* ── Image viewer ──────────────────────── */
.snv-image-viewer {
    display:flex; align-items:center; justify-content:center; min-height:100%;
}
.snv-image-viewer img {
    max-width:100%; max-height:80vh; border-radius:8px;
    box-shadow:0 4px 20px rgba(0,0,0,.4);
    pointer-events:none;
    user-select:none;
    -webkit-user-select:none;
    draggable:none;
}

/* ── Loading spinner ───────────────────── */
.snv-viewer-loading {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    height:300px; color:#94a3b8; gap:16px;
}
.snv-spinner {
    width:40px; height:40px;
    border:3px solid rgba(255,255,255,.1);
    border-top-color:#6366f1;
    border-radius:50%;
    animation: snv-spin .8s linear infinite;
}
@keyframes snv-spin { to { transform:rotate(360deg); } }

/* ── Empty ─────────────────────────────── */
.snv-empty {
    padding:48px; text-align:center; border:2px dashed #cbd5e1;
    border-radius:12px; color:#64748b; font-size:1rem;
}

/* ─────────────────────────────────────────
   PROTECTION: global selection/drag block
   Applied to body when modal is open
───────────────────────────────────────── */
body.snv-protected {
    user-select: none !important;
    -webkit-user-select: none !important;
}
body.snv-protected * {
    -webkit-touch-callout: none !important;
}