/* ОШ Његош – страница „Документа“
   Светла и тамна тема: JS (dokumenta.js) чита боју позадине саме теме и поставља
   data-njg-mode="light|dark" на .njg-docs, па прати и дугме за промену теме на сајту.
   Своје боје/фонт можеш преписати у Изглед → Прилагоди → Додатни CSS, нпр.:
   .njg-docs{ --njg-hand:"Caveat",cursive; --njg-ink:#1d4ed8; }                                  */

.njg-docs{
  /* ---- светла тема (подразумевано) ---- */
  --njg-hand: inherit;                      /* фонт наслова и натписа: наследи се са сајта */
  --njg-ink: #3f5fd0;                       /* „хемијска оловка“: линкови, подвлаке */
  --njg-margin: rgba(224,80,80,.55);        /* црвена маргина */
  --njg-line: rgba(60,60,60,.25);
  --njg-soft: rgba(60,60,60,.08);
  --njg-paper: rgba(255,253,242,.75);
  --njg-c-doc:#3f5fd0; --njg-c-pdf:#d6403f; --njg-c-xls:#2b9348; --njg-c-ppt:#d9730d; --njg-c-drive:#178a5c; --njg-c-link:#6f6f6f;
  --njg-note-bg:#fff2a8; --njg-note-ink:#3a3008; --njg-tape:rgba(190,205,225,.65);

  max-width:100%; margin: 1.5rem auto 3rem;
  color: inherit; font-size: 1.6rem; line-height: 1.4;
}
/* ---- тамна тема ---- */
.njg-docs[data-njg-mode="dark"]{
  --njg-ink:#93a9ff; --njg-margin:rgba(255,125,125,.5);
  --njg-line:rgba(255,255,255,.22); --njg-soft:rgba(255,255,255,.08); --njg-paper:rgba(255,255,255,.045);
  --njg-c-doc:#8ea6ff; --njg-c-pdf:#ff8a86; --njg-c-xls:#63d68a; --njg-c-ppt:#ffab5c; --njg-c-drive:#5fd6a3; --njg-c-link:#b0b0b0;
  --njg-note-bg:#f3df85; --njg-tape:rgba(170,185,210,.55);
}
/* ако JS не ради, послужи се подешавањем прегледача */
@media (prefers-color-scheme: dark){
  .njg-docs:not([data-njg-mode]){
    --njg-ink:#93a9ff; --njg-margin:rgba(255,125,125,.5);
    --njg-line:rgba(255,255,255,.22); --njg-soft:rgba(255,255,255,.08); --njg-paper:rgba(255,255,255,.045);
    --njg-c-doc:#8ea6ff; --njg-c-pdf:#ff8a86; --njg-c-xls:#63d68a; --njg-c-ppt:#ffab5c; --njg-c-drive:#5fd6a3; --njg-c-link:#b0b0b0;
    --njg-note-bg:#f3df85; --njg-tape:rgba(170,185,210,.55);
  }
}

.njg-docs *, .njg-docs *::before, .njg-docs *::after{ box-sizing:border-box; }
.njg-docs [hidden]{ display:none !important; }

/* ---------- Залепљене белешке (истакнута документа) ---------- */
.njg-docs .njg-notes{ display:flex; flex-wrap:wrap; gap:2.2rem 1.6rem; margin:1.4rem 0 2.4rem .5rem; }
.njg-docs .njg-note{
  position:relative; /*flex:0 1 32rem;*/ max-width: 470px; margin:0; padding:1.7rem 1.6rem 1.5rem;
  background:var(--njg-note-bg); color:var(--njg-note-ink); transform:rotate(-1.2deg);
  box-shadow:0 1px 1px rgba(0,0,0,.14), 0 12px 20px -10px rgba(0,0,0,.45);
}
.njg-docs .njg-note:nth-child(even){ transform:rotate(1deg); }
.njg-docs .njg-note::before{
  content:""; position:absolute; top:-.95rem; left:50%; width:7.5rem; height:1.9rem;
  transform:translateX(-50%) rotate(2.5deg); background:var(--njg-tape); box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.njg-docs .njg-note__title{ margin:0 0 .35rem; padding:0; font-family:var(--njg-hand); font-size:1.9rem; line-height:1.1; font-weight:700; color:var(--njg-note-ink); }
.njg-docs .njg-note p{ margin:0 0 1.1rem; color:var(--njg-note-ink); }
.njg-docs a.njg-note__btn{
  display:inline-flex; align-items:center; gap:.55rem; padding:.55rem 1.1rem; color:var(--njg-note-ink); text-decoration:none;
  font-family:var(--njg-hand); font-size:1.6rem; font-weight:700; background:transparent;
  border:2px solid var(--njg-note-ink); border-radius:255px 15px 225px 15px / 15px 225px 15px 255px; transition:background .15s,color .15s;
}
.njg-docs a.njg-note__btn:hover{ background:var(--njg-note-ink); color:var(--njg-note-bg); }
.njg-docs a.njg-note__btn:focus-visible{ outline:3px solid var(--njg-note-ink); outline-offset:3px; }
.njg-docs .njg-note svg{ width:1.2rem; height:1.2rem; flex:none; }

/* ---------- Претрага и категорије ---------- */
.njg-docs .njg-tools{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:1rem 1.75rem; margin:0 0 .9rem; }
.njg-docs .njg-search{ position:relative; display:block; flex:1 1 15rem; max-width:22rem; }
.njg-docs .njg-search svg{ position:absolute; left:.25rem; top:50%; width:1.15rem; height:1.15rem; transform:translateY(-50%); opacity:.6; pointer-events:none; }
.njg-docs .njg-search input{
  width:100%; padding:.55rem .5rem .55rem 2rem; font-family:var(--njg-hand); font-size:1.5rem; color:inherit;
  background:transparent; border:0; border-bottom:2px solid var(--njg-line); border-radius:0; box-shadow:none; outline:0;
}
.njg-docs .njg-search input::placeholder{ color:inherit; opacity:.55; }
.njg-docs .njg-search input:focus{ border-bottom-color:var(--njg-ink); box-shadow:0 2px 0 var(--njg-ink); }
.njg-docs .njg-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; }
.njg-docs button.njg-tab{
  margin:0; padding:.3rem .95rem; font-family:var(--njg-hand); font-size:1.5rem; line-height:1.3; color:inherit; cursor:pointer;
  background:transparent; border:2px solid var(--njg-line); box-shadow:none; text-transform:none; letter-spacing:0;
  border-radius:255px 15px 225px 15px / 15px 225px 15px 255px; transition:background .15s,border-color .15s;
}
.njg-docs button.njg-tab:hover{ background:var(--njg-soft); color:inherit; }
.njg-docs button.njg-tab[aria-pressed="true"]{ color:var(--njg-ink); border-color:var(--njg-ink); background:var(--njg-soft); font-weight:700; }
.njg-docs button.njg-tab:focus-visible{ outline:2px solid var(--njg-ink); outline-offset:2px; }
.njg-docs .njg-count{ margin:0 0 1.1rem; font-family:var(--njg-hand); opacity:.75; }

/* ---------- Страна свеске ---------- */
.njg-docs .njg-sheet{
  position:relative; margin:0 0 1.75rem; padding:1.1rem 1rem .4rem 3.7rem;
  background:var(--njg-paper); border:1px solid var(--njg-line); border-radius:.5rem;
}
.njg-docs .njg-sheet::before{ content:""; position:absolute; top:0; bottom:0; left:2.7rem; width:2px; background:var(--njg-margin); }
.njg-docs .njg-sheet__title{
  margin:0 0 .4rem; padding:0; font-family:var(--njg-hand); font-size:clamp(1.6rem,3.2vw,2.1rem); line-height:1.2; font-weight:700; color:inherit;
  text-decoration:underline wavy var(--njg-ink); text-decoration-thickness:1.5px; text-underline-offset:.3em; text-decoration-skip-ink:none;
}
.njg-docs ul.njg-list{ list-style:none; margin:0; padding:0; }
.njg-docs ul.njg-list li{ margin:0; padding:0; border-bottom:1px solid var(--njg-line); }
.njg-docs ul.njg-list li::marker{ content:""; }

.njg-docs a.njg-doc{
  display:flex; align-items:center; gap:.9rem; min-height:3.4rem; margin:0 -.5rem; padding:.45rem .5rem;
  color:inherit; text-decoration:none; border-radius:.35rem; transition:background .15s;
}
.njg-docs a.njg-doc:hover{ background:var(--njg-soft); }
.njg-docs a.njg-doc:focus-visible{ outline:2px solid var(--njg-ink); outline-offset:1px; }
.njg-docs .njg-doc__name{ flex:1 1 auto; min-width:0; font-family:var(--njg-hand); font-size:1.6rem; line-height:1.25; }
.njg-docs a.njg-doc:hover .njg-doc__name{ text-decoration:underline; text-decoration-color:var(--njg-ink); text-decoration-thickness:2px; text-underline-offset:.22em; }
.njg-docs .njg-doc__get{ flex:none; display:inline-flex; align-items:center; gap:.4rem; color:var(--njg-ink); font-family:var(--njg-hand); font-size:1.5rem; white-space:nowrap; }
.njg-docs .njg-doc__get svg{ width:1.15rem; height:1.15rem; }

/* печат са врстом фајла */
.njg-docs .njg-stamp{
  --stamp:var(--njg-c-link); flex:none; width:4.1rem; padding:.25rem 0; text-align:center;
  font:800 .78rem/1.1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:.07em;
  color:var(--stamp); border:2px solid var(--stamp); outline:1px solid var(--stamp); outline-offset:-5px; border-radius:.3rem;
  transform:rotate(-3deg); opacity:.92;
}
.njg-docs li:nth-child(even) .njg-stamp{ transform:rotate(2deg); }
.njg-docs li:nth-child(3n) .njg-stamp{ transform:rotate(-1deg); }
.njg-docs .njg-stamp--doc{ --stamp:var(--njg-c-doc); }
.njg-docs .njg-stamp--pdf{ --stamp:var(--njg-c-pdf); }
.njg-docs .njg-stamp--xls{ --stamp:var(--njg-c-xls); }
.njg-docs .njg-stamp--ppt{ --stamp:var(--njg-c-ppt); }
.njg-docs .njg-stamp--drive{ --stamp:var(--njg-c-drive); }
.njg-docs .njg-stamp--link{ --stamp:var(--njg-c-link); }

.njg-docs .njg-empty{ padding:2rem 1rem; text-align:center; font-family:var(--njg-hand); font-size:1.5rem; }
.njg-docs .njg-empty button.njg-tab{ margin-top:.8rem; }

@media (max-width:560px){
  .njg-docs .njg-sheet{ padding:.9rem .6rem .3rem 2.4rem; }
  .njg-docs .njg-sheet::before{ left:1.75rem; }
  .njg-docs a.njg-doc{ gap:.65rem; }
  .njg-docs .njg-stamp{ width:3.6rem; }
  .njg-docs .njg-doc__get span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .njg-docs .njg-note{ transform:rotate(-.6deg); margin-right:.3rem; flex-basis:100%; }
  .njg-docs .njg-note:nth-child(even){ transform:rotate(.6deg); }
  .njg-note{display: block!important;}
}
@media (prefers-reduced-motion:reduce){ .njg-docs *{ transition:none !important; } }

.njg-sheet__title::after {display:none;}