html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* =========================================================
BIBLIOBOS - JAVNI KATALOG
========================================================= */
.catalog-page {
max-width: 1180px;
margin: 0 auto;
padding: 0 20px 60px;
}
/* HERO */
.catalog-hero {
margin-top: 30px;
margin-bottom: 25px;
border-radius: 18px;
background: #172554;
color: white;
overflow: hidden;
}
.catalog-hero-content {
padding: 48px 50px;
}
.catalog-eyebrow {
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 12px;
opacity: 0.75;
}
.catalog-hero h1 {
margin: 0 0 12px;
font-size: 42px;
font-weight: 700;
letter-spacing: -1px;
}
.catalog-hero p {
max-width: 720px;
margin: 0;
font-size: 17px;
line-height: 1.6;
opacity: 0.9;
}
/* TOOLBAR */
.catalog-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
margin-bottom: 20px;
padding: 20px 24px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 14px;
}
.catalog-result-info {
display: flex;
align-items: center;
gap: 15px;
}
.catalog-result-number {
font-size: 28px;
font-weight: 700;
color: #172554;
}
.catalog-result-title {
font-size: 15px;
font-weight: 600;
}
.catalog-result-subtitle {
margin-top: 3px;
font-size: 13px;
color: #6b7280;
}
/* PAGE SIZE */
.page-size {
display: flex;
align-items: center;
gap: 7px;
font-size: 14px;
color: #6b7280;
}
.page-size a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 36px;
border: 1px solid #d1d5db;
border-radius: 8px;
color: #374151;
text-decoration: none;
font-weight: 600;
transition: all 0.15s ease;
}
.page-size a:hover {
border-color: #172554;
color: #172554;
}
.page-size a.active {
background: #172554;
border-color: #172554;
color: white;
}
/* BOOK LIST */
.catalog-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* BOOK */
.catalog-book {
display: grid;
grid-template-columns: 55px 1fr auto;
align-items: center;
gap: 20px;
padding: 23px 25px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 14px;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.catalog-book:hover {
transform: translateY(-1px);
border-color: #c7d2fe;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}
/* MFN */
.catalog-book-number {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 10px;
background: #f3f4f6;
color: #6b7280;
font-size: 12px;
font-weight: 700;
}
/* BOOK CONTENT */
.catalog-book-main {
min-width: 0;
}
.catalog-book-author {
margin-bottom: 5px;
font-size: 14px;
font-weight: 600;
color: #4b5563;
}
.catalog-book-title {
margin: 0;
font-size: 21px;
line-height: 1.3;
font-weight: 700;
color: #111827;
}
.catalog-book-subtitle {
margin-top: 4px;
font-size: 14px;
font-style: italic;
color: #6b7280;
}
.catalog-book-publication {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-top: 10px;
font-size: 14px;
color: #6b7280;
}
.catalog-book-publication span:not(:last-child)::after {
content: " · ";
margin: 0 5px;
}
.catalog-book-type {
display: inline-block;
margin-top: 10px;
padding: 4px 9px;
border-radius: 6px;
background: #f3f4f6;
color: #6b7280;
font-size: 11px;
font-weight: 600;
}
/* DETAILS BUTTON */
.catalog-book-action a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid #d1d5db;
border-radius: 8px;
color: #172554;
background: white;
text-decoration: none;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
transition: all 0.15s ease;
}
.catalog-book-action a:hover {
background: #172554;
border-color: #172554;
color: white;
}
.catalog-book-action span {
font-size: 16px;
}
/* PAGINATION */
.catalog-pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #e5e7eb;
}
.pagination-button {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 15px;
border: 1px solid #d1d5db;
border-radius: 8px;
color: #374151;
background: white;
text-decoration: none;
font-size: 13px;
font-weight: 600;
}
.pagination-button:hover {
border-color: #172554;
color: #172554;
}
.pagination-button.disabled {
opacity: 0.4;
cursor: default;
}
.pagination-info {
display: flex;
align-items: center;
gap: 7px;
color: #6b7280;
font-size: 14px;
}
.pagination-info strong {
color: #111827;
}
/* MOBILE */
@media (max-width: 800px) {
.catalog-hero-content {
padding: 35px 25px;
}
.catalog-hero h1 {
font-size: 32px;
}
.catalog-toolbar {
flex-direction: column;
align-items: flex-start;
}
.catalog-book {
grid-template-columns: 45px 1fr;
}
.catalog-book-action {
grid-column: 2;
}
.catalog-pagination {
gap: 15px;
}
}
@media (max-width: 500px) {
.catalog-page {
padding-left: 12px;
padding-right: 12px;
}
.catalog-book {
grid-template-columns: 1fr;
gap: 12px;
}
.catalog-book-number {
width: 40px;
height: 32px;
}
.catalog-book-action {
grid-column: auto;
}
.catalog-book-action a {
width: 100%;
justify-content: center;
}
.catalog-pagination {
flex-wrap: wrap;
justify-content: center;
}
}
/* =========================================================
PRETRAGA KATALOGA
========================================================= */
.catalog-search {
margin-bottom: 20px;
padding: 20px 24px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 14px;
}
.search-main {
display: flex;
gap: 10px;
}
.search-main input[type="text"] {
flex: 1;
min-width: 0;
height: 48px;
padding: 0 16px;
border: 1px solid #d1d5db;
border-radius: 9px;
font-family: inherit;
font-size: 16px;
outline: none;
}
.search-main input[type="text"]:focus {
border-color: #172554;
box-shadow: 0 0 0 3px rgba(23, 37, 84, 0.08);
}
.search-main button {
height: 48px;
padding: 0 22px;
border: 0;
border-radius: 9px;
background: #172554;
color: white;
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.15s ease;
}
.search-main button:hover {
opacity: 0.9;
}
.search-options {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 14px;
color: #6b7280;
font-size: 13px;
}
.search-options label {
display: flex;
align-items: center;
gap: 5px;
color: #374151;
cursor: pointer;
}
.search-options input {
margin: 0;
}
/* MOBILE */
@media (max-width: 600px) {
.search-main {
flex-direction: column;
}
.search-main button {
width: 100%;
}
.search-options {
align-items: flex-start;
flex-direction: column;
gap: 9px;
}
}
/* =========================================================
BIBLIOBOS - NASLOVNA STRANA
========================================================= */
.home-page {
min-height: calc(100vh - 60px);
background: linear-gradient( 135deg, #f8fafc 0%, #eef2ff 48%, #f8fafc 100% );
}
/* =========================================================
HERO
========================================================= */
.home-hero {
position: relative;
overflow: hidden;
min-height: 650px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient( 135deg, #0f172a 0%, #172554 55%, #1e3a5f 100% );
color: white;
}
.home-hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1050px;
padding: 70px 30px 80px;
text-align: center;
}
/* =========================================================
BACKGROUND CIRCLES
========================================================= */
.home-hero-background {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.hero-circle {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-circle-1 {
width: 620px;
height: 620px;
top: -310px;
left: -180px;
}
.hero-circle-2 {
width: 800px;
height: 800px;
right: -400px;
bottom: -450px;
}
.hero-circle-3 {
width: 360px;
height: 360px;
right: 12%;
top: -180px;
}
/* =========================================================
LIBRARY NAME
========================================================= */
.home-library-name {
font-size: 13px;
font-weight: 700;
letter-spacing: 4px;
opacity: 0.7;
margin-bottom: 5px;
}
.home-library-title {
font-size: 25px;
font-weight: 700;
letter-spacing: 3px;
}
.home-library-place {
margin-top: 4px;
font-size: 12px;
font-weight: 600;
letter-spacing: 5px;
opacity: 0.6;
}
/* =========================================================
BOOK SYMBOL
========================================================= */
.home-book-symbol {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 4px;
height: 42px;
margin: 32px 0 25px;
}
.home-book-symbol span {
display: block;
width: 9px;
border-radius: 2px 2px 0 0;
background: rgba(255, 255, 255, 0.75);
}
.home-book-symbol span:nth-child(1) {
height: 30px;
}
.home-book-symbol span:nth-child(2) {
height: 42px;
}
.home-book-symbol span:nth-child(3) {
height: 35px;
}
/* =========================================================
HERO TITLE
========================================================= */
.home-hero h1 {
margin: 0;
font-size: 52px;
line-height: 1.1;
font-weight: 700;
letter-spacing: -1.5px;
}
.home-description {
max-width: 650px;
margin: 18px auto 35px;
font-size: 17px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
}
/* =========================================================
MAIN BUTTONS
========================================================= */
.home-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
max-width: 980px;
margin: 0 auto;
}
.home-action {
display: flex;
align-items: center;
min-height: 92px;
padding: 16px 18px;
gap: 14px;
text-align: left;
color: white;
text-decoration: none;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 14px;
backdrop-filter: blur(8px);
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.home-action:hover {
transform: translateY(-4px);
color: white;
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.3);
text-decoration: none;
}
.home-action-primary {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.3);
}
.home-action-primary:hover {
background: rgba(255, 255, 255, 0.22);
}
/* ICON */
.home-action-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.12);
font-size: 22px;
}
.home-action strong {
display: block;
font-size: 12px;
letter-spacing: 0.5px;
}
.home-action small {
display: block;
margin-top: 5px;
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
}
.home-action-arrow {
margin-left: auto;
font-size: 21px;
opacity: 0.6;
transition: transform 0.2s ease;
}
.home-action:hover .home-action-arrow {
transform: translateX(4px);
opacity: 1;
}
/* =========================================================
STATISTICS
========================================================= */
.home-statistics {
display: flex;
justify-content: center;
align-items: center;
max-width: 900px;
margin: 0 auto;
padding: 28px 20px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 0 0 18px 18px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.home-stat {
min-width: 190px;
text-align: center;
}
.home-stat-number {
font-size: 25px;
font-weight: 700;
color: #172554;
}
.home-stat-label {
margin-top: 3px;
font-size: 12px;
color: #6b7280;
}
.home-stat-divider {
width: 1px;
height: 38px;
background: #e5e7eb;
}
/* =========================================================
INTRO
========================================================= */
.home-intro {
max-width: 700px;
margin: 40px auto 0;
padding: 0 25px 50px;
text-align: center;
}
.home-intro-line {
width: 45px;
height: 3px;
margin: 0 auto 17px;
border-radius: 3px;
background: #172554;
}
.home-intro p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: #6b7280;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.home-actions {
grid-template-columns: 1fr;
max-width: 600px;
}
.home-action {
min-height: 78px;
}
.home-hero {
min-height: auto;
}
}
@media (max-width: 600px) {
.home-hero-content {
padding: 50px 18px 55px;
}
.home-library-name {
font-size: 10px;
letter-spacing: 2px;
}
.home-library-title {
font-size: 20px;
letter-spacing: 2px;
}
.home-library-place {
font-size: 10px;
letter-spacing: 3px;
}
.home-hero h1 {
font-size: 38px;
}
.home-description {
font-size: 15px;
}
.home-statistics {
flex-direction: column;
gap: 18px;
border-radius: 0;
}
.home-stat-divider {
width: 60px;
height: 1px;
}
}
/* =========================================================
BIBLIO BOSS +
GLAVNI IZGLED
========================================================= */
html {
min-height: 100%;
}
body {
min-height: 100vh;
margin: 0;
background: #f6f8fb;
color: #172033;
font-family: "Segoe UI", Arial, sans-serif;
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
/* =========================================================
HEADER
========================================================= */
.main-header {
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.header-inner {
max-width: 1280px;
min-height: 92px;
margin: 0 auto;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.header-brand {
display: flex;
align-items: center;
gap: 16px;
color: #172033;
text-decoration: none;
}
.header-brand:hover {
color: #172033;
text-decoration: none;
}
.header-logo {
width: 82px;
height: auto;
object-fit: contain;
}
.header-brand-text {
border-left: 1px solid #e2e8f0;
padding-left: 16px;
}
.header-program {
font-size: 21px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.5px;
color: #111827;
}
.header-library {
margin-top: 7px;
font-size: 13px;
color: #475569;
}
.header-place {
margin-top: 2px;
font-size: 11px;
color: #64748b;
letter-spacing: 2px;
}
/* =========================================================
NAVIGATION
========================================================= */
.main-navigation a {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 13px;
border-radius: 7px;
color: #475569;
text-decoration: none;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
transition: background 0.15s ease, color 0.15s ease;
}
.main-navigation a:hover {
color: #172554;
background: #f1f5f9;
}
/* =========================================================
HOME
========================================================= */
.home-page {
min-height: calc(100vh - 92px);
background: linear-gradient( 180deg, #f8fafc 0%, #f3f6fa 100% );
}
/* =========================================================
UVOD
========================================================= */
.home-introduction {
padding: 65px 25px 42px;
text-align: center;
}
.home-introduction-inner {
max-width: 820px;
margin: 0 auto;
}
.home-kicker {
margin-bottom: 13px;
color: #64748b;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
}
.home-introduction h1 {
margin: 0;
color: #101827;
font-size: 48px;
line-height: 1;
font-weight: 750;
letter-spacing: -1.5px;
}
.home-library-name {
margin-top: 13px;
color: #334155;
font-size: 19px;
font-weight: 500;
}
.home-city {
margin-top: 4px;
color: #64748b;
font-size: 13px;
letter-spacing: 2px;
}
.home-separator {
width: 55px;
height: 3px;
margin: 25px auto 21px;
border-radius: 5px;
background: #172554;
}
.home-introduction p {
max-width: 700px;
margin: 0 auto;
color: #64748b;
font-size: 16px;
line-height: 1.7;
}
/* =========================================================
STATISTIKA
========================================================= */
.catalog-statistics {
max-width: 760px;
margin: 0 auto;
padding: 24px 28px;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 7px 24px rgba(15, 23, 42, 0.04);
}
.catalog-stat {
min-width: 0;
text-align: center;
}
.catalog-stat-title {
min-height: 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #64748b;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
line-height: 1.3;
}
.catalog-stat-language {
white-space: nowrap;
}
.catalog-stat-flag {
width: 22px;
height: 15px;
object-fit: cover;
border-radius: 2px;
display: block;
}
.catalog-stat-number {
margin-top: 8px;
color: #172f63;
font-size: 26px;
font-weight: 750;
line-height: 1.1;
}
.catalog-stat-secondary {
margin-top: 5px;
color: #172033;
font-size: 12px;
line-height: 1.4;
}
.catalog-stat-line {
width: 1px;
height: 48px;
background: #e2e8f0;
}
/* =========================================================
GLAVNE KARTICE
========================================================= */
.home-options {
padding: 30px 25px 0;
}
.home-options-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.home-card {
position: relative;
min-height: 190px;
display: flex;
flex-direction: column;
padding: 27px 25px 23px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 15px;
color: #172033;
text-decoration: none;
overflow: hidden;
box-shadow: 0 7px 24px rgba(15, 23, 42, 0.04);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.home-card:hover {
color: #172033;
text-decoration: none;
transform: translateY(-4px);
border-color: #cbd5e1;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09);
}
/* PRVA KARTICA */
.home-card-search {
background: linear-gradient( 145deg, #172554 0%, #1e3a5f 100% );
border-color: #172554;
color: white;
}
.home-card-search:hover {
color: white;
border-color: #172554;
}
/* IKONA */
.home-card-icon {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 21px;
border-radius: 11px;
background: #f1f5f9;
color: #172554;
}
.home-card-search .home-card-icon {
background: rgba(255, 255, 255, 0.13);
color: white;
}
.home-card-icon svg {
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* SADRŽAJ */
.home-card-content {
padding-right: 30px;
}
.home-card h2 {
margin: 0;
font-size: 15px;
line-height: 1.3;
font-weight: 750;
letter-spacing: 0.3px;
}
.home-card p {
margin: 9px 0 0;
color: #64748b;
font-size: 13px;
line-height: 1.55;
}
.home-card-search p {
color: rgba(255, 255, 255, 0.7);
}
/* STRELICA */
.home-card-arrow {
position: absolute;
right: 22px;
bottom: 19px;
font-size: 21px;
color: #94a3b8;
transition: transform 0.2s ease;
}
.home-card-search .home-card-arrow {
color: rgba(255, 255, 255, 0.7);
}
.home-card:hover .home-card-arrow {
transform: translateX(5px);
color: #172554;
}
.home-card-search:hover .home-card-arrow {
color: white;
}
/* =========================================================
ZAVRSNI TEKST
========================================================= */
.home-description {
max-width: 720px;
margin: 34px auto 0;
padding: 0 25px 45px;
text-align: center;
}
.home-description p {
margin: 0;
color: #7b8798;
font-size: 13px;
line-height: 1.7;
}
/* =========================================================
FOOTER
========================================================= */
.main-footer {
background: #101827;
color: rgba(255, 255, 255, 0.55);
font-size: 11px;
}
.footer-inner {
max-width: 1280px;
min-height: 58px;
margin: 0 auto;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.main-footer strong {
color: rgba(255, 255, 255, 0.8);
font-weight: 600;
}
/* =========================================================
MOBILNI PRIKAZ
========================================================= */
@media (max-width: 900px) {
.header-inner {
min-height: auto;
padding: 18px 20px;
flex-direction: column;
gap: 15px;
}
.main-navigation {
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
.home-options-inner {
grid-template-columns: 1fr;
max-width: 600px;
}
}
@media (max-width: 600px) {
.header-brand {
width: 100%;
justify-content: center;
}
.header-logo {
width: 65px;
}
.header-brand-text {
padding-left: 12px;
}
.header-program {
font-size: 18px;
}
.header-library {
font-size: 11px;
}
.main-navigation {
gap: 2px;
}
.main-navigation a {
padding: 0 8px;
font-size: 9px;
}
.home-introduction {
padding: 45px 18px 30px;
}
.home-introduction h1 {
font-size: 38px;
}
.home-library-name {
font-size: 16px;
}
.catalog-statistics {
margin: 0 15px;
padding: 20px 15px;
}
.catalog-stat-number {
font-size: 25px;
}
.catalog-stat-label {
font-size: 9px;
letter-spacing: 1px;
}
.home-options {
padding: 22px 15px 0;
}
.home-card {
min-height: 170px;
}
.footer-inner {
min-height: auto;
padding: 18px 20px;
flex-direction: column;
justify-content: center;
text-align: center;
}
}
/* =========================================================
PRETRAGA KATALOGA
========================================================= */
.search-page {
max-width: 1100px;
margin: 0 auto;
padding: 55px 25px 70px;
}
/* HEADER */
.search-page-header {
text-align: center;
margin-bottom: 30px;
}
.search-page-kicker {
margin-bottom: 10px;
color: #64748b;
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
}
.search-page-header h1 {
margin: 0;
color: #172033;
font-size: 36px;
font-weight: 750;
}
.search-page-header p {
max-width: 650px;
margin: 12px auto 0;
color: #64748b;
font-size: 14px;
line-height: 1.6;
}
/* SEARCH PANEL */
.catalog-search-panel {
padding: 25px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.045);
}
.catalog-search-main {
display: flex;
gap: 10px;
}
.catalog-search-main input {
flex: 1;
min-width: 0;
height: 50px;
padding: 0 16px;
border: 1px solid #cbd5e1;
border-radius: 9px;
color: #172033;
font-family: inherit;
font-size: 15px;
outline: none;
}
.catalog-search-main input:focus {
border-color: #172554;
box-shadow: 0 0 0 3px rgba(23, 37, 84, 0.08);
}
.catalog-search-main button {
height: 50px;
padding: 0 24px;
border: 0;
border-radius: 9px;
background: #172554;
color: white;
font-family: inherit;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.catalog-search-main button:hover {
background: #1e3a5f;
}
/* POLJA */
.catalog-search-fields {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 13px;
margin-top: 18px;
color: #64748b;
font-size: 12px;
}
.search-fields-label {
font-weight: 700;
color: #475569;
}
.catalog-search-fields label {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
color: #475569;
}
.catalog-search-fields input {
margin: 0;
accent-color: #172554;
}
/* UPUTSTVO */
.search-help {
margin-top: 17px;
padding-top: 15px;
border-top: 1px solid #eef2f7;
color: #7b8798;
font-size: 12px;
line-height: 1.6;
}
/* REZULTATI */
.search-results {
margin-top: 25px;
}
.search-results-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 4px 13px;
color: #64748b;
font-size: 13px;
}
.search-results-header strong {
color: #172554;
}
.search-results-page {
font-size: 12px;
}
.search-result-list {
display: flex;
flex-direction: column;
gap: 11px;
}
/* REZULTAT */
.search-result-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
padding: 21px 23px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 13px;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.search-result-card:hover {
transform: translateY(-2px);
border-color: #cbd5e1;
box-shadow: 0 9px 25px rgba(15, 23, 42, 0.06);
}
.search-result-main {
min-width: 0;
}
.search-result-author {
margin-bottom: 5px;
color: #64748b;
font-size: 13px;
font-weight: 650;
}
.search-result-card h2 {
margin: 0;
color: #172033;
font-size: 19px;
line-height: 1.35;
font-weight: 700;
}
.search-result-subtitle {
margin-top: 4px;
color: #64748b;
font-size: 13px;
font-style: italic;
}
.search-result-publication {
display: flex;
flex-wrap: wrap;
margin-top: 9px;
color: #7b8798;
font-size: 12px;
}
.search-result-publication span:not(:last-child)::after {
content: " · ";
margin: 0 5px;
}
/* DETALJI */
.search-result-action a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 13px;
border: 1px solid #cbd5e1;
border-radius: 8px;
color: #172554;
background: white;
text-decoration: none;
white-space: nowrap;
font-size: 10px;
font-weight: 750;
}
.search-result-action a:hover {
color: white;
background: #172554;
border-color: #172554;
}
/* NEMA REZULTATA */
.search-no-results {
padding: 50px 25px;
text-align: center;
background: white;
border: 1px solid #e2e8f0;
border-radius: 14px;
}
.search-no-results h2 {
margin: 0 0 10px;
color: #172033;
font-size: 22px;
}
.search-no-results p {
margin: 5px 0;
color: #64748b;
font-size: 13px;
}
/* PAGINACIJA */
.search-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 25px;
}
.search-pagination a {
padding: 9px 14px;
border: 1px solid #cbd5e1;
border-radius: 8px;
color: #475569;
background: white;
text-decoration: none;
font-size: 11px;
font-weight: 700;
}
.search-pagination a:hover {
color: #172554;
border-color: #172554;
}
.search-pagination span {
color: #64748b;
font-size: 12px;
}
/* MOBILNI */
@media (max-width: 700px) {
.search-page {
padding: 40px 15px 55px;
}
.search-page-header h1 {
font-size: 30px;
}
.catalog-search-main {
flex-direction: column;
}
.catalog-search-main button {
width: 100%;
}
.catalog-search-fields {
flex-direction: column;
align-items: flex-start;
}
.search-result-card {
flex-direction: column;
align-items: flex-start;
}
.search-result-action {
width: 100%;
}
.search-result-action a {
width: 100%;
justify-content: center;
}
.search-results-header {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.catalog-slip-description,
.catalog-slip-udk,
.catalog-slip-isbn {
margin-left: 16px;
}
}
/* =========================================================
DETAILS / CATALOG RECORD
========================================================= */
.details-page {
max-width: 1100px;
margin: 0 auto;
padding: 55px 24px 80px;
}
.details-header {
margin-bottom: 32px;
}
.details-kicker {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
color: #64748b;
margin-bottom: 10px;
}
.details-header h1 {
margin: 0 0 10px;
font-size: 2rem;
font-weight: 800;
color: #172033;
}
.details-header p {
margin: 0;
color: #64748b;
font-size: 1rem;
}
.catalog-record {
background: #ffffff;
border: 1px solid #dfe5ec;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.record-title-block {
padding: 32px 36px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.record-author {
margin-bottom: 8px;
color: #52657d;
font-size: 1rem;
font-weight: 700;
}
.record-title-block h2 {
margin: 0;
color: #172033;
font-size: 1.75rem;
line-height: 1.3;
font-weight: 800;
}
.record-subtitle {
margin-top: 8px;
color: #64748b;
font-size: 1.05rem;
}
.record-section {
padding: 28px 36px;
border-bottom: 1px solid #e5e7eb;
}
.record-section h3 {
margin: 0 0 20px;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.1em;
color: #475569;
}
.record-fields {
display: flex;
flex-direction: column;
gap: 0;
}
.record-field {
display: grid;
grid-template-columns: 210px 1fr;
gap: 24px;
padding: 13px 0;
border-bottom: 1px solid #edf1f5;
}
.record-field:last-child {
border-bottom: 0;
}
.record-label {
color: #64748b;
font-size: 0.9rem;
font-weight: 700;
}
.record-value {
color: #1e293b;
font-size: 0.98rem;
line-height: 1.5;
}
.record-udk {
font-weight: 700;
}
.record-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.record-tag {
display: inline-block;
padding: 7px 12px;
border-radius: 8px;
background: #eef3f8;
color: #334155;
font-size: 0.9rem;
}
.record-note {
padding: 16px 18px;
background: #f8fafc;
border-left: 4px solid #94a3b8;
color: #475569;
line-height: 1.6;
}
.copies-table {
border: 1px solid #dfe5ec;
border-radius: 10px;
overflow: hidden;
}
.copies-header,
.copies-row {
display: grid;
grid-template-columns: 1fr 1fr;
}
.copies-header {
background: #f1f5f9;
color: #475569;
font-size: 0.8rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.copies-header > div,
.copies-row > div {
padding: 13px 16px;
}
.copies-row {
border-top: 1px solid #e5e7eb;
}
.copy-inventory {
font-weight: 700;
color: #1e293b;
}
.copy-location {
color: #475569;
}
.record-no-copies {
padding: 18px;
background: #f8fafc;
color: #64748b;
border-radius: 8px;
}
.record-system-info {
padding: 18px 36px;
background: #f8fafc;
display: flex;
justify-content: flex-end;
}
.record-system-info div {
display: flex;
align-items: center;
gap: 10px;
color: #64748b;
font-size: 0.82rem;
}
.record-system-info strong {
color: #334155;
font-family: Consolas, monospace;
}
.details-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.details-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 18px;
border-radius: 9px;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #334155;
text-decoration: none;
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.02em;
transition: 0.2s ease;
}
.details-button:hover {
background: #f1f5f9;
color: #172033;
text-decoration: none;
}
.details-button.primary {
background: #1e3a5f;
border-color: #1e3a5f;
color: #ffffff;
}
.details-button.primary:hover {
background: #294d78;
color: #ffffff;
}
@media (max-width: 700px) {
.details-page {
padding: 35px 16px 60px;
}
.details-header h1 {
font-size: 1.5rem;
}
.record-title-block,
.record-section {
padding: 24px 20px;
}
.record-title-block h2 {
font-size: 1.4rem;
}
.record-field {
grid-template-columns: 1fr;
gap: 5px;
}
.copies-header,
.copies-row {
grid-template-columns: 1fr;
}
.copies-header > div:last-child {
display: none;
}
.copies-row > div:last-child {
padding-top: 0;
}
.record-system-info {
padding: 16px 20px;
}
.details-actions {
flex-direction: column;
}
.details-button {
width: 100%;
}
}
/* =========================================================
RECORD TABS
========================================================= */
.record-tabs {
display: flex;
gap: 4px;
margin-bottom: -1px;
position: relative;
z-index: 2;
}
.record-tab {
border: 1px solid #dbe2ea;
border-bottom: none;
background: #eef2f6;
color: #64748b;
padding: 15px 24px;
border-radius: 10px 10px 0 0;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.02em;
cursor: pointer;
transition: 0.2s ease;
}
.record-tab:hover {
background: #e5ebf2;
color: #334155;
}
.record-tab.active {
background: #ffffff;
color: #1e3a5f;
border-color: #dfe5ec;
}
.record-tab-content {
display: none;
}
.record-tab-content.active {
display: block;
}
/* =========================================================
BASIC CATALOG DESCRIPTION
========================================================= */
.basic-record {
padding: 36px;
}
.basic-record-label {
margin-bottom: 18px;
color: #64748b;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
}
.catalog-slip {
padding: 28px 32px;
background: #fff;
border: 1px solid #e1e6ec;
border-radius: 10px;
color: #1e293b;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.08rem;
line-height: 1.8;
box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
}
.catalog-note {
margin-top: 26px;
padding: 16px 20px;
color: #475569;
border-left: 4px solid #94a3b8;
background: #f8fafc;
line-height: 1.6;
}
.catalog-udk {
margin-top: 22px;
font-family: Consolas, monospace;
font-weight: 700;
color: #334155;
}
.catalog-isbn {
margin-top: 8px;
color: #475569;
font-size: 0.95rem;
}
/* =========================================================
MOBILE TABS
========================================================= */
@media (max-width: 700px) {
.record-tabs {
display: flex;
overflow-x: auto;
gap: 3px;
}
.record-tab {
flex: 1 0 auto;
padding: 13px 15px;
font-size: 0.74rem;
white-space: nowrap;
}
.basic-record {
padding: 24px 20px;
}
.catalog-slip {
padding: 20px;
font-size: 1rem;
line-height: 1.7;
}
}
.catalog-slip {
padding: 28px 32px;
background: #fff;
border: 1px solid #e1e6ec;
border-radius: 10px;
color: #1e293b;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.08rem;
line-height: 1.8;
box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
}
.catalog-slip-author {
margin-bottom: 18px;
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
font-size: 1.08rem;
}
.catalog-slip-description {
margin-left: 32px;
}
.catalog-slip-udk {
margin-top: 24px;
margin-left: 32px;
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
}
.catalog-slip-isbn {
margin-top: 8px;
margin-left: 32px;
font-family: Georgia, "Times New Roman", serif;
}
/* =========================================================
BROWSE PAGE
========================================================= */
.browse-page {
max-width: 1100px;
margin: 0 auto;
padding: 55px 25px 70px;
}
.browse-intro {
text-align: center;
margin-bottom: 30px;
}
.browse-kicker {
margin-bottom: 10px;
color: #64748b;
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
}
.browse-intro h1 {
margin: 0;
color: #172033;
font-size: 36px;
font-weight: 750;
}
.browse-intro p {
max-width: 650px;
margin: 12px auto 0;
color: #64748b;
font-size: 14px;
line-height: 1.6;
}
.browse-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 16px 20px;
margin-bottom: 20px;
background: #ffffff;
border: 1px solid #dfe5ec;
border-radius: 12px;
}
.browse-total {
display: flex;
align-items: baseline;
gap: 8px;
color: #64748b;
}
.browse-total strong {
color: #1e3a5f;
font-size: 1.2rem;
}
.browse-page-size {
display: flex;
align-items: center;
gap: 7px;
color: #64748b;
font-size: 0.88rem;
}
.browse-page-size a {
min-width: 34px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #cbd5e1;
border-radius: 7px;
background: #fff;
color: #475569;
text-decoration: none;
font-weight: 700;
}
.browse-page-size a:hover {
background: #f1f5f9;
}
.browse-page-size a.active {
background: #1e3a5f;
border-color: #1e3a5f;
color: #fff;
}
.browse-results {
display: flex;
flex-direction: column;
gap: 12px;
}
.browse-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 24px;
background: #ffffff;
border: 1px solid #dfe5ec;
border-radius: 12px;
transition: 0.2s ease;
}
.browse-card:hover {
border-color: #c5d2df;
box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06);
}
.browse-card-main {
min-width: 0;
}
.browse-author {
margin-bottom: 5px;
color: #52657d;
font-size: 0.88rem;
font-weight: 700;
}
.browse-card h2 {
margin: 0;
color: #172033;
font-size: 1.1rem;
line-height: 1.4;
}
.browse-subtitle {
margin-top: 5px;
color: #64748b;
font-size: 0.92rem;
}
.browse-publication {
display: flex;
flex-wrap: wrap;
gap: 5px 16px;
margin-top: 10px;
color: #64748b;
font-size: 0.84rem;
}
.browse-card-action {
flex-shrink: 0;
}
.browse-card-action a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 8px;
background: #1e3a5f;
color: #fff;
text-decoration: none;
font-size: 0.76rem;
font-weight: 800;
}
.browse-card-action a:hover {
background: #294d78;
color: #fff;
}
.browse-empty {
padding: 45px 25px;
text-align: center;
background: #fff;
border: 1px solid #dfe5ec;
border-radius: 12px;
}
.browse-empty h2 {
margin: 0 0 8px;
color: #334155;
font-size: 1.25rem;
}
.browse-empty p {
margin: 0;
color: #64748b;
}
.browse-pagination {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 28px;
}
.browse-pagination a,
.browse-pagination span {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 14px;
border-radius: 8px;
font-size: 0.78rem;
font-weight: 800;
}
.browse-pagination a {
border: 1px solid #cbd5e1;
background: #fff;
color: #334155;
text-decoration: none;
}
.browse-pagination a:hover {
background: #f1f5f9;
}
.browse-pagination span {
color: #64748b;
}
@media (max-width: 700px) {
.browse-page {
padding: 35px 16px 60px;
}
.browse-toolbar {
align-items: flex-start;
flex-direction: column;
}
.browse-card {
align-items: flex-start;
flex-direction: column;
}
.browse-card-action {
width: 100%;
}
.browse-card-action a {
width: 100%;
justify-content: center;
}
.browse-pagination {
gap: 6px;
}
}
/* =========================================================
БИБЛИОТЕКАРИ – ДУГМЕ У ЗАГЛАВЉУ
========================================================= */
.nav-librarians {
display: inline-flex !important;
align-items: center;
justify-content: center;
margin-left: 14px;
padding: 9px 15px !important;
border: 1px solid #172554 !important;
border-radius: 7px;
background: #172554 !important;
color: #ffffff !important;
font-size: 10px !important;
font-weight: 750 !important;
letter-spacing: 0.3px;
text-decoration: none !important;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-librarians:hover {
background: #1e3a5f !important;
border-color: #1e3a5f !important;
color: #ffffff !important;
text-decoration: none !important;
transform: translateY(-1px);
box-shadow: 0 5px 14px rgba(23, 37, 84, 0.18);
}
/* =========================================================
БИБЛИОТЕКАРИ – ПОЧЕТНА СТРАНИЦА
========================================================= */
.home-card-librarians {
border-color: #d7e4f5;
background: #ffffff;
}
.home-card-librarians:hover {
border-color: #4b91e8;
box-shadow: 0 14px 30px rgba(28, 73, 125, 0.10);
transform: translateY(-2px);
}
.home-card-librarians .home-card-icon {
background: #edf4fc;
color: #173b72;
}
.home-card-librarians .home-card-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-card-librarians h2 {
color: #172033;
}
.home-card-librarians p {
color: #64748b;
}
.home-card-librarians .home-card-arrow {
color: #173b72;
}
/* =========================================================
АДМИНИСТРАЦИЈА
========================================================= */
.admin-page {
max-width: 1180px;
margin: 0 auto;
padding: 42px 30px 70px;
}
.admin-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: 32px;
}
.admin-kicker {
margin-bottom: 8px;
color: #6880a0;
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
}
.admin-header h1 {
margin: 0;
color: #172033;
font-size: 36px;
line-height: 1.1;
font-weight: 750;
}
.admin-header p {
margin: 10px 0 0;
color: #64748b;
font-size: 14px;
}
.admin-user {
min-width: 180px;
padding: 13px 18px;
background: #edf4fc;
border-radius: 12px;
}
.admin-user span {
display: block;
margin-bottom: 4px;
color: #6b7f99;
font-size: 10px;
}
.admin-user strong {
color: #173b72;
font-size: 14px;
}
/* =========================================================
АДМИН КАРТИЦЕ
========================================================= */
.admin-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.admin-card {
position: relative;
min-height: 230px;
padding: 25px;
border: 1px solid #dce6f2;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(25, 54, 91, 0.05);
text-decoration: none;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.admin-card:not(.admin-card-disabled):hover {
transform: translateY(-2px);
border-color: #4b91e8;
box-shadow: 0 14px 30px rgba(28, 73, 125, 0.10);
}
.admin-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: 20px;
border-radius: 11px;
background: #eaf3fd;
color: #2c8eea;
font-size: 23px;
font-weight: 700;
}
.admin-card h2 {
margin: 0 0 9px;
color: #172033;
font-size: 16px;
font-weight: 750;
letter-spacing: .2px;
}
.admin-card p {
max-width: 280px;
margin: 0;
color: #64748b;
font-size: 13px;
line-height: 1.55;
}
.admin-card-link {
position: absolute;
left: 25px;
bottom: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 82px;
height: 34px;
padding: 0 14px;
border-radius: 7px;
background: #173f78;
color: #ffffff;
font-size: 10px;
font-weight: 700;
letter-spacing: .7px;
}
.admin-card-disabled {
background: #f7f9fc;
box-shadow: none;
}
.admin-card-disabled .admin-card-icon {
background: #edf1f6;
color: #8ea0b8;
}
.admin-card-disabled h2 {
color: #5f6d7f;
}
.admin-card-disabled .admin-card-link {
background: #91a3bb;
}
/* =========================================================
АДМИН КОНТРОЛЕ
========================================================= */
.admin-footer-actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 28px;
}
.admin-back {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 16px;
border: 1px solid #9eb5d1;
border-radius: 7px;
background: #ffffff;
color: #173f78;
font-size: 11px;
font-weight: 700;
text-decoration: none;
letter-spacing: .4px;
}
.admin-back:hover {
border-color: #4b91e8;
background: #f5f9fe;
color: #173f78;
}
.admin-logout {
min-height: 38px;
padding: 0 17px;
border: 1px solid #e57373;
border-radius: 7px;
background: #ffffff;
color: #d94b4b;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.admin-logout:hover {
background: #fff6f6;
}
/* =========================================================
УВОЗ BIBLIO БАЗЕ
========================================================= */
.admin-import-box {
padding: 30px;
border: 1px solid #dce6f2;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(25, 54, 91, 0.05);
}
.admin-import-info {
margin-bottom: 26px;
padding: 18px 20px;
border-radius: 10px;
background: #eef6ff;
}
.admin-import-info h2 {
margin: 0 0 7px;
color: #172033;
font-size: 16px;
font-weight: 750;
}
.admin-import-info p {
margin: 0;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
.admin-file-field {
display: grid;
grid-template-columns: 150px minmax(250px, 1fr);
align-items: center;
column-gap: 18px;
row-gap: 5px;
padding: 14px 0;
border-bottom: 1px solid #edf1f6;
}
.admin-file-field:last-of-type {
border-bottom: 0;
}
.admin-file-field label {
color: #173b72;
font-size: 12px;
font-weight: 750;
}
.admin-file-field input[type="file"] {
width: 100%;
padding: 7px;
border: 1px solid #d5e0ec;
border-radius: 7px;
background: #ffffff;
font-size: 12px;
}
.admin-file-field > span:not(.field-validation-error) {
grid-column: 2;
color: #8190a3;
font-size: 11px;
}
.admin-import-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 25px;
}
.admin-login-button {
min-height: 40px;
padding: 0 20px;
border: 0;
border-radius: 7px;
background: #173f78;
color: #ffffff;
font-size: 11px;
font-weight: 750;
letter-spacing: .5px;
cursor: pointer;
}
.admin-login-button:hover {
background: #22538f;
}
.admin-import-message {
margin-top: 18px;
padding: 12px 15px;
border-radius: 8px;
background: #eef6ff;
color: #315b88;
font-size: 12px;
}
/* =========================================================
ПРИЈАВА БИБЛИОТЕКАРА
========================================================= */
.admin-login-page {
min-height: calc(100vh - 180px);
display: flex;
align-items: center;
justify-content: center;
padding: 50px 25px;
}
.admin-login-box {
width: 100%;
max-width: 430px;
padding: 36px;
border: 1px solid #dce6f2;
border-radius: 15px;
background: #ffffff;
box-shadow: 0 14px 35px rgba(25, 54, 91, 0.08);
}
.admin-login-kicker {
margin-bottom: 9px;
color: #6880a0;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.admin-login-box h1 {
margin: 0;
color: #172033;
font-size: 24px;
font-weight: 750;
}
.admin-login-description {
margin: 10px 0 28px;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
.admin-login-field {
margin-bottom: 18px;
}
.admin-login-field label {
display: block;
margin-bottom: 7px;
color: #334155;
font-size: 12px;
font-weight: 700;
}
.admin-login-field input {
width: 100%;
height: 42px;
padding: 0 12px;
border: 1px solid #d4dfeb;
border-radius: 7px;
background: #ffffff;
color: #172033;
font-size: 13px;
outline: none;
}
.admin-login-field input:focus {
border-color: #4b91e8;
box-shadow: 0 0 0 3px rgba(75, 145, 232, 0.10);
}
.admin-login-error {
margin-bottom: 18px;
padding: 11px 13px;
border-radius: 7px;
background: #fff2f2;
color: #c44747;
font-size: 12px;
}
.admin-login-box .admin-login-button {
width: 100%;
}
.admin-login-back {
display: block;
margin-top: 20px;
color: #527298;
font-size: 11px;
font-weight: 600;
text-align: center;
text-decoration: none;
}
.admin-login-back:hover {
color: #173f78;
}
/* Библиотекари */
.admin-content {
margin-top: 30px;
}
.admin-section-header {
margin-bottom: 20px;
}
.admin-section-header h2 {
margin: 0 0 7px;
color: #172033;
font-size: 20px;
font-weight: 750;
}
.admin-section-header p {
margin: 0;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
.admin-add-user {
margin-bottom: 30px;
padding: 24px 26px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 7px 24px rgba(15, 23, 42, 0.04);
}
.admin-add-user h2 {
margin: 0 0 7px;
color: #172033;
font-size: 19px;
font-weight: 750;
}
.admin-add-user > p {
margin: 0 0 22px;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
.admin-user-form {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 15px;
align-items: end;
}
.admin-form-group {
display: flex;
flex-direction: column;
gap: 7px;
}
.admin-form-group label {
color: #475569;
font-size: 11px;
font-weight: 700;
}
.admin-form-group input {
width: 100%;
box-sizing: border-box;
height: 42px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 13px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-form-group input:focus {
border-color: #334e68;
box-shadow: 0 0 0 3px rgba(51, 78, 104, 0.10);
}
.admin-form-group select {
width: 100%;
box-sizing: border-box;
height: 42px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 13px;
outline: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-form-group select:focus {
border-color: #334e68;
box-shadow: 0 0 0 3px rgba(51, 78, 104, 0.10);
}
.admin-form-group select:hover {
border-color: #94a3b8;
}
.admin-primary-button {
height: 42px;
padding: 0 18px;
border: none;
border-radius: 8px;
background: #172033;
color: white;
font-family: inherit;
font-size: 11px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, transform 0.2s ease;
}
.admin-primary-button:hover {
background: #26364d;
transform: translateY(-1px);
}
.admin-empty {
padding: 30px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 15px;
text-align: center;
}
.admin-empty strong {
color: #172033;
font-size: 14px;
}
.admin-empty p {
margin: 8px 0 0;
color: #64748b;
font-size: 13px;
}
.admin-table-wrap {
width: 100%;
overflow-x: hidden;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 7px 24px rgba(15, 23, 42, 0.04);
}
.admin-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.admin-table th,
.admin-table td {
padding: 10px 8px;
vertical-align: top;
overflow-wrap: anywhere;
word-break: break-word;
}
.admin-table th {
font-size: 12px;
line-height: 1.25;
}
.admin-table td {
font-size: 13px;
line-height: 1.35;
}
/* =========================================================
ИНВЕНТАРНИ ПРЕГЛЕД – РАСПОРЕД КОЛОНА
========================================================= */
.admin-table th:nth-child(1),
.admin-table td:nth-child(1) {
width: 5%;
text-align: center;
}
.admin-table th:nth-child(2),
.admin-table td:nth-child(2) {
width: 10%;
}
.admin-table th:nth-child(3),
.admin-table td:nth-child(3) {
width: 9%;
text-align: center;
}
.admin-table th:nth-child(4),
.admin-table td:nth-child(4) {
width: 12%;
}
.admin-table th:nth-child(5),
.admin-table td:nth-child(5) {
width: 22%;
}
.admin-table th:nth-child(6),
.admin-table td:nth-child(6) {
width: 17%;
}
.admin-table th:nth-child(7),
.admin-table td:nth-child(7) {
width: 7%;
}
.admin-table th:nth-child(8),
.admin-table td:nth-child(8) {
width: 10%;
}
.admin-table th:nth-child(9),
.admin-table td:nth-child(9) {
width: 8%;
text-align: center;
}
.admin-table {
width: 100%;
border-collapse: collapse;
}
.admin-table th {
padding: 15px 18px;
border-bottom: 1px solid #e2e8f0;
color: #64748b;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-align: left;
}
.admin-table td {
padding: 16px 18px;
border-bottom: 1px solid #f1f5f9;
color: #475569;
font-size: 13px;
}
.admin-table tbody tr:last-child td {
border-bottom: none;
}
.admin-table td strong {
color: #172033;
font-weight: 650;
}
.admin-status {
display: inline-block;
padding: 5px 9px;
border-radius: 6px;
font-size: 9px;
font-weight: 750;
letter-spacing: 0.5px;
}
.admin-status.active {
background: #ecfdf5;
color: #047857;
}
.admin-status.inactive {
background: #f1f5f9;
color: #64748b;
}
.admin-message {
margin-bottom: 18px;
padding: 11px 13px;
border-radius: 8px;
font-size: 12px;
}
.admin-message.error {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
}
@media (max-width: 900px) {
.admin-user-form {
grid-template-columns: 1fr 1fr;
}
.admin-primary-button {
width: fit-content;
}
}
@media (max-width: 600px) {
.admin-user-form {
grid-template-columns: 1fr;
}
.admin-primary-button {
width: 100%;
}
.admin-table th,
.admin-table td {
padding: 13px 12px;
}
}
.admin-footer-right {
display: flex;
align-items: center;
gap: 12px;
}
.admin-table-action {
display: inline-block;
margin-right: 8px;
padding: 7px 11px;
border: 1px solid #d7dee8;
border-radius: 7px;
background: #f8fafc;
color: #334155;
font-family: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.admin-table-action:hover {
background: #eef2f7;
border-color: #cbd5e1;
color: #172033;
}
.admin-footer-right .admin-back {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border: 1px solid #d7dee8;
border-radius: 8px;
background: #f8fafc;
color: #334155;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.admin-footer-right .admin-back:hover {
background: #eef2f7;
border-color: #cbd5e1;
color: #172033;
}
/* =========================================================
ДУГМАД ЗА БРИСАЊЕ
========================================================= */
.admin-danger-button {
border: 1px solid #c62828;
background: #c62828;
color: #ffffff;
padding: 8px 14px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.edit-copies-row > div:first-child {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.edit-copies-row .admin-danger-button {
padding: 5px 9px;
font-size: 11px;
}
.admin-danger-button:hover {
background: #a91f1f;
border-color: #a91f1f;
}
.admin-danger-button:active {
transform: translateY(1px);
}
.admin-danger-button:focus {
outline: 2px solid rgba(198, 40, 40, 0.25);
outline-offset: 2px;
}
/* =====================================================
NOVA KNJIGA
===================================================== */
.biblio-boss-id-info {
margin: 18px 0 28px;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: #f8fafc;
border: 1px solid #dbe3ec;
border-radius: 10px;
}
.biblio-boss-id-info span {
color: #64748b;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.biblio-boss-id-info strong {
color: #172f63;
font-size: 18px;
font-weight: 750;
}
.admin-add-user hr {
margin: 34px 0;
border: 0;
border-top: 1px solid #e2e8f0;
}
.admin-add-user h2 {
margin-bottom: 8px;
}
.admin-add-user p {
margin-bottom: 20px;
}
.admin-user-form textarea {
min-height: 90px;
resize: vertical;
}
.admin-user-form select,
.admin-user-form input,
.admin-user-form textarea {
width: 100%;
box-sizing: border-box;
font-family: inherit;
}
.inventory-row {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
gap: 14px;
align-items: end;
margin-bottom: 12px;
padding: 15px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
}
.inventory-row .admin-form-group {
margin-bottom: 0;
}
.inventory-add-cell {
display: flex;
align-items: center;
gap: 7px;
padding-bottom: 1px;
}
.inventory-add-button,
.inventory-remove-button {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #d7dee8;
border-radius: 8px;
background: #ffffff;
color: #334155;
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.inventory-add-button:hover {
background: #eef2f7;
border-color: #cbd5e1;
color: #172033;
}
.inventory-remove-button {
color: #64748b;
}
.inventory-remove-button:hover {
background: #f1f5f9;
border-color: #cbd5e1;
color: #172033;
}
.inventory-number,
.inventory-location {
min-height: 40px;
}
@media (max-width: 760px) {
.inventory-row {
grid-template-columns: 1fr;
align-items: stretch;
}
.inventory-add-cell {
padding-top: 2px;
}
.biblio-boss-id-info {
align-items: flex-start;
flex-direction: column;
gap: 6px;
}
}
/* =====================================================
NOVA KNJIGA - STRUKTURA
===================================================== */
.nova-knjiga-section {
width: 100%;
}
.nova-knjiga-section h2 {
margin: 0 0 8px;
}
.nova-knjiga-section > p {
margin-bottom: 20px;
color: #64748b;
line-height: 1.5;
}
.nova-knjiga-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px 14px;
}
.nova-knjiga-field-wide {
grid-column: span 2;
}
.nova-knjiga-field-full {
grid-column: 1 / -1;
}
.nova-knjiga-grid input,
.nova-knjiga-grid textarea,
.nova-knjiga-grid select {
width: 100%;
box-sizing: border-box;
font-family: inherit;
}
.nova-knjiga-grid textarea {
min-height: 82px;
resize: vertical;
}
.nova-knjiga-divider {
margin: 34px 0;
border-top: 1px solid #e2e8f0;
}
.nova-knjiga-submit {
margin-top: 24px;
display: flex;
justify-content: flex-end;
}
@media (max-width: 900px) {
.nova-knjiga-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nova-knjiga-field-wide {
grid-column: span 2;
}
}
@media (max-width: 650px) {
.nova-knjiga-grid {
grid-template-columns: 1fr;
}
.nova-knjiga-field-wide,
.nova-knjiga-field-full {
grid-column: 1;
}
.inventory-row {
grid-template-columns: 1fr;
}
.nova-knjiga-submit {
justify-content: stretch;
}
.nova-knjiga-submit .admin-primary-button {
width: 100%;
}
}
.nova-knjiga-success {
margin: 18px 0 24px;
padding: 15px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 10px;
}
.nova-knjiga-success > div {
display: flex;
flex-direction: column;
gap: 5px;
}
.nova-knjiga-success strong {
color: #166534;
font-size: 13px;
}
.nova-knjiga-success span {
color: #64748b;
font-size: 11px;
}
.nova-knjiga-success b {
color: #172f63;
font-size: 13px;
}
.nova-knjiga-success .admin-primary-button {
width: auto;
white-space: nowrap;
text-decoration: none;
}
@media (max-width: 650px) {
.nova-knjiga-success {
align-items: stretch;
flex-direction: column;
}
.nova-knjiga-success .admin-primary-button {
width: 100%;
}
}
/* =========================================================
ИЗМЕНА КЊИГЕ
========================================================= */
.edit-book-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 30px;
margin: 0 0 28px;
padding: 16px 0 20px;
border-bottom: 1px solid #e2e8f0;
}
.edit-book-header > div {
display: flex;
flex-direction: column;
gap: 5px;
}
.edit-book-label {
color: #64748b;
font-size: 10px;
font-weight: 750;
letter-spacing: 1px;
text-transform: uppercase;
}
.edit-book-header strong {
color: #172f63;
font-size: 20px;
font-weight: 800;
}
.admin-source {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
height: 30px;
padding: 0 12px;
border-radius: 7px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
}
.admin-source.web {
background: #eaf3fd;
color: #1d5f9f;
border: 1px solid #cfe3f8;
}
.admin-source.biblio {
background: #f1f5f9;
color: #475569;
border: 1px solid #dbe3ec;
}
/* ---------------------------------------------------------
ЛОКАЦИЈСКИ ОПИС
--------------------------------------------------------- */
.edit-copies-block {
width: 100%;
}
.edit-copies-block h3 {
margin: 0 0 8px;
color: #172033;
font-size: 13px;
font-weight: 800;
letter-spacing: .5px;
}
.edit-copies-block > p {
margin: 0 0 18px;
color: #64748b;
font-size: 12px;
line-height: 1.5;
}
/* ---------------------------------------------------------
ПОСТОЈЕЋИ ПРИМЕРЦИ
--------------------------------------------------------- */
.edit-copies-table {
width: 100%;
overflow: hidden;
border: 1px solid #dce5ef;
border-radius: 10px;
background: #ffffff;
}
.edit-copies-header,
.edit-copies-row {
display: grid;
grid-template-columns: minmax(220px, .9fr) minmax(280px, 1.1fr);
align-items: center;
}
.edit-copies-header {
background: #f1f5f9;
border-bottom: 1px solid #dce5ef;
}
.edit-copies-header > div {
padding: 12px 16px;
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: .8px;
}
.edit-copies-row {
min-height: 58px;
border-bottom: 1px solid #edf1f6;
}
.edit-copies-row:last-child {
border-bottom: none;
}
.edit-copies-row > div {
padding: 9px 16px;
}
.edit-copies-row > div:first-of-type {
color: #172033;
}
.edit-copies-row strong {
color: #172033;
font-size: 13px;
font-weight: 750;
}
.edit-copies-row select {
width: 100%;
max-width: 360px;
height: 38px;
padding: 0 11px;
border: 1px solid #cbd5e1;
border-radius: 7px;
background: #ffffff;
color: #334155;
font-family: inherit;
font-size: 12px;
outline: none;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease;
}
.edit-copies-row select:focus {
border-color: #4b91e8;
box-shadow: 0 0 0 3px rgba(75, 145, 232, .10);
}
/* ---------------------------------------------------------
НОВИ ПРИМЕРЦИ
--------------------------------------------------------- */
.new-inventory-row {
grid-template-columns: minmax(220px, 1fr) minmax(280px, 1fr) auto;
margin-bottom: 10px;
padding: 12px 14px;
background: #f8fafc;
border: 1px solid #dfe7f0;
border-radius: 10px;
}
.new-inventory-row > div {
display: flex;
flex-direction: column;
gap: 6px;
}
.new-inventory-row label {
color: #64748b;
font-size: 10px;
font-weight: 750;
letter-spacing: .4px;
}
.new-inventory-row input,
.new-inventory-row select {
width: 100%;
height: 40px;
box-sizing: border-box;
padding: 0 11px;
border: 1px solid #cbd5e1;
border-radius: 7px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 12px;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.new-inventory-row input:focus,
.new-inventory-row select:focus {
border-color: #4b91e8;
box-shadow: 0 0 0 3px rgba(75, 145, 232, .10);
}
.inventory-row-action {
display: flex !important;
align-items: flex-end;
justify-content: center;
}
.inventory-remove {
width: 38px;
height: 38px;
padding: 0;
border: 1px solid #d7dee8;
border-radius: 7px;
background: #ffffff;
color: #64748b;
font-family: inherit;
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.inventory-remove:hover {
background: #f1f5f9;
border-color: #cbd5e1;
color: #172033;
}
.inventory-add {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
margin-top: 4px;
padding: 0 14px;
border: 1px solid #b8c9dc;
border-radius: 7px;
background: #ffffff;
color: #173f78;
font-family: inherit;
font-size: 10px;
font-weight: 800;
letter-spacing: .5px;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.inventory-add:hover {
background: #f5f9fe;
border-color: #8eafd2;
color: #173f78;
}
/* ---------------------------------------------------------
ДУГМА ЗА ЧУВАЊЕ
--------------------------------------------------------- */
.edit-book-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
}
/* ---------------------------------------------------------
МОБИЛНИ ПРИКАЗ
--------------------------------------------------------- */
@media (max-width: 760px) {
.edit-book-header {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
.edit-copies-header {
display: none;
}
.edit-copies-row {
grid-template-columns: 1fr;
gap: 5px;
padding: 10px 0;
}
.edit-copies-row > div {
padding: 4px 14px;
}
.edit-copies-row > div:first-child {
padding-bottom: 0;
}
.edit-copies-row select {
max-width: none;
}
.new-inventory-row {
grid-template-columns: 1fr;
}
.inventory-row-action {
align-items: stretch !important;
}
.inventory-remove {
width: 100%;
}
.edit-book-actions {
align-items: stretch;
flex-direction: column-reverse;
}
.edit-book-actions .admin-primary-button,
.edit-book-actions .admin-back {
width: 100%;
justify-content: center;
}
}
/* =========================================================
ПРЕТРАГА КЊИГА – АДМИНИСТРАЦИЈА
========================================================= */
.admin-book-search-page {
width: 100%;
}
/* ---------------------------------------------------------
ФОРМА ПРЕТРАГЕ
--------------------------------------------------------- */
.admin-book-search-page form {
margin: 0;
}
.admin-book-search-page form > div:first-child {
width: 100%;
}
.admin-book-search-page input[type="text"] {
width: 100%;
min-height: 44px;
box-sizing: border-box;
padding: 0 14px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 13px;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.admin-book-search-page input[type="text"]:focus {
border-color: #4b91e8;
box-shadow: 0 0 0 3px rgba(75, 145, 232, .10);
}
/* ---------------------------------------------------------
RADIO IZBOR POLJA
--------------------------------------------------------- */
.admin-book-search-page input[type="radio"] {
accent-color: #1e3a5f;
}
.admin-book-search-page label {
color: #475569;
font-size: 12px;
cursor: pointer;
}
.admin-book-search-page input[type="radio"] + label {
margin-left: 4px;
}
/* ---------------------------------------------------------
DUGME PRETRAGA
--------------------------------------------------------- */
.admin-book-search-page button[type="submit"] {
min-height: 42px;
padding: 0 18px;
border: 1px solid #1e3a5f;
border-radius: 8px;
background: #1e3a5f;
color: #ffffff;
font-family: inherit;
font-size: 11px;
font-weight: 800;
letter-spacing: .5px;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.admin-book-search-page button[type="submit"]:hover {
background: #294d78;
border-color: #294d78;
transform: translateY(-1px);
}
/* ---------------------------------------------------------
REZULTATI
--------------------------------------------------------- */
.admin-book-search-page .admin-table-wrap {
margin-top: 22px;
}
.admin-book-search-page .admin-table {
table-layout: fixed;
}
.admin-book-search-page .admin-table th {
white-space: nowrap;
}
.admin-book-search-page .admin-table td {
vertical-align: middle;
}
/* BIBLIO.BOSS-ID */
.admin-book-search-page .admin-table th:first-child,
.admin-book-search-page .admin-table td:first-child {
width: 125px;
}
.admin-book-search-page .admin-table td:first-child {
color: #334155;
font-family: Consolas, monospace;
font-size: 12px;
font-weight: 700;
}
/* NASLOV */
.admin-book-search-page .admin-table th:nth-child(2) {
width: auto;
}
.admin-book-search-page .admin-table td:nth-child(2) strong {
display: block;
color: #172033;
font-size: 13px;
line-height: 1.4;
}
/* AUTOR */
.admin-book-search-page .admin-table th:nth-child(3) {
width: 19%;
}
.admin-book-search-page .admin-table td:nth-child(3) {
color: #475569;
}
/* GODINA */
.admin-book-search-page .admin-table th:nth-child(4),
.admin-book-search-page .admin-table td:nth-child(4) {
width: 90px;
}
/* IZVOR */
.admin-book-search-page .admin-table th:nth-child(5),
.admin-book-search-page .admin-table td:nth-child(5) {
width: 90px;
}
/* AKCIJA */
.admin-book-search-page .admin-table th:last-child,
.admin-book-search-page .admin-table td:last-child {
width: 105px;
text-align: right;
}
/* ---------------------------------------------------------
OZNAKA IZVORA
--------------------------------------------------------- */
.admin-book-search-page .admin-source {
min-width: 58px;
height: 27px;
padding: 0 9px;
border-radius: 6px;
font-size: 9px;
}
/* ---------------------------------------------------------
DUGME ИЗМЕНИ
--------------------------------------------------------- */
.admin-book-search-page .admin-table-action {
margin-right: 0;
min-width: 68px;
text-align: center;
box-sizing: border-box;
background: #ffffff;
color: #1e3a5f;
border-color: #b9c9dc;
}
.admin-book-search-page .admin-table-action:hover {
background: #1e3a5f;
border-color: #1e3a5f;
color: #ffffff;
}
/* ---------------------------------------------------------
PRAZAN REZULTAT
--------------------------------------------------------- */
.admin-book-search-page .admin-empty {
margin-top: 20px;
}
/* ---------------------------------------------------------
PAGINACIJA
--------------------------------------------------------- */
.admin-book-search-page a {
text-decoration: none;
}
/* ---------------------------------------------------------
MOBILNI PRIKAZ
--------------------------------------------------------- */
@media (max-width: 900px) {
.admin-book-search-page .admin-table {
min-width: 760px;
}
.admin-book-search-page .admin-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 600px) {
.admin-book-search-page .admin-table {
min-width: 700px;
}
.admin-book-search-page input[type="text"] {
min-height: 46px;
}
.admin-book-search-page button[type="submit"] {
width: 100%;
}
}
/* =========================================================
АДМИН ПРЕТРАГА — ПАГИНАЦИЈА
========================================================= */
.admin-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 22px;
}
.admin-pagination-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 7px;
background: #ffffff;
color: #334155;
font-family: inherit;
font-size: 10px;
font-weight: 800;
letter-spacing: .35px;
text-decoration: none;
white-space: nowrap;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.admin-pagination-button:hover {
background: #f1f5f9;
border-color: #aebdcd;
color: #172033;
}
.admin-pagination-button.disabled {
background: #f8fafc;
border-color: #e2e8f0;
color: #a0aabd;
cursor: default;
pointer-events: none;
}
.admin-pagination-info {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 12px;
color: #64748b;
font-size: 11px;
white-space: nowrap;
}
.admin-pagination-info strong {
margin: 0 3px;
color: #172033;
font-weight: 800;
}
@media (max-width: 600px) {
.admin-pagination {
gap: 6px;
}
.admin-pagination-button {
flex: 1 1 auto;
}
.admin-pagination-info {
order: -1;
width: 100%;
margin-bottom: 4px;
}
}
.catalog-stat-label {
margin-top: -2px;
margin-bottom: 5px;
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
}
/* =========================================================
ТРИ ПРЕТРАГЕ ФОНДА
========================================================= */
.catalog-search-fund {
margin-top: 22px;
}
.catalog-search-fund-title {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.catalog-search-fund-title h2 {
margin: 0 0 5px;
color: #172033;
font-size: 15px;
font-weight: 800;
letter-spacing: .5px;
}
.catalog-search-fund-title p {
margin: 0;
color: #64748b;
font-size: 11px;
}
.catalog-search-fund-flag {
width: 34px;
height: 23px;
object-fit: cover;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
}
.catalog-search-fund-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
background: #f1f5f9;
color: #334e68;
font-size: 14px;
}
.search-results-fund {
margin-top: 18px;
margin-bottom: 24px;
}
/* ---------------------------------------------------------
RAZMAK IZMEĐU TRI PRETRAGE
--------------------------------------------------------- */
.catalog-search-panel + .search-results-fund {
margin-top: 18px;
}
.search-results-fund + .catalog-search-panel {
margin-top: 28px;
}
/* ---------------------------------------------------------
MOBILNI PRIKAZ
--------------------------------------------------------- */
@media (max-width: 700px) {
.catalog-search-fund-title {
align-items: flex-start;
}
.catalog-search-fund-title h2 {
font-size: 14px;
line-height: 1.35;
}
.catalog-search-fund-title p {
line-height: 1.5;
}
.catalog-search-fund-flag,
.catalog-search-fund-icon {
flex: 0 0 auto;
}
}
/* =========================================================
ТРИ ПРЕТРАГЕ + ЈЕДАН ЗАЈЕДНИЧКИ РЕЗУЛТАТ
========================================================= */
.catalog-search-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: 20px;
}
/* Три претраживача увек иду у први ред */
.catalog-search-grid > .catalog-search-panel:nth-of-type(1) {
grid-column: 1;
grid-row: 1;
}
.catalog-search-grid > .catalog-search-panel:nth-of-type(3) {
grid-column: 2;
grid-row: 1;
}
.catalog-search-grid > .catalog-search-panel:nth-of-type(5) {
grid-column: 3;
grid-row: 1;
}
/* Резултати се приказују преко целе ширине испод претраживача */
.catalog-search-grid > .search-results {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
}
/* Да сва три блока претраге имају једнаку висину */
.catalog-search-grid .catalog-search-panel {
margin-bottom: 0;
height: 100%;
}
/* МОБИЛНИ ПРИКАЗ */
@media (max-width: 900px) {
.catalog-search-grid {
grid-template-columns: 1fr;
}
.catalog-search-grid > .catalog-search-panel:nth-of-type(1),
.catalog-search-grid > .catalog-search-panel:nth-of-type(3),
.catalog-search-grid > .catalog-search-panel:nth-of-type(5) {
grid-column: 1;
grid-row: auto;
}
.catalog-search-grid > .search-results {
grid-column: 1;
grid-row: auto;
}
}
/* =========================================================
АКТИВНА ПРЕТРАГА
========================================================= */
.catalog-search-panel.active-search {
border-color: #172554;
box-shadow: 0 0 0 2px rgba(23, 37, 84, 0.08);
transform: translateY(-1px);
}
.catalog-search-panel.active-search .catalog-search-fund-title h2 {
color: #172554;
}
.admin-card-content {
min-width: 0;
flex: 1;
}
.admin-card-arrow {
margin-left: auto;
color: #172554;
font-size: 22px;
font-weight: 700;
line-height: 1;
}
.admin-card:hover .admin-card-arrow {
color: white;
}
/* =========================================================
BACKUP — РЕЗЕРВНА КОПИЈА БАЗЕ
========================================================= */
.backup-card {
display: flex;
align-items: flex-start;
gap: 20px;
max-width: 900px;
margin: 0 auto;
}
.backup-card .admin-card-icon {
flex: 0 0 auto;
margin-top: 2px;
}
.backup-card .admin-card-content {
flex: 1;
}
.backup-card .admin-card-content h2 {
margin: 0 0 10px;
}
.backup-card .admin-card-content p {
max-width: 700px;
line-height: 1.7;
}
.backup-note {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #e5e7eb;
color: #64748b;
font-size: 13px;
}
.backup-card .admin-form-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 22px;
}
.backup-card .admin-primary-button {
min-height: 42px;
}
.backup-card .admin-secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 16px;
border: 1px solid #d1d5db;
border-radius: 8px;
background: white;
color: #374151;
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: all 0.15s ease;
}
.backup-card .admin-secondary-button:hover {
border-color: #172554;
color: #172554;
}
/* МОБИЛНИ ПРИКАЗ */
@media (max-width: 700px) {
.backup-card {
flex-direction: column;
gap: 14px;
}
.backup-card .admin-form-actions {
flex-wrap: wrap;
}
}
/* =========================================================
DATUM PRINOVE - UREĐIVANJE PRIMERAKA
========================================================= */
.edit-copies-row input[type="date"] {
width: 100%;
min-width: 150px;
height: 42px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff;
color: #1e293b;
font-family: inherit;
font-size: 14px;
box-sizing: border-box;
cursor: pointer;
}
.edit-copies-row input[type="date"]:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.edit-copies-row input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0.75;
cursor: pointer;
}
.edit-copies-row input[type="date"]:hover {
border-color: #94a3b8;
}
.statistika-ukupno td {
background: #f1f5f9;
border-top: 2px solid #cbd5e1;
font-weight: 700;
}
/* =========================================================
ФИЛТЕРИ – ИНВЕНТАРНА КЊИГА И СТАТИСТИКА ПРИНОВА
========================================================= */
.admin-search-main {
display: grid;
grid-template-columns: minmax(220px, 1.5fr) minmax(180px, 1fr) minmax(120px, 0.65fr) minmax(120px, 0.65fr) auto;
gap: 12px;
align-items: center;
}
.admin-search-main select,
.admin-search-main input[type="number"] {
width: 100%;
height: 46px;
padding: 0 14px;
border: 1px solid #cbd5e1;
border-radius: 9px;
background: #ffffff;
color: #1e293b;
font-family: inherit;
font-size: 14px;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.admin-search-main select {
cursor: pointer;
}
.admin-search-main select:hover,
.admin-search-main input[type="number"]:hover {
border-color: #94a3b8;
}
.admin-search-main select:focus,
.admin-search-main input[type="number"]:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* =========================================================
ДУГМАД – ПРИКАЖИ
========================================================= */
.admin-search-main .admin-primary-button {
height: 46px;
padding: 0 22px;
border-radius: 9px;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* =========================================================
EXCEL ИЗВОЗ
========================================================= */
.admin-form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 18px;
margin-bottom: 10px;
}
.admin-form-actions .admin-primary-button {
min-height: 44px;
padding: 0 20px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
text-decoration: none;
}
/* =========================================================
МАЊИ ЕКРАНИ
========================================================= */
@media (max-width: 900px) {
.admin-search-main {
grid-template-columns: 1fr 1fr;
}
.admin-search-main .admin-primary-button {
width: 100%;
}
.admin-form-actions {
justify-content: flex-start;
}
}
@media (max-width: 600px) {
.admin-search-main {
grid-template-columns: 1fr;
}
.admin-form-actions {
width: 100%;
}
.admin-form-actions .admin-primary-button {
width: 100%;
}
}
/* =========================================================
СТАТИСТИКА ПРИНОВА – ЗАГЛАВЉЕ ИЗВЕШТАЈА
========================================================= */
.statistika-dokument-header {
display: flex;
align-items: center;
gap: 28px;
padding: 24px 28px;
margin-bottom: 24px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 7px 24px rgba(15, 23, 42, 0.04);
}
.statistika-dokument-logo {
width: 150px;
min-width: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.statistika-dokument-logo img {
width: 135px;
height: auto;
display: block;
}
.statistika-dokument-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.statistika-dokument-library {
font-size: 18px;
font-weight: 700;
color: #1e3a5f;
margin-bottom: 7px;
}
.statistika-dokument-title {
font-size: 28px;
font-weight: 800;
color: #0f172a;
margin-bottom: 12px;
letter-spacing: 0.2px;
}
.statistika-dokument-line {
font-size: 14px;
line-height: 1.7;
color: #475569;
}
.statistika-dokument-line strong {
color: #1e293b;
}
/* =========================================================
ПРИЛАГОЂАВАЊЕ МАЊИМ ЕКРАНИМА
========================================================= */
@media (max-width: 700px) {
.statistika-dokument-header {
flex-direction: column;
align-items: flex-start;
gap: 18px;
padding: 20px;
}
.statistika-dokument-logo {
width: 100%;
min-width: 0;
justify-content: flex-start;
}
.statistika-dokument-logo img {
width: 110px;
}
.statistika-dokument-library {
font-size: 16px;
}
.statistika-dokument-title {
font-size: 24px;
}
}
/* =========================================================
СОРТИРАЊЕ КАТАЛОГА
========================================================= */
.browse-sort {
display: flex;
align-items: center;
gap: 9px;
color: #64748b;
font-size: 0.88rem;
}
.browse-sort label {
margin: 0;
color: #475569;
font-size: 0.82rem;
font-weight: 700;
white-space: nowrap;
}
.browse-sort select {
min-width: 190px;
height: 36px;
padding: 0 34px 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 12px;
font-weight: 600;
outline: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.browse-sort select:hover {
border-color: #94a3b8;
background: #f8fafc;
}
.browse-sort select:focus {
border-color: #334e68;
box-shadow: 0 0 0 3px rgba(51, 78, 104, 0.10);
}
/* =========================================================
ПОЧЕТНИ ЕКРАН BIBLIO BOSS
========================================================= */
.app-splash {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
opacity: 1;
visibility: visible;
transition: opacity 0.45s ease, visibility 0.45s ease;
}
.app-splash.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.app-splash-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.app-splash-logo {
display: block;
width: min(260px, 60vw);
height: auto;
margin-bottom: 24px;
}
.app-splash-message {
color: #64748b;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.2px;
}
@media (max-width: 600px) {
.app-splash-logo {
width: 220px;
margin-bottom: 20px;
}
.app-splash-message {
font-size: 13px;
}
}
/* =========================================================
O KATALOGU
========================================================= */
.about-page {
max-width: 1050px;
margin: 0 auto;
padding: 55px 25px 80px;
}
/* HEADER */
.about-header {
text-align: center;
margin-bottom: 42px;
}
.about-kicker {
margin-bottom: 10px;
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: 2.8px;
}
.about-header h1 {
margin: 0;
color: #172033;
font-size: 38px;
line-height: 1.15;
font-weight: 800;
}
.about-header p {
max-width: 680px;
margin: 13px auto 0;
color: #64748b;
font-size: 14px;
line-height: 1.6;
}
/* SECTIONS */
.about-section {
margin-bottom: 20px;
padding: 30px 34px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 7px 24px rgba(15, 23, 42, 0.035);
}
.about-section-title {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 20px;
}
.about-section-number {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 9px;
background: #eef2f7;
color: #172554;
font-size: 10px;
font-weight: 800;
}
.about-section-title h2 {
margin: 0;
color: #172033;
font-size: 19px;
font-weight: 750;
}
.about-section p {
margin: 0 0 13px;
color: #526176;
font-size: 14px;
line-height: 1.75;
}
.about-section p:last-child {
margin-bottom: 0;
}
/* LIST */
.about-list {
margin: 4px 0 18px;
padding-left: 22px;
color: #526176;
}
.about-list li {
margin-bottom: 7px;
padding-left: 3px;
font-size: 14px;
line-height: 1.55;
}
/* NOTE */
.about-note {
margin-top: 20px !important;
padding: 14px 17px;
border-left: 3px solid #94a3b8;
background: #f8fafc;
color: #64748b !important;
font-size: 13px !important;
}
/* TAGS */
.about-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 17px 0 20px;
}
.about-tags span {
display: inline-flex;
align-items: center;
min-height: 31px;
padding: 0 11px;
border: 1px solid #dbe3ec;
border-radius: 7px;
background: #f8fafc;
color: #475569;
font-size: 11px;
font-weight: 700;
}
/* LOCATIONS */
.about-locations {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin: 17px 0 20px;
}
.about-locations div {
padding: 11px 14px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
color: #475569;
font-size: 12px;
font-weight: 600;
}
/* IMPORTANT */
.about-important {
border-color: #d7e0eb;
background: #fbfcfe;
}
/* GUIDES */
.about-guides {
margin-top: 32px;
padding: 34px;
border-radius: 16px;
background: #172554;
color: white;
}
.about-guides-header {
margin-bottom: 23px;
}
.about-guides-kicker {
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.58);
font-size: 9px;
font-weight: 800;
letter-spacing: 2.5px;
}
.about-guides-header h2 {
margin: 0;
font-size: 22px;
font-weight: 750;
}
.about-guides-header p {
margin: 9px 0 0;
color: rgba(255, 255, 255, 0.68);
font-size: 13px;
line-height: 1.6;
}
/* GUIDE CARDS */
.about-guides-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.about-guide-card {
position: relative;
display: flex;
align-items: center;
gap: 14px;
min-height: 105px;
padding: 18px 20px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
background: rgba(255, 255, 255, 0.07);
color: white;
text-decoration: none;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.about-guide-card:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.28);
color: white;
text-decoration: none;
}
.about-guide-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
font-size: 21px;
}
.about-guide-content {
min-width: 0;
}
.about-guide-content h3 {
margin: 0;
font-size: 13px;
font-weight: 750;
}
.about-guide-content p {
margin: 6px 0 0;
color: rgba(255, 255, 255, 0.62);
font-size: 11px;
line-height: 1.55;
}
.about-guide-arrow {
margin-left: auto;
color: rgba(255, 255, 255, 0.5);
font-size: 20px;
transition: transform 0.18s ease;
}
.about-guide-card:hover .about-guide-arrow {
transform: translateX(4px);
color: white;
}
.about-guides-note {
margin-top: 17px;
color: rgba(255, 255, 255, 0.42);
font-size: 10px;
}
/* LIBRARY */
.about-library {
max-width: 720px;
margin: 45px auto 0;
padding: 0 20px;
text-align: center;
}
.about-library-line {
width: 45px;
height: 3px;
margin: 0 auto 19px;
border-radius: 4px;
background: #172554;
}
.about-library h2 {
margin: 0;
color: #334155;
font-size: 15px;
font-weight: 750;
}
.about-library p {
margin: 12px 0 0;
color: #7b8798;
font-size: 12px;
line-height: 1.7;
}
/* MOBILE */
@media (max-width: 700px) {
.about-page {
padding: 40px 15px 60px;
}
.about-header h1 {
font-size: 32px;
}
.about-section {
padding: 25px 21px;
}
.about-section-title h2 {
font-size: 17px;
}
.about-locations {
grid-template-columns: 1fr;
}
.about-guides {
padding: 27px 20px;
}
.about-guides-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 500px) {
.about-page {
padding-left: 12px;
padding-right: 12px;
}
.about-header h1 {
font-size: 29px;
}
.about-section {
padding: 22px 18px;
}
.about-section-title {
align-items: flex-start;
}
.about-section-title h2 {
font-size: 16px;
line-height: 1.35;
}
.about-guides {
padding: 24px 16px;
}
.about-guide-card {
padding: 16px;
}
}
/* =========================================================
ОБНОВА БАЗЕ
========================================================= */
.admin-warning-box {
margin-bottom: 24px;
padding: 18px 20px;
border: 1px solid #e4c76a;
border-left: 5px solid #c79a16;
border-radius: 8px;
background: #fff9e6;
color: #4d431f;
}
.admin-warning-box strong {
display: block;
margin-bottom: 8px;
color: #8a6810;
font-size: 15px;
letter-spacing: 0.5px;
}
.admin-warning-box p {
margin: 6px 0;
line-height: 1.6;
}
.admin-file-input {
display: block;
width: 100%;
max-width: 600px;
margin-top: 8px;
padding: 10px;
border: 1px solid #cfd8e3;
border-radius: 6px;
background: #ffffff;
font-size: 14px;
box-sizing: border-box;
}
.admin-file-input:focus {
outline: none;
border-color: #3f6f9f;
box-shadow: 0 0 0 2px rgba(63, 111, 159, 0.12);
}
.admin-form-group small {
display: block;
margin-top: 8px;
color: #6b7280;
line-height: 1.5;
}
.admin-confirm-box {
margin-top: 24px;
padding: 14px 16px;
border: 1px solid #d8e0e8;
border-radius: 7px;
background: #f7f9fb;
}
.admin-confirm-box label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
color: #26384a;
line-height: 1.5;
}
.admin-confirm-box input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
flex: 0 0 auto;
cursor: pointer;
}
.admin-form-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 26px;
}
.admin-primary-button,
.admin-secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
}
.admin-primary-button {
border: 1px solid #315d86;
background: #315d86;
color: #ffffff;
}
.admin-primary-button:hover {
background: #274e73;
border-color: #274e73;
}
.admin-secondary-button {
border: 1px solid #cbd5df;
background: #ffffff;
color: #34495e;
}
.admin-secondary-button:hover {
background: #f3f6f9;
border-color: #b8c4d0;
}
.admin-message {
margin-bottom: 20px;
padding: 14px 18px;
border-radius: 7px;
line-height: 1.5;
}
.admin-message-error {
border: 1px solid #e3b8b8;
background: #fff1f1;
color: #8a2525;
}
.admin-message-success {
border: 1px solid #b9d8c1;
background: #eef9f1;
color: #276738;
}
.text-danger {
display: block;
margin-top: 6px;
color: #b42318;
font-size: 13px;
}
/* =========================================================
BIBLIO BOSS – UDK GENERATOR
========================================================= */
.udk-results-card,
.udk-generator-card {
width: 100%;
max-width: 1100px;
margin: 0 auto 28px auto;
background: #ffffff;
border: 1px solid #dbe3eb;
border-radius: 14px;
box-shadow: 0 4px 18px rgba(24, 43, 62, 0.06);
overflow: hidden;
}
/* ---------------------------------------------------------
HEADER
--------------------------------------------------------- */
.udk-generator-header,
.udk-results-header {
padding: 24px 28px;
background: linear-gradient( 180deg, #f8fafc 0%, #ffffff 100% );
border-bottom: 1px solid #e3e9ef;
}
.udk-generator-header h2,
.udk-results-header h2 {
margin: 0;
color: #20364d;
font-size: 21px;
font-weight: 700;
letter-spacing: 0.2px;
}
.udk-generator-header p {
max-width: 820px;
margin: 8px 0 0 0;
color: #667789;
font-size: 14px;
line-height: 1.6;
}
/* ---------------------------------------------------------
SEARCH
--------------------------------------------------------- */
.udk-search-form {
padding: 22px 28px 26px 28px;
}
.udk-search-row {
display: flex;
gap: 12px;
align-items: stretch;
}
.udk-form-input,
.udk-form-textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #cbd6e0;
border-radius: 8px;
background: #ffffff;
color: #26384a;
font-family: inherit;
font-size: 14px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.udk-form-input {
min-height: 42px;
padding: 9px 12px;
}
.udk-form-textarea {
min-height: 120px;
padding: 11px 12px;
resize: vertical;
line-height: 1.55;
}
.udk-form-input::placeholder,
.udk-form-textarea::placeholder {
color: #9aa8b5;
}
.udk-form-input:focus,
.udk-form-textarea:focus {
outline: none;
border-color: #47739d;
box-shadow: 0 0 0 3px rgba(71, 115, 157, 0.12);
}
/* ---------------------------------------------------------
BUTTON
--------------------------------------------------------- */
.udk-generate-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 9px 18px;
border: 1px solid #315d86;
border-radius: 8px;
background: #315d86;
color: #ffffff;
font-family: inherit;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.2px;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.udk-generate-button:hover {
background: #264d73;
border-color: #264d73;
box-shadow: 0 3px 10px rgba(38, 77, 115, 0.18);
}
.udk-generate-button:active {
transform: translateY(1px);
}
/* ---------------------------------------------------------
GENERATOR FORM
--------------------------------------------------------- */
.udk-generator-card > form {
padding: 28px;
}
.udk-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 24px;
}
.udk-form-group {
min-width: 0;
}
.udk-form-wide {
grid-column: 1 / -1;
}
.udk-form-group label {
display: block;
margin-bottom: 7px;
color: #334b62;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.35px;
}
.udk-form-actions {
display: flex;
justify-content: flex-start;
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid #e5ebf0;
}
/* ---------------------------------------------------------
SEARCH / RESULT LIST
--------------------------------------------------------- */
.udk-results {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px 28px 28px 28px;
}
.udk-result {
display: grid;
grid-template-columns: 185px minmax(0, 1fr);
gap: 22px;
align-items: start;
padding: 18px 20px;
border: 1px solid #dce4eb;
border-radius: 10px;
background: #ffffff;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.udk-result:hover {
border-color: #b8c8d7;
box-shadow: 0 4px 14px rgba(31, 55, 79, 0.07);
transform: translateY(-1px);
}
/* ---------------------------------------------------------
UDK NUMBER
--------------------------------------------------------- */
.udk-notation {
color: #315d86;
font-size: 21px;
font-weight: 750;
line-height: 1.35;
letter-spacing: 0.2px;
word-break: break-word;
}
/* ---------------------------------------------------------
RESULT CONTENT
--------------------------------------------------------- */
.udk-result-content {
min-width: 0;
}
.udk-caption {
color: #263b50;
font-size: 16px;
font-weight: 700;
line-height: 1.45;
}
.udk-description {
margin-top: 7px;
color: #5d6e7e;
font-size: 13px;
line-height: 1.55;
}
.udk-keywords {
margin-top: 9px;
color: #738190;
font-size: 12px;
line-height: 1.5;
}
/* ---------------------------------------------------------
RESULT COUNT
--------------------------------------------------------- */
.udk-result-count {
margin-top: 5px;
color: #7a8997;
font-size: 12px;
}
/* ---------------------------------------------------------
GENERATOR SUGGESTION
--------------------------------------------------------- */
.udk-suggestion-reason {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid #edf1f4;
color: #536577;
font-size: 13px;
line-height: 1.55;
}
.udk-suggestion-reason strong {
color: #334b62;
}
.udk-suggestion-score {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 10px;
padding: 5px 9px;
border-radius: 6px;
background: #f1f5f8;
color: #657586;
font-size: 11px;
font-weight: 600;
}
.udk-suggestion-score strong {
color: #315d86;
font-size: 12px;
}
/* ---------------------------------------------------------
WARNING / INFORMATION
--------------------------------------------------------- */
.udk-warning {
margin: 0 28px 26px 28px;
padding: 13px 15px;
border: 1px solid #dce5ec;
border-radius: 8px;
background: #f7f9fb;
color: #667789;
font-size: 12px;
line-height: 1.55;
}
.udk-warning strong {
color: #3c5267;
}
/* ---------------------------------------------------------
OLD SUPPORTING ELEMENTS
--------------------------------------------------------- */
.udk-source {
padding: 5px 8px;
border-radius: 5px;
background: #f1f5f8;
color: #6b7280;
font-size: 11px;
white-space: nowrap;
}
.udk-intro {
margin: 0;
color: #4b5d6d;
font-size: 15px;
line-height: 1.7;
}
.udk-info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 24px;
}
.udk-info-item {
display: flex;
flex-direction: column;
gap: 7px;
padding: 16px;
border: 1px solid #dce3ea;
border-radius: 7px;
background: #f8fafc;
}
.udk-info-item strong {
color: #315d86;
font-size: 14px;
}
.udk-info-item span {
color: #596b7c;
font-size: 13px;
}
/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 900px) {
.udk-form-grid {
grid-template-columns: 1fr;
}
.udk-form-wide {
grid-column: auto;
}
.udk-result {
grid-template-columns: 1fr;
gap: 9px;
}
.udk-notation {
font-size: 20px;
}
}
@media (max-width: 650px) {
.udk-search-row {
flex-direction: column;
}
.udk-search-form,
.udk-generator-card > form {
padding: 20px;
}
.udk-generator-header,
.udk-results-header {
padding: 20px;
}
.udk-results {
padding: 15px 20px 20px 20px;
}
.udk-warning {
margin-left: 20px;
margin-right: 20px;
}
.udk-generate-button {
width: 100%;
}
}
/* =========================================================
BIBLIO BOSS + — ZAVRŠNA OPTIMIZACIJA ZA MOBILNE UREĐAJE
---------------------------------------------------------
OVAJ BLOK MENJA ISKLJUČIVO PRIKAZ DO 767px.
DESKTOP PRIKAZ NIJE MENJAN.
========================================================= */
@media (max-width: 767px) {
/* -----------------------------------------------------
OPŠTA MOBILNA PRAVILA
----------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body {
font-size: 14px;
}
img,
svg,
video,
canvas {
max-width: 100%;
}
input,
select,
textarea,
button {
max-width: 100%;
font-family: inherit;
}
/* -----------------------------------------------------
GLAVNO ZAGLAVLJE I NAVIGACIJA
----------------------------------------------------- */
.header-inner {
width: 100%;
min-height: auto;
padding: 12px 12px 14px;
gap: 11px;
}
.header-brand {
width: 100%;
gap: 10px;
justify-content: center;
min-width: 0;
}
.header-logo {
width: 54px;
flex: 0 0 54px;
}
.header-brand-text {
min-width: 0;
padding-left: 10px;
}
.header-program {
font-size: 16px;
letter-spacing: 1px;
white-space: nowrap;
}
.header-library {
margin-top: 5px;
font-size: 10px;
line-height: 1.35;
}
.header-place {
font-size: 9px;
letter-spacing: 1.5px;
}
.main-navigation {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 3px;
}
.main-navigation a {
min-height: 34px;
padding: 0 7px;
font-size: 9px;
letter-spacing: 0;
white-space: nowrap;
}
.main-footer {
font-size: 10px;
}
.footer-inner {
min-height: auto;
padding: 16px 12px;
gap: 7px;
flex-direction: column;
text-align: center;
}
/* =====================================================
POČETNA STRANA
===================================================== */
.home-page {
min-height: auto;
width: 100%;
}
.home-introduction {
padding: 30px 14px 22px;
}
.home-introduction-inner {
width: 100%;
}
.home-kicker {
margin-bottom: 9px;
font-size: 9px;
letter-spacing: 2px;
}
.home-introduction h1 {
font-size: 31px;
line-height: 1.08;
letter-spacing: -0.8px;
}
.home-library-name {
margin-top: 9px;
font-size: 15px;
line-height: 1.35;
}
.home-city {
font-size: 10px;
letter-spacing: 1.5px;
}
.home-separator {
width: 42px;
height: 2px;
margin: 18px auto 16px;
}
.home-introduction p {
font-size: 13px;
line-height: 1.6;
}
/* Statistika fondova:
tri statistike ostaju JEDNA PORED DRUGE. */
.catalog-statistics {
width: calc(100% - 20px);
max-width: none;
margin: 0 10px;
padding: 16px 6px;
display: grid;
grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
gap: 0;
align-items: center;
border-radius: 12px;
}
.catalog-stat {
min-width: 0;
width: 100%;
padding: 0 4px;
}
.catalog-stat-title {
min-height: 30px;
gap: 4px;
font-size: 8px;
letter-spacing: 0.5px;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
}
.catalog-stat-language {
white-space: normal;
}
.catalog-stat-flag {
width: 18px;
height: 12px;
flex: 0 0 18px;
}
.catalog-stat-number {
margin-top: 6px;
font-size: 20px;
line-height: 1.05;
}
.catalog-stat-secondary {
margin-top: 4px;
font-size: 9px;
line-height: 1.25;
overflow-wrap: anywhere;
}
.catalog-stat-line {
width: 1px;
height: 42px;
}
.home-options {
padding: 18px 10px 0;
}
.home-options-inner {
width: 100%;
max-width: none;
grid-template-columns: 1fr;
gap: 10px;
}
.home-card {
min-height: 135px;
padding: 18px 17px 18px;
border-radius: 12px;
}
.home-card-icon {
width: 40px;
height: 40px;
margin-bottom: 14px;
}
.home-card h2 {
font-size: 14px;
}
.home-card p {
margin-top: 7px;
font-size: 12px;
line-height: 1.5;
}
.home-card-content {
padding-right: 25px;
}
.home-card-arrow {
right: 15px;
bottom: 15px;
font-size: 18px;
}
.home-description {
margin-top: 22px;
padding: 0 15px 30px;
}
.home-description p {
font-size: 12px;
line-height: 1.6;
}
/* Stara/alternativna početna hero struktura, ako je prisutna. */
.home-hero {
min-height: auto;
}
.home-hero-content {
padding: 38px 15px 42px;
}
.home-library-title {
font-size: 18px;
letter-spacing: 1.5px;
}
.home-library-place {
font-size: 9px;
letter-spacing: 2px;
}
.home-hero h1 {
font-size: 31px;
line-height: 1.08;
}
.home-description {
max-width: 100%;
}
.home-actions {
grid-template-columns: 1fr;
gap: 9px;
}
.home-action {
min-height: 70px;
padding: 13px 14px;
}
/* =====================================================
JAVNI KATALOG / PRETRAGA I PRELISTAVANJE
===================================================== */
.catalog-page {
width: 100%;
max-width: none;
padding: 0 10px 40px;
}
.catalog-hero {
margin-top: 14px;
margin-bottom: 14px;
border-radius: 12px;
}
.catalog-hero-content {
padding: 27px 17px 30px;
}
.catalog-eyebrow {
font-size: 9px;
letter-spacing: 1.5px;
}
.catalog-hero h1 {
font-size: 29px;
line-height: 1.1;
}
.catalog-hero p {
font-size: 13px;
line-height: 1.55;
}
.catalog-toolbar {
margin-bottom: 12px;
padding: 14px;
gap: 12px;
border-radius: 11px;
}
.catalog-result-info {
width: 100%;
gap: 10px;
}
.catalog-result-number {
font-size: 23px;
}
.catalog-result-title {
font-size: 13px;
}
.catalog-result-subtitle {
font-size: 11px;
}
.page-size {
width: 100%;
flex-wrap: wrap;
}
.catalog-book {
grid-template-columns: 40px minmax(0, 1fr);
gap: 11px;
padding: 15px;
border-radius: 11px;
}
.catalog-book-number {
width: 40px;
height: 36px;
border-radius: 8px;
}
.catalog-book-author {
font-size: 12px;
}
.catalog-book-title {
font-size: 17px;
}
.catalog-book-subtitle {
font-size: 12px;
}
.catalog-book-publication {
font-size: 11px;
line-height: 1.5;
}
.catalog-book-type {
font-size: 9px;
}
.catalog-book-action {
grid-column: 2;
}
.catalog-book-action a {
width: 100%;
min-height: 38px;
justify-content: center;
}
.catalog-pagination {
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.pagination-button {
min-height: 38px;
padding: 0 11px;
font-size: 11px;
}
.pagination-info {
width: 100%;
justify-content: center;
order: -1;
}
/* -----------------------------------------------------
PRETRAGA KATALOGA
----------------------------------------------------- */
.search-page {
width: 100%;
max-width: none;
padding: 28px 10px 45px;
}
.search-page-header {
margin-bottom: 18px;
}
.search-page-kicker {
font-size: 9px;
letter-spacing: 1.8px;
}
.search-page-header h1 {
font-size: 28px;
line-height: 1.15;
}
.search-page-header p {
margin-top: 9px;
font-size: 12px;
line-height: 1.55;
}
.catalog-search-grid {
width: 100%;
grid-template-columns: 1fr;
gap: 10px;
}
.catalog-search-grid > .catalog-search-panel:nth-of-type(1),
.catalog-search-grid > .catalog-search-panel:nth-of-type(3),
.catalog-search-grid > .catalog-search-panel:nth-of-type(5) {
grid-column: 1;
grid-row: auto;
}
.catalog-search-grid > .search-results {
grid-column: 1;
grid-row: auto;
}
.catalog-search-panel {
width: 100%;
min-width: 0;
}
.catalog-search-panel,
.catalog-search {
padding: 14px;
border-radius: 11px;
}
.catalog-search-main {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.catalog-search-main input {
width: 100%;
min-width: 0;
height: 50px;
padding: 0 13px;
font-size: 16px;
}
.catalog-search-main button {
width: 100%;
min-height: 46px;
height: 46px;
padding: 0 15px;
}
.catalog-search-fund-title {
width: 100%;
gap: 9px;
margin-bottom: 12px;
align-items: flex-start;
}
.catalog-search-fund-title h2 {
font-size: 13px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.catalog-search-fund-title p {
margin-top: 4px;
font-size: 11px;
line-height: 1.45;
}
.catalog-search-fund-flag,
.catalog-search-fund-icon {
width: 26px;
height: auto;
flex: 0 0 26px;
}
.catalog-search-fields {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-top: 11px;
font-size: 11px;
}
.search-fields-label {
width: 100%;
margin-bottom: -2px;
}
.catalog-search-fields label {
min-height: 28px;
gap: 5px;
font-size: 11px;
}
.catalog-search-fields input {
width: 17px;
height: 17px;
}
.search-help {
margin-top: 12px;
padding-top: 11px;
font-size: 10px;
line-height: 1.55;
}
.search-results {
width: 100%;
min-width: 0;
}
.search-results-header {
padding: 0 2px 10px;
gap: 5px;
}
.search-result-card {
width: 100%;
min-width: 0;
padding: 14px;
gap: 12px;
border-radius: 10px;
}
.search-result-card h2 {
font-size: 16px;
line-height: 1.3;
}
.search-result-author {
font-size: 11px;
}
.search-result-subtitle {
font-size: 11px;
}
.search-result-publication {
font-size: 10px;
line-height: 1.5;
}
.search-result-action,
.search-result-action a {
width: 100%;
}
.search-result-action a {
min-height: 38px;
justify-content: center;
}
.search-pagination {
gap: 8px;
margin-top: 18px;
}
/* =====================================================
DETALJI ZAPISA
===================================================== */
.details-page {
width: 100%;
max-width: none;
padding: 28px 10px 45px;
}
.details-header {
margin-bottom: 18px;
}
.details-kicker {
font-size: 9px;
letter-spacing: 0.12em;
}
.details-header h1 {
font-size: 25px;
line-height: 1.15;
}
.details-header p {
font-size: 12px;
line-height: 1.5;
}
.catalog-record {
width: 100%;
min-width: 0;
border-radius: 11px;
}
/* TRI TAB-a UVEK OSTAJU JEDAN PORED DRUGOG. */
.record-tabs {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px;
margin-bottom: -1px;
overflow: visible;
}
.record-tab {
width: 100%;
min-width: 0;
min-height: 48px;
padding: 9px 4px;
border-radius: 8px 8px 0 0;
font-size: 9px;
line-height: 1.2;
letter-spacing: 0;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
}
.record-title-block,
.record-section {
padding: 19px 15px;
}
.record-author {
font-size: 12px;
}
.record-title-block h2 {
font-size: 20px;
line-height: 1.3;
}
.record-subtitle {
font-size: 13px;
line-height: 1.45;
}
.record-field {
grid-template-columns: 1fr;
gap: 4px;
padding: 10px 0;
}
.record-label {
font-size: 10px;
}
.record-value {
font-size: 12px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.record-tags {
gap: 5px;
}
.record-tag {
padding: 5px 8px;
font-size: 10px;
}
.record-note {
padding: 12px 13px;
font-size: 11px;
}
.basic-record {
padding: 18px 13px;
}
.basic-record-label {
margin-bottom: 12px;
font-size: 9px;
}
.catalog-slip {
padding: 17px 14px;
font-size: 14px;
line-height: 1.7;
}
.catalog-slip-description,
.catalog-slip-udk,
.catalog-slip-isbn {
margin-left: 10px;
}
.catalog-note {
margin-top: 17px;
padding: 12px 13px;
font-size: 11px;
}
.copies-table {
width: 100%;
overflow: hidden;
}
.copies-header,
.copies-row {
grid-template-columns: 1fr;
}
.copies-header > div,
.copies-row > div {
padding: 9px 11px;
}
.copies-header > div:last-child {
display: none;
}
.copies-row > div:last-child {
padding-top: 0;
}
.record-system-info {
padding: 13px 15px;
}
.record-system-info div {
max-width: 100%;
flex-wrap: wrap;
gap: 5px;
font-size: 10px;
overflow-wrap: anywhere;
}
.details-actions {
flex-direction: column;
gap: 8px;
}
.details-button {
width: 100%;
min-height: 42px;
}
/* =====================================================
ADMINISTRACIJA — ZAJEDNIČKI MOBILNI IZGLED
===================================================== */
.admin-page {
width: 100%;
max-width: none;
padding: 25px 11px 45px;
}
.admin-header {
width: 100%;
align-items: stretch;
flex-direction: column;
gap: 12px;
margin-bottom: 19px;
}
.admin-kicker {
margin-bottom: 6px;
font-size: 9px;
letter-spacing: 1.8px;
}
.admin-header h1 {
font-size: 27px;
line-height: 1.15;
}
.admin-header p {
margin-top: 7px;
font-size: 12px;
line-height: 1.5;
}
.admin-user {
width: 100%;
min-width: 0;
padding: 10px 13px;
border-radius: 9px;
}
.admin-user span {
font-size: 9px;
}
.admin-user strong {
font-size: 12px;
}
.admin-content {
width: 100%;
margin-top: 18px;
}
.admin-grid {
width: 100%;
grid-template-columns: 1fr;
gap: 10px;
}
.admin-card {
min-height: 0;
padding: 18px;
border-radius: 11px;
}
.admin-card-icon {
width: 40px;
height: 40px;
margin-bottom: 14px;
font-size: 20px;
}
.admin-card h2 {
font-size: 14px;
line-height: 1.3;
}
.admin-card p {
max-width: none;
font-size: 11px;
line-height: 1.5;
}
.admin-card-link {
position: static;
width: fit-content;
min-width: 0;
height: 32px;
margin-top: 15px;
padding: 0 12px;
font-size: 9px;
}
.admin-footer-actions,
.admin-footer-right {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin-top: 18px;
}
.admin-back,
.admin-logout,
.admin-footer-right .admin-back {
width: 100%;
justify-content: center;
min-height: 40px;
}
/* -----------------------------------------------------
ADMIN FORME — BIBLIOTEKARI, NOVA KNJIGA,
IZMENA KNJIGE, LOZINKE
----------------------------------------------------- */
.admin-add-user {
width: 100%;
margin-bottom: 17px;
padding: 17px 14px;
border-radius: 11px;
}
.admin-add-user h2 {
font-size: 16px;
line-height: 1.3;
}
.admin-add-user > p {
margin-bottom: 16px;
font-size: 11px;
line-height: 1.5;
}
.admin-user-form {
width: 100%;
grid-template-columns: 1fr;
gap: 11px;
}
.admin-form-group {
width: 100%;
min-width: 0;
gap: 6px;
}
.admin-form-group label {
font-size: 10px;
}
.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea {
width: 100%;
min-width: 0;
min-height: 44px;
height: auto;
padding: 9px 11px;
font-size: 16px;
line-height: 1.35;
}
.admin-form-group textarea {
min-height: 88px;
}
.admin-primary-button,
.admin-secondary-button {
width: 100%;
min-height: 44px;
height: auto;
padding: 9px 14px;
font-size: 11px;
white-space: normal;
text-align: center;
}
.admin-form-actions {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin-top: 17px;
}
.admin-section-header {
margin-bottom: 13px;
}
.admin-section-header h2 {
font-size: 16px;
line-height: 1.3;
}
.admin-section-header p {
font-size: 11px;
line-height: 1.5;
}
.admin-message {
font-size: 11px;
line-height: 1.5;
}
/* -----------------------------------------------------
ADMIN TABELE
----------------------------------------------------- */
.admin-table-wrap {
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
border-radius: 10px;
}
.admin-table {
width: 100%;
min-width: 620px;
table-layout: auto;
}
.admin-table th,
.admin-table td {
padding: 9px 9px;
font-size: 10px;
line-height: 1.35;
overflow-wrap: anywhere;
word-break: break-word;
}
.admin-table th {
font-size: 9px;
white-space: normal;
}
.admin-table td strong {
font-size: 10px;
}
.admin-status {
padding: 4px 7px;
font-size: 8px;
}
.admin-table-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
margin-right: 3px;
padding: 0 8px;
font-size: 9px;
}
/* Tabele sa mnogo kolona dobijaju kontrolisano skrolovanje
unutar svog okvira, nikada preko cele stranice. */
.admin-book-search-page .admin-table {
min-width: 690px;
}
.admin-book-search-page .admin-table-wrap {
overflow-x: auto;
}
/* -----------------------------------------------------
PRETRAGA KNJIGA U ADMINISTRACIJI
----------------------------------------------------- */
.admin-book-search-page {
width: 100%;
min-width: 0;
}
.admin-book-search-page form {
width: 100%;
}
.admin-book-search-page input[type="text"] {
width: 100%;
min-height: 48px;
font-size: 16px;
}
.admin-book-search-page button[type="submit"] {
width: 100%;
min-height: 44px;
}
.admin-search-fields {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
margin-top: 10px;
}
.admin-search-fields label {
font-size: 10px;
}
/* -----------------------------------------------------
FILTERI — INVENTARNA KNJIGA / STATISTIKA
----------------------------------------------------- */
.admin-search-main {
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.admin-search-main select,
.admin-search-main input[type="number"] {
width: 100%;
min-width: 0;
height: 46px;
font-size: 16px;
}
.admin-search-main .admin-primary-button {
width: 100%;
height: auto;
min-height: 44px;
}
.admin-form-actions .admin-primary-button {
width: 100%;
}
/* -----------------------------------------------------
NOVA KNJIGA / IZMENA KNJIGE
----------------------------------------------------- */
.nova-knjiga-grid {
width: 100%;
grid-template-columns: 1fr;
gap: 11px;
}
.nova-knjiga-field-wide,
.nova-knjiga-field-full {
grid-column: 1;
}
.nova-knjiga-section {
width: 100%;
}
.nova-knjiga-section h2 {
font-size: 16px;
line-height: 1.3;
}
.nova-knjiga-section > p {
margin-bottom: 15px;
font-size: 11px;
line-height: 1.5;
}
.nova-knjiga-divider {
margin: 22px 0;
}
.nova-knjiga-submit {
width: 100%;
margin-top: 17px;
justify-content: stretch;
}
.nova-knjiga-submit .admin-primary-button {
width: 100%;
}
.nova-knjiga-success {
width: 100%;
align-items: stretch;
flex-direction: column;
gap: 10px;
padding: 13px;
}
.nova-knjiga-success .admin-primary-button {
width: 100%;
}
.edit-book-header {
width: 100%;
align-items: stretch;
flex-direction: column;
gap: 10px;
margin-bottom: 17px;
padding: 10px 0 15px;
}
.edit-book-actions {
width: 100%;
align-items: stretch;
flex-direction: column-reverse;
gap: 8px;
}
.edit-book-actions .admin-primary-button,
.edit-book-actions .admin-back {
width: 100%;
justify-content: center;
}
.edit-copies-header {
display: none;
}
.edit-copies-row {
grid-template-columns: 1fr;
gap: 5px;
padding: 9px 0;
}
.edit-copies-row > div {
padding: 4px 11px;
}
.edit-copies-row select,
.edit-copies-row input {
width: 100%;
max-width: none;
min-height: 42px;
}
.new-inventory-row {
grid-template-columns: 1fr;
}
.inventory-row {
grid-template-columns: 1fr;
gap: 8px;
}
.inventory-row-action {
align-items: stretch !important;
}
.inventory-remove {
width: 100%;
min-height: 40px;
height: 40px;
}
.inventory-add {
width: 100%;
min-height: 40px;
}
/* -----------------------------------------------------
UVOZ / OBNOVA / BACKUP
----------------------------------------------------- */
.admin-import-box,
.admin-card-body {
width: 100%;
padding: 17px 14px;
}
.admin-import-info {
padding: 13px;
margin-bottom: 16px;
}
.admin-import-info h2 {
font-size: 14px;
line-height: 1.35;
}
.admin-import-info p {
font-size: 11px;
}
.admin-file-field {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 7px;
padding: 11px 0;
}
.admin-file-field label {
font-size: 10px;
}
.admin-file-field input[type="file"],
.admin-file-input {
width: 100%;
max-width: none;
font-size: 13px;
}
.admin-import-actions {
width: 100%;
flex-direction: column;
gap: 8px;
}
.admin-import-actions .admin-login-button,
.admin-import-actions .admin-primary-button {
width: 100%;
}
.backup-card {
width: 100%;
max-width: none;
flex-direction: column;
gap: 11px;
}
.backup-card .admin-form-actions {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.backup-card .admin-primary-button,
.backup-card .admin-secondary-button {
width: 100%;
}
.admin-warning-box {
padding: 13px 14px;
margin-bottom: 16px;
font-size: 11px;
line-height: 1.5;
}
.admin-warning-box strong {
font-size: 13px;
}
.admin-confirm-box {
padding: 11px 12px;
margin-top: 17px;
}
.admin-confirm-box label {
gap: 8px;
font-size: 11px;
line-height: 1.45;
}
.admin-confirm-box input[type="checkbox"] {
width: 18px;
height: 18px;
}
/* -----------------------------------------------------
STATISTIKA PRINOVA / IZVEŠTAJI
----------------------------------------------------- */
.statistika-dokument-header {
width: 100%;
align-items: flex-start;
flex-direction: column;
gap: 10px;
padding: 15px;
}
.statistika-dokument-info,
.statistika-dokument-library,
.statistika-dokument-line {
max-width: 100%;
}
.statistika-ukupno {
font-size: 11px;
}
/* -----------------------------------------------------
ADMIN PAGINACIJA
----------------------------------------------------- */
.admin-pagination {
width: 100%;
gap: 5px;
}
.admin-pagination-button {
min-height: 36px;
flex: 1 1 auto;
padding: 0 8px;
font-size: 9px;
}
.admin-pagination-info {
width: 100%;
order: -1;
min-height: 30px;
margin-bottom: 2px;
font-size: 10px;
}
/* -----------------------------------------------------
PRIJAVA BIBLIOTEKARA
----------------------------------------------------- */
.admin-login-page {
min-height: calc(100vh - 130px);
width: 100%;
padding: 25px 11px 40px;
}
.admin-login-box {
width: 100%;
max-width: 430px;
padding: 22px 16px;
border-radius: 11px;
}
.admin-login-kicker {
font-size: 9px;
letter-spacing: 1.5px;
}
.admin-login-box h1 {
font-size: 21px;
line-height: 1.2;
}
.admin-login-description {
margin-bottom: 20px;
font-size: 11px;
line-height: 1.5;
}
.admin-login-field {
margin-bottom: 14px;
}
.admin-login-field label {
font-size: 10px;
}
.admin-login-field input {
width: 100%;
height: 46px;
font-size: 16px;
}
.admin-login-box .admin-login-button {
width: 100%;
min-height: 44px;
}
/* -----------------------------------------------------
UDK ADMINISTRACIJA
----------------------------------------------------- */
.admin-page-header {
width: 100%;
margin-bottom: 18px;
}
.admin-page-header h1 {
font-size: 27px;
line-height: 1.15;
}
.udk-generator-card,
.udk-results-card {
width: 100%;
min-width: 0;
padding: 15px;
border-radius: 11px;
}
.udk-form-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.udk-form-wide {
grid-column: 1;
}
.udk-search-row {
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.udk-search-form input,
.udk-form-input,
.udk-form-textarea {
width: 100%;
min-width: 0;
min-height: 44px;
font-size: 16px;
}
.udk-form-textarea {
min-height: 90px;
}
.udk-generate-button,
.udk-form-actions .admin-primary-button {
width: 100%;
}
.udk-results {
width: 100%;
min-width: 0;
}
}
/* -----------------------------------------------------
MANJE ŠIRINE — VEOMA USKI TELEFONI
----------------------------------------------------- */
@media (max-width: 380px) {
.header-program {
font-size: 14px;
}
.header-logo {
width: 48px;
flex-basis: 48px;
}
.main-navigation a {
padding: 0 5px;
font-size: 8px;
}
.home-introduction h1 {
font-size: 28px;
}
.catalog-statistics {
width: calc(100% - 12px);
margin-left: 6px;
margin-right: 6px;
padding-left: 3px;
padding-right: 3px;
}
.catalog-stat {
padding: 0 2px;
}
.catalog-stat-title {
font-size: 7px;
}
.catalog-stat-number {
font-size: 18px;
}
.catalog-stat-secondary {
font-size: 8px;
}
.record-tab {
min-height: 50px;
padding-left: 2px;
padding-right: 2px;
font-size: 8px;
}
.admin-page {
padding-left: 8px;
padding-right: 8px;
}
.admin-add-user,
.admin-card-body,
.admin-import-box {
padding-left: 12px;
padding-right: 12px;
}
}
/* ==========================================================
JAVNI KATALOG – IZBOR JEZIKA
========================================================== */
.public-language-switcher {
display: flex;
align-items: center;
gap: 6px;
margin-left: 14px;
flex-shrink: 0;
}
.public-language-button {
width: 30px;
height: 22px;
padding: 0;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
cursor: pointer;
overflow: hidden;
opacity: .62;
transition: opacity .15s ease, transform .15s ease, border-color .15s ease;
}
.public-language-button img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.public-language-button:hover,
.public-language-button.active {
opacity: 1;
}
.public-language-button.active {
border-color: rgba(0,0,0,.28);
transform: translateY(-1px);
}
@media (max-width: 767px) {
.public-language-switcher {
margin-left: 0;
justify-content: center;
gap: 5px;
}
.public-language-button {
width: 29px;
height: 21px;
}
}
/* ==========================================================
JAVNI KATALOG – STABILNO ZAGLAVLJE SA DUŽIM PREVODIMA
----------------------------------------------------------
Samo desktop/tablet iznad 900px. Mobilni blokovi ispod
ostaju nepromenjeni.
========================================================== */
@media (min-width: 901px) {
.header-inner {
gap: 16px;
}
.header-brand {
min-width: 0;
flex: 1 1 auto;
}
.header-brand-text {
min-width: 0;
}
.main-navigation {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
white-space: nowrap;
flex: 0 0 auto;
gap: 0;
}
.main-navigation a {
flex: 0 0 auto;
white-space: nowrap;
}
.nav-librarians {
flex: 0 0 auto;
white-space: nowrap;
margin-left: 8px;
}
.public-language-switcher {
flex: 0 0 auto;
margin-left: 8px;
}
}
/* =========================================================
BIBLIOBOS – STATUS FONDA, REVIZIJA, ONLINE I ZAVIČAJNA
========================================================= */
.catalog-search-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(0, 77, 0, .12);
}
.catalog-search-filters label {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 600;
cursor: pointer;
}
.catalog-search-filters input[type="checkbox"] {
width: 17px;
height: 17px;
}
.record-online-block,
.record-heritage-block {
display: flex;
align-items: center;
gap: 16px;
margin-top: 22px;
padding: 18px 20px;
border-radius: 12px;
border: 1px solid rgba(0, 77, 0, .16);
background: rgba(0, 77, 0, .045);
}
.record-online-icon {
font-size: 2rem;
flex: 0 0 auto;
}
.record-online-content {
min-width: 0;
}
.record-online-content strong,
.record-heritage-block strong {
display: block;
font-size: 1rem;
}
.record-online-content p,
.record-heritage-block p {
margin: 4px 0 10px;
}
.record-online-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 8px 14px;
border-radius: 8px;
text-decoration: none;
font-weight: 700;
}
.record-heritage-block {
align-items: flex-start;
}
.record-heritage-block > span {
font-size: 1.6rem;
}
.record-note {
white-space: pre-line;
}
.copies-header,
.copies-row {
grid-template-columns: minmax(100px, 1fr) minmax(150px, 1.4fr) minmax(180px, 1.5fr) minmax(140px, 1.2fr);
}
.copy-usage-loan {
font-weight: 700;
}
.copy-usage-reading {
font-weight: 700;
}
.copy-heritage {
font-weight: 700;
}
.admin-inventory-list {
min-width: 150px;
font-size: .9rem;
line-height: 1.45;
}
.admin-search-title-col {
min-width: 220px;
}
.inventory-status-select.inventory-status-active {
border-color: #2e7d32;
color: #176b1c;
font-weight: 700;
}
.inventory-status-select.inventory-status-retired {
border-color: #c62828;
color: #b71c1c;
font-weight: 700;
}
.inventory-heritage {
min-width: 125px;
}
.inventory-check-label {
display: inline-flex !important;
align-items: center;
gap: 6px;
cursor: pointer;
font-weight: 600;
}
.inventory-check-label input[type="checkbox"] {
width: 17px;
height: 17px;
}
/* =========================================================
BIBLIOBOS – PRIMERCI, REŽIM KORIŠĆENJA I ZAVIČAJNA ZBIRKA
========================================================= */
.copies-header,
.copies-row {
grid-template-columns: 1.1fr 1.2fr 1.8fr 1.4fr;
}
.copy-usage {
min-width: 0;
}
.copy-free-loan {
color: #287a36;
font-weight: 600;
}
.copy-reading-room {
color: #9a7412;
font-weight: 600;
}
.copy-heritage {
font-weight: 600;
}
.inventory-heritage-check {
display: flex;
align-items: center;
}
.inventory-heritage-check label {
display: flex;
align-items: center;
gap: 7px;
cursor: pointer;
}
.inventory-heritage-check input[type="checkbox"] {
width: auto;
}
.catalog-search-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(0,0,0,.08);
}
.catalog-search-filters > span {
font-weight: 700;
}
.catalog-search-filters label {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.catalog-search-filters input[type="checkbox"] {
width: auto;
}
.record-online-block {
display: flex;
gap: 14px;
align-items: flex-start;
margin: 20px 0;
padding: 18px;
border-radius: 12px;
background: rgba(0, 77, 0, .06);
border: 1px solid rgba(0, 77, 0, .16);
}
.record-online-block > span {
font-size: 28px;
}
.record-online-block p {
margin: 5px 0 12px;
}
.record-heritage-block {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 16px 0;
padding: 15px;
border-radius: 12px;
background: rgba(150, 110, 20, .07);
border: 1px solid rgba(150, 110, 20, .18);
}
@media (max-width: 767px) {
.copies-header,
.copies-row {
grid-template-columns: 1fr;
gap: 7px;
}
.copies-header {
display: none;
}
.copies-row {
padding: 12px;
}
.catalog-search-filters {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.record-online-block {
padding: 14px;
}
}
.loading-book {
display: block;
width: 90px;
height: auto;
margin: 12px auto 0;
object-fit: contain;
}
/* BiblioBos: поправке табела претраге и ревизије */
.admin-table th, .admin-table td {
vertical-align: middle;
}
.admin-table th:nth-child(4), .admin-table td:nth-child(4) {
min-width: 150px;
width: 17%;
overflow-wrap: anywhere;
}
.admin-table th:last-child, .admin-table td:last-child {
min-width: 105px;
width: 110px;
white-space: nowrap;
}
.admin-table-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 76px;
white-space: nowrap;
}
/* BIBLIOBOS – tabelarni raspored za desktop i mobilne uređaje */
.admin-table-wrap {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admin-table {
width: 100%;
table-layout: auto;
border-collapse: separate;
border-spacing: 0;
}
.admin-table th, .admin-table td {
word-break: normal;
overflow-wrap: normal;
hyphens: none;
vertical-align: middle;
}
.admin-table th {
white-space: normal;
min-width: 95px;
line-height: 1.35;
text-align: left;
}
.admin-table td {
white-space: normal;
min-width: 80px;
}
.admin-table td:last-child {
min-width: 110px;
}
.admin-table tbody tr:nth-child(even) {
background: #f7faf8;
}
.admin-table tbody tr:hover {
background: #edf5ef;
}
.admin-table-action {
white-space: nowrap;
}
@media (max-width: 767px) {
.admin-table-wrap {
overflow-x: auto;
}
.admin-table {
width: max-content;
min-width: 100%;
}
.admin-table th, .admin-table td {
padding: 10px 12px;
font-size: 13px;
}
.admin-table th {
min-width: 110px;
}
.admin-table td {
min-width: 100px;
}
}
/* =========================================================
BIBLIOBOS – ISBD prikaz osnovnih podataka (COBISS stil)
Ograničeno isključivo na karticu „Osnovni podaci“.
========================================================= */
#tab-basic .basic-record {
padding: 28px 36px;
}
#tab-basic .catalog-slip {
padding: 22px 20px;
background: #f1f5f9;
border: 0;
border-radius: 8px;
box-shadow: none;
color: #42536d;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 15px;
line-height: 1.7;
}
#tab-basic .catalog-slip-author {
margin: 0 0 2px;
color: #172033;
font-size: 15px;
font-weight: 600;
}
#tab-basic .catalog-slip-description {
margin: 0;
padding-left: 18px;
white-space: pre-line;
overflow-wrap: anywhere;
}
#tab-basic .catalog-slip-udk {
margin: 24px 0 0;
padding-left: 0;
color: #42536d;
font-size: 14px;
font-weight: 500;
}
#tab-basic .catalog-note {
margin-top: 22px;
padding: 14px 18px;
border-left: 3px solid #9aaac0;
background: #f8fafc;
color: #42536d;
font-size: 14px;
line-height: 1.65;
white-space: pre-line;
}
@media (max-width: 700px) {
#tab-basic .basic-record {
padding: 18px 14px;
}
#tab-basic .catalog-slip {
padding: 18px 15px;
font-size: 14px;
line-height: 1.65;
}
#tab-basic .catalog-slip-description {
padding-left: 12px;
}
#tab-basic .catalog-slip-udk {
margin-top: 18px;
}
#tab-basic .catalog-note {
padding: 12px 14px;
}
}
/* Dugme za povratak na vrh – izgled knjige */
.back-to-top {
position: fixed;
right: 25px;
bottom: 25px;
z-index: 9999;
width: 54px;
height: 54px;
border: none;
border-radius: 50%;
background: #1e3a5f;
color: #ffffff;
font-size: 27px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
/* Dugme se prikazuje nakon skrolovanja */
.back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Efekat pri prelasku mišem */
.back-to-top:hover {
background: #2d5b8a;
transform: translateY(-4px);
}
/* Prilagođavanje za telefone */
@media (max-width: 768px) {
.back-to-top {
right: 16px;
bottom: 18px;
width: 48px;
height: 48px;
font-size: 24px;
}
}
/* =====================================================
ADMIN — ОСНОВНЕ ЦЕЛИНЕ
===================================================== */
.admin-page {
display: flex;
flex-direction: column;
gap: 30px;
}
/* Свака административна целина */
.admin-section {
position: relative;
padding: 26px;
background: #f8faf8;
border: 1px solid #d7e3d7;
border-radius: 18px;
box-shadow: 0 5px 18px rgba(0, 60, 0, 0.06);
}
/* Наслов и опис целине */
.admin-section-header {
margin-bottom: 22px;
padding: 0 0 17px;
border-bottom: 2px solid #dce8dc;
}
.admin-section-header h2 {
margin: 0 0 8px;
color: #174d24;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: 0.03em;
}
.admin-section-header p {
margin: 0;
color: #607064;
font-size: 0.95rem;
line-height: 1.5;
}
/* Распоред картица унутар целине */
.admin-section .admin-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
/* =====================================================
DUPLIKATI — IZBOR BROJA REZULTATA I PAGINACIJA
===================================================== */
.duplicate-page-options {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin: 20px 0;
padding: 15px 18px;
background: #f8fafc;
border: 1px solid #dbe3ec;
border-radius: 10px;
}
.duplicate-page-options label {
margin: 0;
color: #334155;
font-size: 14px;
font-weight: 600;
}
.duplicate-page-options select {
min-width: 90px;
height: 40px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #172033;
font: inherit;
}
.duplicate-pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin: 26px 0;
}
.duplicate-pagination span {
color: #475569;
font-size: 14px;
font-weight: 600;
}
@media (max-width: 600px) {
.duplicate-page-options {
align-items: stretch;
flex-direction: column;
}
.duplicate-page-options select {
width: 100%;
}
.duplicate-pagination {
gap: 8px;
}
}
/* =========================================================
BIBLIO BOSS+
REVIZIJA FONDA
========================================================= */
.admin-revision-page {
max-width: 1280px;
margin: 0 auto;
padding-bottom: 50px;
}
/* ---------------------------------------------------------
NASLOV
--------------------------------------------------------- */
.admin-revision-page .revision-page-header {
margin-bottom: 28px;
}
.admin-revision-page .revision-page-header p {
margin-top: 8px;
color: #64748b;
}
/* ---------------------------------------------------------
GLAVNI PANEL
--------------------------------------------------------- */
.revision-dashboard {
padding: 28px;
background: #ffffff;
border: 1px solid #dfe6ee;
border-radius: 16px;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
}
/* ---------------------------------------------------------
NASLOV SEKCIJE
--------------------------------------------------------- */
.revision-page-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding-bottom: 24px;
border-bottom: 1px solid #e8edf3;
}
.revision-kicker {
display: block;
margin-bottom: 7px;
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.revision-page-title h2 {
margin: 0;
color: #172033;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.3px;
}
.revision-page-title p {
margin: 8px 0 0;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
/* ---------------------------------------------------------
NOVA REVIZIJA
--------------------------------------------------------- */
.revision-new-button {
display: flex;
align-items: center;
gap: 13px;
min-width: 265px;
padding: 13px 17px;
border: 1px solid #173765;
border-radius: 10px;
background: #173765;
color: #ffffff;
text-decoration: none;
box-shadow: 0 5px 15px rgba(23, 55, 101, 0.16);
transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.revision-new-button:hover {
color: #ffffff;
background: #214b80;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(23, 55, 101, 0.22);
text-decoration: none;
}
.revision-new-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 8px;
background: rgba(255, 255, 255, .13);
font-size: 23px;
font-weight: 300;
}
.revision-new-button strong {
display: block;
font-size: 11px;
letter-spacing: .3px;
}
.revision-new-button small {
display: block;
margin-top: 3px;
color: rgba(255, 255, 255, .68);
font-size: 10px;
}
/* ---------------------------------------------------------
BROJ REVIZIJA
--------------------------------------------------------- */
.revision-list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 25px 0 12px;
}
.revision-list-header div {
display: flex;
align-items: center;
gap: 9px;
}
.revision-list-header span {
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
}
.revision-list-header strong {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 27px;
height: 27px;
padding: 0 8px;
border-radius: 7px;
background: #eef3f8;
color: #173765;
font-size: 12px;
}
/* ---------------------------------------------------------
TABELA
--------------------------------------------------------- */
.revision-table-wrap {
width: 100%;
overflow-x: auto;
border: 1px solid #dfe6ee;
border-radius: 12px;
background: #ffffff;
-webkit-overflow-scrolling: touch;
}
.revision-table {
width: 100%;
min-width: 980px;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.revision-table th {
padding: 12px 14px;
background: #f3f6f9;
border-bottom: 1px solid #dfe6ee;
color: #52657d;
font-size: 10px;
font-weight: 800;
letter-spacing: .5px;
text-align: left;
}
.revision-table td {
padding: 15px 14px;
border-bottom: 1px solid #edf1f5;
color: #334155;
font-size: 13px;
vertical-align: middle;
}
.revision-table tbody tr:last-child td {
border-bottom: 0;
}
.revision-table tbody tr {
transition: background .15s ease;
}
.revision-table tbody tr:hover {
background: #f8fafc;
}
/* KOLONE */
.revision-table th:nth-child(1),
.revision-table td:nth-child(1) {
width: 27%;
}
.revision-table th:nth-child(2),
.revision-table td:nth-child(2) {
width: 14%;
}
.revision-table th:nth-child(3),
.revision-table td:nth-child(3) {
width: 17%;
}
.revision-table th:nth-child(4),
.revision-table td:nth-child(4) {
width: 12%;
}
.revision-table th:nth-child(5),
.revision-table td:nth-child(5) {
width: 30%;
}
/* ---------------------------------------------------------
NAZIV
--------------------------------------------------------- */
.revision-name {
display: flex;
align-items: center;
gap: 11px;
}
.revision-name-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 9px;
background: #f0f4f8;
font-size: 17px;
}
.revision-name strong {
display: block;
color: #172033;
font-size: 13px;
line-height: 1.4;
}
.revision-name small {
display: block;
margin-top: 3px;
color: #8a97a8;
font-size: 10px;
}
/* ---------------------------------------------------------
LOKACIJA I PERIOD
--------------------------------------------------------- */
.revision-location {
color: #475569;
font-weight: 600;
}
.revision-period {
display: inline-flex;
align-items: center;
gap: 6px;
color: #475569;
white-space: nowrap;
}
.revision-period span {
color: #94a3b8;
}
/* ---------------------------------------------------------
STATUS
--------------------------------------------------------- */
.revision-status {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 10px;
border-radius: 20px;
font-size: 10px;
font-weight: 800;
white-space: nowrap;
}
.revision-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
}
.revision-status-active {
background: #fff6db;
color: #87630b;
}
.revision-status-active .revision-status-dot {
background: #d6a91b;
}
.revision-status-finished {
background: #e8f5ec;
color: #26703c;
}
.revision-status-finished .revision-status-dot {
background: #3b9656;
}
/* ---------------------------------------------------------
DUGMAD
--------------------------------------------------------- */
.revision-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.revision-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 0 9px;
border: 1px solid #d3dce6;
border-radius: 7px;
background: #ffffff;
color: #40546d;
text-decoration: none;
font-size: 9px;
font-weight: 800;
letter-spacing: .2px;
white-space: nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.revision-action:hover {
background: #f1f5f9;
border-color: #aebdcd;
color: #173765;
text-decoration: none;
transform: translateY(-1px);
}
.revision-action-main {
background: #173765;
border-color: #173765;
color: #ffffff;
}
.revision-action-main:hover {
background: #214b80;
border-color: #214b80;
color: #ffffff;
}
/* ---------------------------------------------------------
NEMA REVIZIJA
--------------------------------------------------------- */
.revision-empty {
margin-top: 25px;
padding: 55px 25px;
border: 1px dashed #ccd6e1;
border-radius: 12px;
background: #f8fafc;
text-align: center;
}
.revision-empty-icon {
margin-bottom: 14px;
font-size: 34px;
}
.revision-empty strong {
display: block;
color: #334155;
font-size: 15px;
}
.revision-empty p {
margin: 7px 0 20px;
color: #7b8798;
font-size: 12px;
}
.revision-empty-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 16px;
border-radius: 8px;
background: #173765;
color: #ffffff;
text-decoration: none;
font-size: 10px;
font-weight: 800;
}
.revision-empty-button:hover {
background: #214b80;
color: #ffffff;
text-decoration: none;
}
/* ---------------------------------------------------------
MOBILNI
--------------------------------------------------------- */
@media (max-width: 900px) {
.revision-page-title {
align-items: stretch;
flex-direction: column;
}
.revision-new-button {
width: 100%;
box-sizing: border-box;
}
.revision-table {
min-width: 900px;
}
}
@media (max-width: 600px) {
.revision-dashboard {
padding: 18px;
border-radius: 12px;
}
.revision-page-title h2 {
font-size: 21px;
}
.revision-page-title p {
font-size: 12px;
}
.revision-new-button {
min-width: 0;
}
.revision-table {
min-width: 880px;
}
.revision-table th,
.revision-table td {
padding: 11px 10px;
}
}
/* ============================================================
REVIZIJA — LISTE 1–4 I ZAPISNIK
Jedinstven vizuelni sistem za stranice revizije.
============================================================ */
.revision-list-page,
.revision-record-page {
max-width: 1480px;
margin: 0 auto;
padding: 28px 22px 50px;
}
.revision-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 26px 28px;
margin-bottom: 22px;
border: 1px solid #dce7df;
border-radius: 18px;
background: linear-gradient(135deg, #ffffff 0%, #f4f9f5 100%);
box-shadow: 0 8px 28px rgba(0, 55, 30, .07);
}
.revision-hero-main {
min-width: 0;
}
.revision-page-number {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 11px;
border-radius: 999px;
background: #e5f1e8;
color: #17623a;
font-size: .76rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.revision-hero h1 {
margin: 8px 0 6px;
color: #123c29;
font-size: clamp(1.55rem, 3vw, 2.25rem);
line-height: 1.15;
}
.revision-hero-description {
max-width: 900px;
margin: 0;
color: #5f6e66;
line-height: 1.55;
}
.revision-meta {
display: flex;
flex-wrap: wrap;
gap: 9px 12px;
margin-top: 17px;
}
.revision-meta-item {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border: 1px solid #dbe6df;
border-radius: 10px;
background: #fff;
color: #31463b;
font-size: .9rem;
}
.revision-meta-item strong {
color: #123c29;
}
.revision-back {
flex: 0 0 auto;
white-space: nowrap;
}
.revision-alert {
margin: 0 0 18px;
padding: 13px 16px;
border: 1px solid #b8d7c2;
border-radius: 12px;
background: #edf8f0;
color: #205c36;
}
.revision-card {
margin-bottom: 20px;
padding: 24px;
border: 1px solid #dfe7e2;
border-radius: 16px;
background: #fff;
box-shadow: 0 5px 20px rgba(20, 55, 38, .055);
}
.revision-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.revision-card-title {
margin: 0;
color: #173d2b;
font-size: 1.18rem;
font-weight: 800;
}
.revision-card-subtitle {
margin: 5px 0 0;
color: #718078;
font-size: .9rem;
}
.revision-form-grid {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(260px, 2fr);
gap: 18px;
align-items: end;
}
.revision-form-grid--wide {
grid-template-columns: minmax(220px, 1fr) minmax(300px, 2fr) auto;
}
.revision-field {
min-width: 0;
}
.revision-field label {
display: block;
margin-bottom: 7px;
color: #2b4036;
font-size: .84rem;
font-weight: 750;
}
.revision-field .form-control,
.revision-search-box .form-control {
width: 100%;
min-height: 44px;
border: 1px solid #ccd9d1;
border-radius: 10px;
background: #fff;
color: #24352d;
transition: border-color .18s ease, box-shadow .18s ease;
}
.revision-field textarea.form-control {
min-height: 86px;
resize: vertical;
}
.revision-field .form-control:focus,
.revision-search-box .form-control:focus {
border-color: #2b7b50;
box-shadow: 0 0 0 3px rgba(43, 123, 80, .12);
}
.revision-form-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
}
.revision-search-box {
display: grid;
grid-template-columns: minmax(260px, 1fr) auto auto;
gap: 10px;
align-items: end;
padding: 14px;
margin-bottom: 18px;
border: 1px solid #e1e8e3;
border-radius: 12px;
background: #f7faf8;
}
.revision-search-box .revision-field {
margin: 0;
}
.revision-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 15px;
}
.revision-toolbar-left {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.revision-count {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 6px 11px;
border-radius: 999px;
background: #edf4ef;
color: #255b3c;
font-size: .82rem;
font-weight: 800;
}
.revision-table-card {
overflow: hidden;
border: 1px solid #dfe7e2;
border-radius: 14px;
background: #fff;
}
.revision-table-scroll {
width: 100%;
overflow-x: auto;
}
.revision-data-table {
width: 100%;
min-width: 1120px;
border-collapse: separate;
border-spacing: 0;
}
.revision-data-table th {
padding: 12px 11px;
border-bottom: 1px solid #cddbd2;
background: #edf5ef;
color: #28483a;
font-size: .74rem;
font-weight: 850;
letter-spacing: .035em;
text-align: left;
white-space: nowrap;
}
.revision-data-table td {
padding: 12px 11px;
border-bottom: 1px solid #edf1ee;
color: #35463e;
font-size: .88rem;
vertical-align: middle;
}
.revision-data-table tbody tr:last-child td {
border-bottom: 0;
}
.revision-data-table tbody tr:hover {
background: #f8fbf9;
}
.revision-data-table .col-check {
width: 52px;
text-align: center;
}
.revision-data-table .col-no {
width: 58px;
text-align: center;
color: #718078;
}
.revision-data-table .col-inventory {
width: 125px;
}
.revision-data-table .col-signature {
width: 120px;
}
.revision-data-table .col-title {
min-width: 220px;
}
.revision-data-table .col-author {
min-width: 165px;
}
.revision-data-table .col-publisher {
min-width: 150px;
}
.revision-data-table .col-year {
width: 78px;
text-align: center;
}
.revision-data-table .col-status {
width: 120px;
}
.revision-data-table .col-action {
width: 145px;
}
.revision-inventory {
color: #164f31;
font-weight: 850;
letter-spacing: .01em;
}
.revision-muted {
color: #89958f;
}
.revision-status {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 9px;
border-radius: 999px;
font-size: .72rem;
font-weight: 850;
white-space: nowrap;
}
.revision-status--in {
background: #e7f5eb;
color: #21703e;
}
.revision-status--out {
background: #fdebec;
color: #9d2c32;
}
.revision-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.revision-check {
width: 17px;
height: 17px;
accent-color: #267548;
cursor: pointer;
}
.revision-action-button {
border: 0;
border-radius: 8px;
padding: 7px 10px;
background: #fff0f0;
color: #a22d32;
font-size: .78rem;
font-weight: 800;
cursor: pointer;
}
.revision-action-button:hover {
background: #fbdede;
}
.revision-bulk-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 13px 15px;
margin-bottom: 14px;
border: 1px solid #f0d4d4;
border-radius: 12px;
background: #fff8f8;
}
.revision-bulk-help {
margin: 0;
color: #765d5d;
font-size: .85rem;
}
.revision-empty {
padding: 42px 20px;
text-align: center;
color: #75817b;
}
.revision-empty-icon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
margin: 0 auto 12px;
border-radius: 14px;
background: #edf5ef;
color: #267548;
font-size: 1.5rem;
}
.revision-record-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.revision-record-grid .revision-field--full {
grid-column: 1 / -1;
}
.revision-commission {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.revision-summary-box {
margin-top: 22px;
}
.revision-summary-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.revision-status-banner {
padding: 12px 15px;
border-radius: 11px;
font-weight: 750;
}
.revision-status-banner--finished {
border: 1px solid #b9dbc4;
background: #edf8f0;
color: #23663b;
}
.revision-stat-grid {
display: grid;
grid-template-columns: repeat(6, minmax(110px, 1fr));
gap: 10px;
margin: 18px 0 24px;
}
.revision-stat {
min-height: 92px;
padding: 15px;
border: 1px solid #dce6df;
border-radius: 12px;
background: #f8fbf9;
}
.revision-stat span {
display: block;
min-height: 34px;
color: #68776f;
font-size: .73rem;
line-height: 1.35;
}
.revision-stat strong {
display: block;
margin-top: 7px;
color: #174d31;
font-size: 1.55rem;
}
.revision-list-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.revision-list-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 17px;
border: 1px solid #d9e5dc;
border-radius: 12px;
background: #fff;
color: #1f5738;
text-decoration: none;
font-weight: 800;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.revision-list-link:hover {
border-color: #7eb091;
box-shadow: 0 5px 16px rgba(28, 91, 54, .08);
transform: translateY(-1px);
color: #16482e;
}
.revision-list-link small {
color: #6c7b73;
font-weight: 650;
}
.revision-page-actions {
display: flex;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
}
@media (max-width: 1050px) {
.revision-stat-grid {
grid-template-columns: repeat(3, minmax(110px, 1fr));
}
.revision-form-grid,
.revision-form-grid--wide {
grid-template-columns: 1fr;
}
}
@media (max-width: 800px) {
.revision-list-page,
.revision-record-page {
padding: 18px 12px 35px;
}
.revision-hero {
flex-direction: column;
padding: 20px;
}
.revision-back {
width: 100%;
}
.revision-back .btn {
width: 100%;
}
.revision-card {
padding: 18px;
}
.revision-search-box {
grid-template-columns: 1fr;
}
.revision-record-grid,
.revision-list-links {
grid-template-columns: 1fr;
}
.revision-commission {
grid-template-columns: 1fr;
}
.revision-stat-grid {
grid-template-columns: repeat(2, minmax(110px, 1fr));
}
}
@media (max-width: 520px) {
.revision-hero h1 {
font-size: 1.45rem;
}
.revision-meta {
flex-direction: column;
}
.revision-meta-item {
width: 100%;
}
.revision-stat-grid {
grid-template-columns: 1fr 1fr;
}
.revision-form-actions .btn,
.revision-toolbar-left .btn {
width: 100%;
}
.revision-toolbar-left {
width: 100%;
}
}
/* =========================================================
BIBLIOBOS – RASHODOVANO
========================================================= */
.rashod-page {
width: 100%;
}
.rashod-header {
align-items: flex-start;
gap: 28px;
}
.rashod-header > div:first-child {
min-width: 0;
}
.rashod-header-actions {
display: flex;
align-items: stretch;
gap: 12px;
flex-shrink: 0;
}
.rashod-total-card {
min-width: 145px;
padding: 14px 18px;
display: flex;
flex-direction: column;
justify-content: center;
background: #fff7f7;
border: 1px solid #fecaca;
border-radius: 12px;
}
.rashod-total-card span {
color: #991b1b;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
}
.rashod-total-card strong {
margin-top: 2px;
color: #991b1b;
font-size: 27px;
line-height: 1;
}
.rashod-total-card small {
margin-top: 4px;
color: #7f1d1d;
font-size: 10px;
}
.rashod-excel-button {
min-width: 205px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 11px;
text-decoration: none;
color: #166534;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 12px;
transition: .18s ease;
}
.rashod-excel-button:hover {
color: #14532d;
background: #dcfce7;
border-color: #86efac;
transform: translateY(-1px);
}
.rashod-excel-icon {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
border-radius: 9px;
background: #16a34a;
color: white;
font-size: 19px;
font-weight: 800;
}
.rashod-excel-button strong {
display: block;
font-size: 12px;
letter-spacing: .4px;
}
.rashod-excel-button small {
display: block;
margin-top: 3px;
color: #64748b;
font-size: 10px;
}
.rashod-filter-card,
.rashod-table-card {
margin-bottom: 20px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 5px 20px rgba(15, 23, 42, .045);
}
.rashod-filter-card {
padding: 22px;
}
.rashod-section-heading,
.rashod-table-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.rashod-section-heading {
margin-bottom: 19px;
}
.rashod-kicker {
display: block;
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
}
.rashod-section-heading h2,
.rashod-table-heading h2 {
margin: 4px 0 0;
color: #172033;
font-size: 19px;
font-weight: 750;
}
.rashod-result-count {
padding: 7px 11px;
color: #334155;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 12px;
font-weight: 800;
}
.rashod-result-count span {
margin-left: 3px;
color: #94a3b8;
font-weight: 600;
}
.rashod-filter-form {
display: grid;
grid-template-columns: minmax(260px, 1.7fr) minmax(190px, 1fr) 145px 145px auto;
gap: 13px;
align-items: end;
}
.rashod-field {
min-width: 0;
}
.rashod-field label {
display: block;
margin-bottom: 6px;
color: #475569;
font-size: 11px;
font-weight: 750;
}
.rashod-field input,
.rashod-field select {
width: 100%;
height: 42px;
box-sizing: border-box;
padding: 0 11px;
color: #1e293b;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 8px;
font: inherit;
font-size: 13px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.rashod-field input:focus,
.rashod-field select:focus {
border-color: #64748b;
box-shadow: 0 0 0 3px rgba(100, 116, 139, .1);
}
.rashod-filter-actions {
display: flex;
gap: 7px;
align-items: center;
}
.rashod-search-button,
.rashod-reset-button {
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 15px;
border-radius: 8px;
font-size: 11px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.rashod-search-button {
border: 1px solid #334155;
background: #334155;
color: #fff;
}
.rashod-search-button:hover {
background: #1e293b;
border-color: #1e293b;
}
.rashod-reset-button {
border: 1px solid #cbd5e1;
background: #fff;
color: #475569;
}
.rashod-reset-button:hover {
background: #f8fafc;
color: #172033;
}
.rashod-table-card {
overflow: hidden;
}
.rashod-table-heading {
padding: 18px 20px;
border-bottom: 1px solid #e2e8f0;
}
.rashod-table-excel {
padding: 8px 12px;
color: #166534;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 7px;
font-size: 10px;
font-weight: 850;
letter-spacing: .5px;
text-decoration: none;
}
.rashod-table-excel:hover {
background: #dcfce7;
color: #14532d;
}
.rashod-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rashod-table {
width: 100%;
min-width: 1250px;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.rashod-table th {
padding: 12px 11px;
color: #64748b;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
font-size: 9px;
font-weight: 850;
letter-spacing: .65px;
text-align: left;
white-space: nowrap;
}
.rashod-table td {
padding: 12px 11px;
color: #334155;
border-bottom: 1px solid #edf2f7;
vertical-align: middle;
font-size: 12px;
}
.rashod-table tbody tr:nth-child(even) {
background: #fcfdfd;
}
.rashod-table tbody tr:hover {
background: #f7faf9;
}
.rashod-table th:nth-child(1), .rashod-table td:nth-child(1) {
width: 105px;
}
.rashod-table th:nth-child(2), .rashod-table td:nth-child(2) {
width: 115px;
}
.rashod-table th:nth-child(3), .rashod-table td:nth-child(3) {
width: 245px;
}
.rashod-table th:nth-child(4), .rashod-table td:nth-child(4) {
width: 190px;
}
.rashod-table th:nth-child(5), .rashod-table td:nth-child(5) {
width: 145px;
}
.rashod-table th:nth-child(6), .rashod-table td:nth-child(6) {
width: 135px;
}
.rashod-table th:nth-child(7), .rashod-table td:nth-child(7) {
width: 160px;
}
.rashod-table th:nth-child(8), .rashod-table td:nth-child(8) {
width: 170px;
}
.rashod-table th:nth-child(9), .rashod-table td:nth-child(9) {
width: 100px;
}
.rashod-table th:nth-child(10), .rashod-table td:nth-child(10) {
width: 85px;
}
.rashod-inventory-number {
display: inline-block;
padding: 5px 7px;
color: #172033;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-weight: 800;
font-size: 11px;
}
.rashod-udk {
color: #64748b;
font-family: "Consolas", monospace;
font-size: 11px;
}
.rashod-title strong {
display: block;
color: #1e293b;
font-weight: 700;
line-height: 1.35;
}
.rashod-author,
.rashod-location,
.rashod-reason {
color: #475569;
line-height: 1.35;
}
.rashod-badge {
display: inline-flex;
align-items: center;
min-height: 25px;
padding: 0 8px;
border-radius: 999px;
font-size: 9px;
font-weight: 850;
letter-spacing: .35px;
white-space: nowrap;
}
.rashod-badge-revision {
color: #854d0e;
background: #fef9c3;
border: 1px solid #fde68a;
}
.rashod-badge-extra {
color: #475569;
background: #f1f5f9;
border: 1px solid #e2e8f0;
}
.rashod-revision-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.rashod-revision-info strong {
color: #334155;
font-size: 11px;
}
.rashod-revision-info small {
color: #94a3b8;
font-size: 10px;
}
.rashod-date {
color: #475569;
white-space: nowrap;
}
.rashod-dash {
color: #cbd5e1;
}
.rashod-return-form {
margin: 0;
}
.rashod-return-button {
min-width: 64px;
height: 31px;
padding: 0 10px;
border: 1px solid #bbf7d0;
border-radius: 7px;
background: #f0fdf4;
color: #166534;
font-size: 9px;
font-weight: 850;
cursor: pointer;
}
.rashod-return-button:hover {
background: #dcfce7;
border-color: #86efac;
}
.rashod-empty {
min-height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
}
.rashod-empty-icon {
width: 42px;
height: 42px;
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #64748b;
background: #f1f5f9;
font-size: 18px;
font-weight: 800;
}
.rashod-empty strong {
color: #334155;
font-size: 14px;
}
.rashod-empty span {
color: #94a3b8;
font-size: 12px;
}
.rashod-bottom-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 20px;
}
.rashod-excel-button-bottom {
min-width: 215px;
}
@media (max-width: 1100px) {
.rashod-header {
flex-direction: column;
}
.rashod-header-actions {
width: 100%;
}
.rashod-filter-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rashod-field-search {
grid-column: 1 / -1;
}
.rashod-filter-actions {
grid-column: 1 / -1;
}
}
@media (max-width: 650px) {
.rashod-header-actions {
flex-direction: column;
}
.rashod-total-card,
.rashod-excel-button {
width: 100%;
box-sizing: border-box;
}
.rashod-filter-card {
padding: 16px;
}
.rashod-filter-form {
grid-template-columns: 1fr;
}
.rashod-field-search,
.rashod-filter-actions {
grid-column: auto;
}
.rashod-filter-actions {
flex-direction: column;
}
.rashod-search-button,
.rashod-reset-button {
width: 100%;
}
.rashod-section-heading,
.rashod-table-heading {
align-items: flex-start;
flex-direction: column;
}
.rashod-bottom-actions {
align-items: stretch;
flex-direction: column;
}
.rashod-excel-button-bottom {
width: 100%;
}
}
/* Aktivna pretraga zauzima širinu sva tri panela samo na desktopu */
@media (min-width: 901px) {
.catalog-search-grid > .catalog-search-panel.active-search {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
width: 100%;
min-width: 0;
}
.catalog-search-grid > .search-results {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
width: 100%;
}
}
/* AKTIVNA PRETRAGA - DESKTOP */
@media (min-width: 901px) {
.catalog-search-grid > .catalog-search-panel.active-search {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
width: 100%;
min-width: 0;
}
}
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* =========================================================
BIBLIOBOS - JAVNI KATALOG
========================================================= */
.catalog-page {
max-width: 1180px;
margin: 0 auto;
padding: 0 20px 60px;
}
/* HERO */
.catalog-hero {
margin-top: 30px;
margin-bottom: 25px;
border-radius: 18px;
background: #172554;
color: white;
overflow: hidden;
}
.catalog-hero-content {
padding: 48px 50px;
}
.catalog-eyebrow {
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 12px;
opacity: 0.75;
}
.catalog-hero h1 {
margin: 0 0 12px;
font-size: 42px;
font-weight: 700;
letter-spacing: -1px;
}
.catalog-hero p {
max-width: 720px;
margin: 0;
font-size: 17px;
line-height: 1.6;
opacity: 0.9;
}
/* TOOLBAR */
.catalog-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
margin-bottom: 20px;
padding: 20px 24px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 14px;
}
.catalog-result-info {
display: flex;
align-items: center;
gap: 15px;
}
.catalog-result-number {
font-size: 28px;
font-weight: 700;
color: #172554;
}
.catalog-result-title {
font-size: 15px;
font-weight: 600;
}
.catalog-result-subtitle {
margin-top: 3px;
font-size: 13px;
color: #6b7280;
}
/* PAGE SIZE */
.page-size {
display: flex;
align-items: center;
gap: 7px;
font-size: 14px;
color: #6b7280;
}
.page-size a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 36px;
border: 1px solid #d1d5db;
border-radius: 8px;
color: #374151;
text-decoration: none;
font-weight: 600;
transition: all 0.15s ease;
}
.page-size a:hover {
border-color: #172554;
color: #172554;
}
.page-size a.active {
background: #172554;
border-color: #172554;
color: white;
}
/* BOOK LIST */
.catalog-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* BOOK */
.catalog-book {
display: grid;
grid-template-columns: 55px 1fr auto;
align-items: center;
gap: 20px;
padding: 23px 25px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 14px;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.catalog-book:hover {
transform: translateY(-1px);
border-color: #c7d2fe;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}
/* MFN */
.catalog-book-number {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 10px;
background: #f3f4f6;
color: #6b7280;
font-size: 12px;
font-weight: 700;
}
/* BOOK CONTENT */
.catalog-book-main {
min-width: 0;
}
.catalog-book-author {
margin-bottom: 5px;
font-size: 14px;
font-weight: 600;
color: #4b5563;
}
.catalog-book-title {
margin: 0;
font-size: 21px;
line-height: 1.3;
font-weight: 700;
color: #111827;
}
.catalog-book-subtitle {
margin-top: 4px;
font-size: 14px;
font-style: italic;
color: #6b7280;
}
.catalog-book-publication {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-top: 10px;
font-size: 14px;
color: #6b7280;
}
.catalog-book-publication span:not(:last-child)::after {
content: " · ";
margin: 0 5px;
}
.catalog-book-type {
display: inline-block;
margin-top: 10px;
padding: 4px 9px;
border-radius: 6px;
background: #f3f4f6;
color: #6b7280;
font-size: 11px;
font-weight: 600;
}
/* DETAILS BUTTON */
.catalog-book-action a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid #d1d5db;
border-radius: 8px;
color: #172554;
background: white;
text-decoration: none;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
transition: all 0.15s ease;
}
.catalog-book-action a:hover {
background: #172554;
border-color: #172554;
color: white;
}
.catalog-book-action span {
font-size: 16px;
}
/* PAGINATION */
.catalog-pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #e5e7eb;
}
.pagination-button {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 15px;
border: 1px solid #d1d5db;
border-radius: 8px;
color: #374151;
background: white;
text-decoration: none;
font-size: 13px;
font-weight: 600;
}
.pagination-button:hover {
border-color: #172554;
color: #172554;
}
.pagination-button.disabled {
opacity: 0.4;
cursor: default;
}
.pagination-info {
display: flex;
align-items: center;
gap: 7px;
color: #6b7280;
font-size: 14px;
}
.pagination-info strong {
color: #111827;
}
/* MOBILE */
@media (max-width: 800px) {
.catalog-hero-content {
padding: 35px 25px;
}
.catalog-hero h1 {
font-size: 32px;
}
.catalog-toolbar {
flex-direction: column;
align-items: flex-start;
}
.catalog-book {
grid-template-columns: 45px 1fr;
}
.catalog-book-action {
grid-column: 2;
}
.catalog-pagination {
gap: 15px;
}
}
@media (max-width: 500px) {
.catalog-page {
padding-left: 12px;
padding-right: 12px;
}
.catalog-book {
grid-template-columns: 1fr;
gap: 12px;
}
.catalog-book-number {
width: 40px;
height: 32px;
}
.catalog-book-action {
grid-column: auto;
}
.catalog-book-action a {
width: 100%;
justify-content: center;
}
.catalog-pagination {
flex-wrap: wrap;
justify-content: center;
}
}
/* =========================================================
PRETRAGA KATALOGA
========================================================= */
.catalog-search {
margin-bottom: 20px;
padding: 20px 24px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 14px;
}
.search-main {
display: flex;
gap: 10px;
}
.search-main input[type="text"] {
flex: 1;
min-width: 0;
height: 48px;
padding: 0 16px;
border: 1px solid #d1d5db;
border-radius: 9px;
font-family: inherit;
font-size: 16px;
outline: none;
}
.search-main input[type="text"]:focus {
border-color: #172554;
box-shadow: 0 0 0 3px rgba(23, 37, 84, 0.08);
}
.search-main button {
height: 48px;
padding: 0 22px;
border: 0;
border-radius: 9px;
background: #172554;
color: white;
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: opacity 0.15s ease;
}
.search-main button:hover {
opacity: 0.9;
}
.search-options {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 14px;
color: #6b7280;
font-size: 13px;
}
.search-options label {
display: flex;
align-items: center;
gap: 5px;
color: #374151;
cursor: pointer;
}
.search-options input {
margin: 0;
}
/* MOBILE */
@media (max-width: 600px) {
.search-main {
flex-direction: column;
}
.search-main button {
width: 100%;
}
.search-options {
align-items: flex-start;
flex-direction: column;
gap: 9px;
}
}
/* =========================================================
BIBLIOBOS - NASLOVNA STRANA
========================================================= */
.home-page {
min-height: calc(100vh - 60px);
background: linear-gradient( 135deg, #f8fafc 0%, #eef2ff 48%, #f8fafc 100% );
}
/* =========================================================
HERO
========================================================= */
.home-hero {
position: relative;
overflow: hidden;
min-height: 650px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient( 135deg, #0f172a 0%, #172554 55%, #1e3a5f 100% );
color: white;
}
.home-hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1050px;
padding: 70px 30px 80px;
text-align: center;
}
/* =========================================================
BACKGROUND CIRCLES
========================================================= */
.home-hero-background {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.hero-circle {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-circle-1 {
width: 620px;
height: 620px;
top: -310px;
left: -180px;
}
.hero-circle-2 {
width: 800px;
height: 800px;
right: -400px;
bottom: -450px;
}
.hero-circle-3 {
width: 360px;
height: 360px;
right: 12%;
top: -180px;
}
/* =========================================================
LIBRARY NAME
========================================================= */
.home-library-name {
font-size: 13px;
font-weight: 700;
letter-spacing: 4px;
opacity: 0.7;
margin-bottom: 5px;
}
.home-library-title {
font-size: 25px;
font-weight: 700;
letter-spacing: 3px;
}
.home-library-place {
margin-top: 4px;
font-size: 12px;
font-weight: 600;
letter-spacing: 5px;
opacity: 0.6;
}
/* =========================================================
BOOK SYMBOL
========================================================= */
.home-book-symbol {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 4px;
height: 42px;
margin: 32px 0 25px;
}
.home-book-symbol span {
display: block;
width: 9px;
border-radius: 2px 2px 0 0;
background: rgba(255, 255, 255, 0.75);
}
.home-book-symbol span:nth-child(1) {
height: 30px;
}
.home-book-symbol span:nth-child(2) {
height: 42px;
}
.home-book-symbol span:nth-child(3) {
height: 35px;
}
/* =========================================================
HERO TITLE
========================================================= */
.home-hero h1 {
margin: 0;
font-size: 52px;
line-height: 1.1;
font-weight: 700;
letter-spacing: -1.5px;
}
.home-description {
max-width: 650px;
margin: 18px auto 35px;
font-size: 17px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.78);
}
/* =========================================================
MAIN BUTTONS
========================================================= */
.home-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
max-width: 980px;
margin: 0 auto;
}
.home-action {
display: flex;
align-items: center;
min-height: 92px;
padding: 16px 18px;
gap: 14px;
text-align: left;
color: white;
text-decoration: none;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 14px;
backdrop-filter: blur(8px);
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.home-action:hover {
transform: translateY(-4px);
color: white;
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.3);
text-decoration: none;
}
.home-action-primary {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.3);
}
.home-action-primary:hover {
background: rgba(255, 255, 255, 0.22);
}
/* ICON */
.home-action-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.12);
font-size: 22px;
}
.home-action strong {
display: block;
font-size: 12px;
letter-spacing: 0.5px;
}
.home-action small {
display: block;
margin-top: 5px;
font-size: 11px;
color: rgba(255, 255, 255, 0.6);
}
.home-action-arrow {
margin-left: auto;
font-size: 21px;
opacity: 0.6;
transition: transform 0.2s ease;
}
.home-action:hover .home-action-arrow {
transform: translateX(4px);
opacity: 1;
}
/* =========================================================
STATISTICS
========================================================= */
.home-statistics {
display: flex;
justify-content: center;
align-items: center;
max-width: 900px;
margin: 0 auto;
padding: 28px 20px;
background: white;
border: 1px solid #e5e7eb;
border-radius: 0 0 18px 18px;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.home-stat {
min-width: 190px;
text-align: center;
}
.home-stat-number {
font-size: 25px;
font-weight: 700;
color: #172554;
}
.home-stat-label {
margin-top: 3px;
font-size: 12px;
color: #6b7280;
}
.home-stat-divider {
width: 1px;
height: 38px;
background: #e5e7eb;
}
/* =========================================================
INTRO
========================================================= */
.home-intro {
max-width: 700px;
margin: 40px auto 0;
padding: 0 25px 50px;
text-align: center;
}
.home-intro-line {
width: 45px;
height: 3px;
margin: 0 auto 17px;
border-radius: 3px;
background: #172554;
}
.home-intro p {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: #6b7280;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.home-actions {
grid-template-columns: 1fr;
max-width: 600px;
}
.home-action {
min-height: 78px;
}
.home-hero {
min-height: auto;
}
}
@media (max-width: 600px) {
.home-hero-content {
padding: 50px 18px 55px;
}
.home-library-name {
font-size: 10px;
letter-spacing: 2px;
}
.home-library-title {
font-size: 20px;
letter-spacing: 2px;
}
.home-library-place {
font-size: 10px;
letter-spacing: 3px;
}
.home-hero h1 {
font-size: 38px;
}
.home-description {
font-size: 15px;
}
.home-statistics {
flex-direction: column;
gap: 18px;
border-radius: 0;
}
.home-stat-divider {
width: 60px;
height: 1px;
}
}
/* =========================================================
BIBLIO BOSS +
GLAVNI IZGLED
========================================================= */
html {
min-height: 100%;
}
body {
min-height: 100vh;
margin: 0;
background: #f6f8fb;
color: #172033;
font-family: "Segoe UI", Arial, sans-serif;
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
/* =========================================================
HEADER
========================================================= */
.main-header {
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.header-inner {
max-width: 1280px;
min-height: 92px;
margin: 0 auto;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.header-brand {
display: flex;
align-items: center;
gap: 16px;
color: #172033;
text-decoration: none;
}
.header-brand:hover {
color: #172033;
text-decoration: none;
}
.header-logo {
width: 82px;
height: auto;
object-fit: contain;
}
.header-brand-text {
border-left: 1px solid #e2e8f0;
padding-left: 16px;
}
.header-program {
font-size: 21px;
line-height: 1;
font-weight: 700;
letter-spacing: 1.5px;
color: #111827;
}
.header-library {
margin-top: 7px;
font-size: 13px;
color: #475569;
}
.header-place {
margin-top: 2px;
font-size: 11px;
color: #64748b;
letter-spacing: 2px;
}
/* =========================================================
NAVIGATION
========================================================= */
.main-navigation a {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 13px;
border-radius: 7px;
color: #475569;
text-decoration: none;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
transition: background 0.15s ease, color 0.15s ease;
}
.main-navigation a:hover {
color: #172554;
background: #f1f5f9;
}
/* =========================================================
HOME
========================================================= */
.home-page {
min-height: calc(100vh - 92px);
background: linear-gradient( 180deg, #f8fafc 0%, #f3f6fa 100% );
}
/* =========================================================
UVOD
========================================================= */
.home-introduction {
padding: 65px 25px 42px;
text-align: center;
}
.home-introduction-inner {
max-width: 820px;
margin: 0 auto;
}
.home-kicker {
margin-bottom: 13px;
color: #64748b;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
}
.home-introduction h1 {
margin: 0;
color: #101827;
font-size: 48px;
line-height: 1;
font-weight: 750;
letter-spacing: -1.5px;
}
.home-library-name {
margin-top: 13px;
color: #334155;
font-size: 19px;
font-weight: 500;
}
.home-city {
margin-top: 4px;
color: #64748b;
font-size: 13px;
letter-spacing: 2px;
}
.home-separator {
width: 55px;
height: 3px;
margin: 25px auto 21px;
border-radius: 5px;
background: #172554;
}
.home-introduction p {
max-width: 700px;
margin: 0 auto;
color: #64748b;
font-size: 16px;
line-height: 1.7;
}
/* =========================================================
STATISTIKA
========================================================= */
.catalog-statistics {
max-width: 760px;
margin: 0 auto;
padding: 24px 28px;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 7px 24px rgba(15, 23, 42, 0.04);
}
.catalog-stat {
min-width: 0;
text-align: center;
}
.catalog-stat-title {
min-height: 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #64748b;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
line-height: 1.3;
}
.catalog-stat-language {
white-space: nowrap;
}
.catalog-stat-flag {
width: 22px;
height: 15px;
object-fit: cover;
border-radius: 2px;
display: block;
}
.catalog-stat-number {
margin-top: 8px;
color: #172f63;
font-size: 26px;
font-weight: 750;
line-height: 1.1;
}
.catalog-stat-secondary {
margin-top: 5px;
color: #172033;
font-size: 12px;
line-height: 1.4;
}
.catalog-stat-line {
width: 1px;
height: 48px;
background: #e2e8f0;
}
/* =========================================================
GLAVNE KARTICE
========================================================= */
.home-options {
padding: 30px 25px 0;
}
.home-options-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.home-card {
position: relative;
min-height: 190px;
display: flex;
flex-direction: column;
padding: 27px 25px 23px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 15px;
color: #172033;
text-decoration: none;
overflow: hidden;
box-shadow: 0 7px 24px rgba(15, 23, 42, 0.04);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.home-card:hover {
color: #172033;
text-decoration: none;
transform: translateY(-4px);
border-color: #cbd5e1;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09);
}
/* PRVA KARTICA */
.home-card-search {
background: linear-gradient( 145deg, #172554 0%, #1e3a5f 100% );
border-color: #172554;
color: white;
}
.home-card-search:hover {
color: white;
border-color: #172554;
}
/* IKONA */
.home-card-icon {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 21px;
border-radius: 11px;
background: #f1f5f9;
color: #172554;
}
.home-card-search .home-card-icon {
background: rgba(255, 255, 255, 0.13);
color: white;
}
.home-card-icon svg {
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* SADRŽAJ */
.home-card-content {
padding-right: 30px;
}
.home-card h2 {
margin: 0;
font-size: 15px;
line-height: 1.3;
font-weight: 750;
letter-spacing: 0.3px;
}
.home-card p {
margin: 9px 0 0;
color: #64748b;
font-size: 13px;
line-height: 1.55;
}
.home-card-search p {
color: rgba(255, 255, 255, 0.7);
}
/* STRELICA */
.home-card-arrow {
position: absolute;
right: 22px;
bottom: 19px;
font-size: 21px;
color: #94a3b8;
transition: transform 0.2s ease;
}
.home-card-search .home-card-arrow {
color: rgba(255, 255, 255, 0.7);
}
.home-card:hover .home-card-arrow {
transform: translateX(5px);
color: #172554;
}
.home-card-search:hover .home-card-arrow {
color: white;
}
/* =========================================================
ZAVRSNI TEKST
========================================================= */
.home-description {
max-width: 720px;
margin: 34px auto 0;
padding: 0 25px 45px;
text-align: center;
}
.home-description p {
margin: 0;
color: #7b8798;
font-size: 13px;
line-height: 1.7;
}
/* =========================================================
FOOTER
========================================================= */
.main-footer {
background: #101827;
color: rgba(255, 255, 255, 0.55);
font-size: 11px;
}
.footer-inner {
max-width: 1280px;
min-height: 58px;
margin: 0 auto;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.main-footer strong {
color: rgba(255, 255, 255, 0.8);
font-weight: 600;
}
/* =========================================================
MOBILNI PRIKAZ
========================================================= */
@media (max-width: 900px) {
.header-inner {
min-height: auto;
padding: 18px 20px;
flex-direction: column;
gap: 15px;
}
.main-navigation {
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
.home-options-inner {
grid-template-columns: 1fr;
max-width: 600px;
}
}
@media (max-width: 600px) {
.header-brand {
width: 100%;
justify-content: center;
}
.header-logo {
width: 65px;
}
.header-brand-text {
padding-left: 12px;
}
.header-program {
font-size: 18px;
}
.header-library {
font-size: 11px;
}
.main-navigation {
gap: 2px;
}
.main-navigation a {
padding: 0 8px;
font-size: 9px;
}
.home-introduction {
padding: 45px 18px 30px;
}
.home-introduction h1 {
font-size: 38px;
}
.home-library-name {
font-size: 16px;
}
.catalog-statistics {
margin: 0 15px;
padding: 20px 15px;
}
.catalog-stat-number {
font-size: 25px;
}
.catalog-stat-label {
font-size: 9px;
letter-spacing: 1px;
}
.home-options {
padding: 22px 15px 0;
}
.home-card {
min-height: 170px;
}
.footer-inner {
min-height: auto;
padding: 18px 20px;
flex-direction: column;
justify-content: center;
text-align: center;
}
}
/* =========================================================
PRETRAGA KATALOGA
========================================================= */
.search-page {
max-width: 1100px;
margin: 0 auto;
padding: 55px 25px 70px;
}
/* HEADER */
.search-page-header {
text-align: center;
margin-bottom: 30px;
}
.search-page-kicker {
margin-bottom: 10px;
color: #64748b;
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
}
.search-page-header h1 {
margin: 0;
color: #172033;
font-size: 36px;
font-weight: 750;
}
.search-page-header p {
max-width: 650px;
margin: 12px auto 0;
color: #64748b;
font-size: 14px;
line-height: 1.6;
}
/* SEARCH PANEL */
.catalog-search-panel {
padding: 25px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.045);
}
.catalog-search-main {
display: flex;
gap: 10px;
}
.catalog-search-main input {
flex: 1;
min-width: 0;
height: 50px;
padding: 0 16px;
border: 1px solid #cbd5e1;
border-radius: 9px;
color: #172033;
font-family: inherit;
font-size: 15px;
outline: none;
}
.catalog-search-main input:focus {
border-color: #172554;
box-shadow: 0 0 0 3px rgba(23, 37, 84, 0.08);
}
.catalog-search-main button {
height: 50px;
padding: 0 24px;
border: 0;
border-radius: 9px;
background: #172554;
color: white;
font-family: inherit;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.catalog-search-main button:hover {
background: #1e3a5f;
}
/* POLJA */
.catalog-search-fields {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 13px;
margin-top: 18px;
color: #64748b;
font-size: 12px;
}
.search-fields-label {
font-weight: 700;
color: #475569;
}
.catalog-search-fields label {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
color: #475569;
}
.catalog-search-fields input {
margin: 0;
accent-color: #172554;
}
/* UPUTSTVO */
.search-help {
margin-top: 17px;
padding-top: 15px;
border-top: 1px solid #eef2f7;
color: #7b8798;
font-size: 12px;
line-height: 1.6;
}
/* REZULTATI */
.search-results {
margin-top: 25px;
}
.search-results-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 4px 13px;
color: #64748b;
font-size: 13px;
}
.search-results-header strong {
color: #172554;
}
.search-results-page {
font-size: 12px;
}
.search-result-list {
display: flex;
flex-direction: column;
gap: 11px;
}
/* REZULTAT */
.search-result-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
padding: 21px 23px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 13px;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.search-result-card:hover {
transform: translateY(-2px);
border-color: #cbd5e1;
box-shadow: 0 9px 25px rgba(15, 23, 42, 0.06);
}
.search-result-main {
min-width: 0;
}
.search-result-author {
margin-bottom: 5px;
color: #64748b;
font-size: 13px;
font-weight: 650;
}
.search-result-card h2 {
margin: 0;
color: #172033;
font-size: 19px;
line-height: 1.35;
font-weight: 700;
}
.search-result-subtitle {
margin-top: 4px;
color: #64748b;
font-size: 13px;
font-style: italic;
}
.search-result-publication {
display: flex;
flex-wrap: wrap;
margin-top: 9px;
color: #7b8798;
font-size: 12px;
}
.search-result-publication span:not(:last-child)::after {
content: " · ";
margin: 0 5px;
}
/* DETALJI */
.search-result-action a {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 13px;
border: 1px solid #cbd5e1;
border-radius: 8px;
color: #172554;
background: white;
text-decoration: none;
white-space: nowrap;
font-size: 10px;
font-weight: 750;
}
.search-result-action a:hover {
color: white;
background: #172554;
border-color: #172554;
}
/* NEMA REZULTATA */
.search-no-results {
padding: 50px 25px;
text-align: center;
background: white;
border: 1px solid #e2e8f0;
border-radius: 14px;
}
.search-no-results h2 {
margin: 0 0 10px;
color: #172033;
font-size: 22px;
}
.search-no-results p {
margin: 5px 0;
color: #64748b;
font-size: 13px;
}
/* PAGINACIJA */
.search-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 25px;
}
.search-pagination a {
padding: 9px 14px;
border: 1px solid #cbd5e1;
border-radius: 8px;
color: #475569;
background: white;
text-decoration: none;
font-size: 11px;
font-weight: 700;
}
.search-pagination a:hover {
color: #172554;
border-color: #172554;
}
.search-pagination span {
color: #64748b;
font-size: 12px;
}
/* MOBILNI */
@media (max-width: 700px) {
.search-page {
padding: 40px 15px 55px;
}
.search-page-header h1 {
font-size: 30px;
}
.catalog-search-main {
flex-direction: column;
}
.catalog-search-main button {
width: 100%;
}
.catalog-search-fields {
flex-direction: column;
align-items: flex-start;
}
.search-result-card {
flex-direction: column;
align-items: flex-start;
}
.search-result-action {
width: 100%;
}
.search-result-action a {
width: 100%;
justify-content: center;
}
.search-results-header {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.catalog-slip-description,
.catalog-slip-udk,
.catalog-slip-isbn {
margin-left: 16px;
}
}
/* =========================================================
DETAILS / CATALOG RECORD
========================================================= */
.details-page {
max-width: 1100px;
margin: 0 auto;
padding: 55px 24px 80px;
}
.details-header {
margin-bottom: 32px;
}
.details-kicker {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
color: #64748b;
margin-bottom: 10px;
}
.details-header h1 {
margin: 0 0 10px;
font-size: 2rem;
font-weight: 800;
color: #172033;
}
.details-header p {
margin: 0;
color: #64748b;
font-size: 1rem;
}
.catalog-record {
background: #ffffff;
border: 1px solid #dfe5ec;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.record-title-block {
padding: 32px 36px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.record-author {
margin-bottom: 8px;
color: #52657d;
font-size: 1rem;
font-weight: 700;
}
.record-title-block h2 {
margin: 0;
color: #172033;
font-size: 1.75rem;
line-height: 1.3;
font-weight: 800;
}
.record-subtitle {
margin-top: 8px;
color: #64748b;
font-size: 1.05rem;
}
.record-section {
padding: 28px 36px;
border-bottom: 1px solid #e5e7eb;
}
.record-section h3 {
margin: 0 0 20px;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.1em;
color: #475569;
}
.record-fields {
display: flex;
flex-direction: column;
gap: 0;
}
.record-field {
display: grid;
grid-template-columns: 210px 1fr;
gap: 24px;
padding: 13px 0;
border-bottom: 1px solid #edf1f5;
}
.record-field:last-child {
border-bottom: 0;
}
.record-label {
color: #64748b;
font-size: 0.9rem;
font-weight: 700;
}
.record-value {
color: #1e293b;
font-size: 0.98rem;
line-height: 1.5;
}
.record-udk {
font-weight: 700;
}
.record-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.record-tag {
display: inline-block;
padding: 7px 12px;
border-radius: 8px;
background: #eef3f8;
color: #334155;
font-size: 0.9rem;
}
.record-note {
padding: 16px 18px;
background: #f8fafc;
border-left: 4px solid #94a3b8;
color: #475569;
line-height: 1.6;
}
.copies-table {
border: 1px solid #dfe5ec;
border-radius: 10px;
overflow: hidden;
}
.copies-header,
.copies-row {
display: grid;
grid-template-columns: 1fr 1fr;
}
.copies-header {
background: #f1f5f9;
color: #475569;
font-size: 0.8rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.copies-header > div,
.copies-row > div {
padding: 13px 16px;
}
.copies-row {
border-top: 1px solid #e5e7eb;
}
.copy-inventory {
font-weight: 700;
color: #1e293b;
}
.copy-location {
color: #475569;
}
.record-no-copies {
padding: 18px;
background: #f8fafc;
color: #64748b;
border-radius: 8px;
}
.record-system-info {
padding: 18px 36px;
background: #f8fafc;
display: flex;
justify-content: flex-end;
}
.record-system-info div {
display: flex;
align-items: center;
gap: 10px;
color: #64748b;
font-size: 0.82rem;
}
.record-system-info strong {
color: #334155;
font-family: Consolas, monospace;
}
.details-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.details-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 18px;
border-radius: 9px;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #334155;
text-decoration: none;
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.02em;
transition: 0.2s ease;
}
.details-button:hover {
background: #f1f5f9;
color: #172033;
text-decoration: none;
}
.details-button.primary {
background: #1e3a5f;
border-color: #1e3a5f;
color: #ffffff;
}
.details-button.primary:hover {
background: #294d78;
color: #ffffff;
}
@media (max-width: 700px) {
.details-page {
padding: 35px 16px 60px;
}
.details-header h1 {
font-size: 1.5rem;
}
.record-title-block,
.record-section {
padding: 24px 20px;
}
.record-title-block h2 {
font-size: 1.4rem;
}
.record-field {
grid-template-columns: 1fr;
gap: 5px;
}
.copies-header,
.copies-row {
grid-template-columns: 1fr;
}
.copies-header > div:last-child {
display: none;
}
.copies-row > div:last-child {
padding-top: 0;
}
.record-system-info {
padding: 16px 20px;
}
.details-actions {
flex-direction: column;
}
.details-button {
width: 100%;
}
}
/* =========================================================
RECORD TABS
========================================================= */
.record-tabs {
display: flex;
gap: 4px;
margin-bottom: -1px;
position: relative;
z-index: 2;
}
.record-tab {
border: 1px solid #dbe2ea;
border-bottom: none;
background: #eef2f6;
color: #64748b;
padding: 15px 24px;
border-radius: 10px 10px 0 0;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.02em;
cursor: pointer;
transition: 0.2s ease;
}
.record-tab:hover {
background: #e5ebf2;
color: #334155;
}
.record-tab.active {
background: #ffffff;
color: #1e3a5f;
border-color: #dfe5ec;
}
.record-tab-content {
display: none;
}
.record-tab-content.active {
display: block;
}
/* =========================================================
BASIC CATALOG DESCRIPTION
========================================================= */
.basic-record {
padding: 36px;
}
.basic-record-label {
margin-bottom: 18px;
color: #64748b;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.1em;
}
.catalog-slip {
padding: 28px 32px;
background: #fff;
border: 1px solid #e1e6ec;
border-radius: 10px;
color: #1e293b;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.08rem;
line-height: 1.8;
box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
}
.catalog-note {
margin-top: 26px;
padding: 16px 20px;
color: #475569;
border-left: 4px solid #94a3b8;
background: #f8fafc;
line-height: 1.6;
}
.catalog-udk {
margin-top: 22px;
font-family: Consolas, monospace;
font-weight: 700;
color: #334155;
}
.catalog-isbn {
margin-top: 8px;
color: #475569;
font-size: 0.95rem;
}
/* =========================================================
MOBILE TABS
========================================================= */
@media (max-width: 700px) {
.record-tabs {
display: flex;
overflow-x: auto;
gap: 3px;
}
.record-tab {
flex: 1 0 auto;
padding: 13px 15px;
font-size: 0.74rem;
white-space: nowrap;
}
.basic-record {
padding: 24px 20px;
}
.catalog-slip {
padding: 20px;
font-size: 1rem;
line-height: 1.7;
}
}
.catalog-slip {
padding: 28px 32px;
background: #fff;
border: 1px solid #e1e6ec;
border-radius: 10px;
color: #1e293b;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.08rem;
line-height: 1.8;
box-shadow: 0 3px 12px rgba(15, 23, 42, 0.04);
}
.catalog-slip-author {
margin-bottom: 18px;
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
font-size: 1.08rem;
}
.catalog-slip-description {
margin-left: 32px;
}
.catalog-slip-udk {
margin-top: 24px;
margin-left: 32px;
font-family: Georgia, "Times New Roman", serif;
font-weight: 700;
}
.catalog-slip-isbn {
margin-top: 8px;
margin-left: 32px;
font-family: Georgia, "Times New Roman", serif;
}
/* =========================================================
BROWSE PAGE
========================================================= */
.browse-page {
max-width: 1100px;
margin: 0 auto;
padding: 55px 25px 70px;
}
.browse-intro {
text-align: center;
margin-bottom: 30px;
}
.browse-kicker {
margin-bottom: 10px;
color: #64748b;
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
}
.browse-intro h1 {
margin: 0;
color: #172033;
font-size: 36px;
font-weight: 750;
}
.browse-intro p {
max-width: 650px;
margin: 12px auto 0;
color: #64748b;
font-size: 14px;
line-height: 1.6;
}
.browse-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 16px 20px;
margin-bottom: 20px;
background: #ffffff;
border: 1px solid #dfe5ec;
border-radius: 12px;
}
.browse-total {
display: flex;
align-items: baseline;
gap: 8px;
color: #64748b;
}
.browse-total strong {
color: #1e3a5f;
font-size: 1.2rem;
}
.browse-page-size {
display: flex;
align-items: center;
gap: 7px;
color: #64748b;
font-size: 0.88rem;
}
.browse-page-size a {
min-width: 34px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #cbd5e1;
border-radius: 7px;
background: #fff;
color: #475569;
text-decoration: none;
font-weight: 700;
}
.browse-page-size a:hover {
background: #f1f5f9;
}
.browse-page-size a.active {
background: #1e3a5f;
border-color: #1e3a5f;
color: #fff;
}
.browse-results {
display: flex;
flex-direction: column;
gap: 12px;
}
.browse-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 24px;
background: #ffffff;
border: 1px solid #dfe5ec;
border-radius: 12px;
transition: 0.2s ease;
}
.browse-card:hover {
border-color: #c5d2df;
box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06);
}
.browse-card-main {
min-width: 0;
}
.browse-author {
margin-bottom: 5px;
color: #52657d;
font-size: 0.88rem;
font-weight: 700;
}
.browse-card h2 {
margin: 0;
color: #172033;
font-size: 1.1rem;
line-height: 1.4;
}
.browse-subtitle {
margin-top: 5px;
color: #64748b;
font-size: 0.92rem;
}
.browse-publication {
display: flex;
flex-wrap: wrap;
gap: 5px 16px;
margin-top: 10px;
color: #64748b;
font-size: 0.84rem;
}
.browse-card-action {
flex-shrink: 0;
}
.browse-card-action a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 8px;
background: #1e3a5f;
color: #fff;
text-decoration: none;
font-size: 0.76rem;
font-weight: 800;
}
.browse-card-action a:hover {
background: #294d78;
color: #fff;
}
.browse-empty {
padding: 45px 25px;
text-align: center;
background: #fff;
border: 1px solid #dfe5ec;
border-radius: 12px;
}
.browse-empty h2 {
margin: 0 0 8px;
color: #334155;
font-size: 1.25rem;
}
.browse-empty p {
margin: 0;
color: #64748b;
}
.browse-pagination {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 28px;
}
.browse-pagination a,
.browse-pagination span {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 14px;
border-radius: 8px;
font-size: 0.78rem;
font-weight: 800;
}
.browse-pagination a {
border: 1px solid #cbd5e1;
background: #fff;
color: #334155;
text-decoration: none;
}
.browse-pagination a:hover {
background: #f1f5f9;
}
.browse-pagination span {
color: #64748b;
}
@media (max-width: 700px) {
.browse-page {
padding: 35px 16px 60px;
}
.browse-toolbar {
align-items: flex-start;
flex-direction: column;
}
.browse-card {
align-items: flex-start;
flex-direction: column;
}
.browse-card-action {
width: 100%;
}
.browse-card-action a {
width: 100%;
justify-content: center;
}
.browse-pagination {
gap: 6px;
}
}
/* =========================================================
БИБЛИОТЕКАРИ – ДУГМЕ У ЗАГЛАВЉУ
========================================================= */
.nav-librarians {
display: inline-flex !important;
align-items: center;
justify-content: center;
margin-left: 14px;
padding: 9px 15px !important;
border: 1px solid #172554 !important;
border-radius: 7px;
background: #172554 !important;
color: #ffffff !important;
font-size: 10px !important;
font-weight: 750 !important;
letter-spacing: 0.3px;
text-decoration: none !important;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.nav-librarians:hover {
background: #1e3a5f !important;
border-color: #1e3a5f !important;
color: #ffffff !important;
text-decoration: none !important;
transform: translateY(-1px);
box-shadow: 0 5px 14px rgba(23, 37, 84, 0.18);
}
/* =========================================================
БИБЛИОТЕКАРИ – ПОЧЕТНА СТРАНИЦА
========================================================= */
.home-card-librarians {
border-color: #d7e4f5;
background: #ffffff;
}
.home-card-librarians:hover {
border-color: #4b91e8;
box-shadow: 0 14px 30px rgba(28, 73, 125, 0.10);
transform: translateY(-2px);
}
.home-card-librarians .home-card-icon {
background: #edf4fc;
color: #173b72;
}
.home-card-librarians .home-card-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.home-card-librarians h2 {
color: #172033;
}
.home-card-librarians p {
color: #64748b;
}
.home-card-librarians .home-card-arrow {
color: #173b72;
}
/* =========================================================
АДМИНИСТРАЦИЈА
========================================================= */
.admin-page {
max-width: 1180px;
margin: 0 auto;
padding: 42px 30px 70px;
}
.admin-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: 32px;
}
.admin-kicker {
margin-bottom: 8px;
color: #6880a0;
font-size: 10px;
font-weight: 700;
letter-spacing: 2.5px;
}
.admin-header h1 {
margin: 0;
color: #172033;
font-size: 36px;
line-height: 1.1;
font-weight: 750;
}
.admin-header p {
margin: 10px 0 0;
color: #64748b;
font-size: 14px;
}
.admin-user {
min-width: 180px;
padding: 13px 18px;
background: #edf4fc;
border-radius: 12px;
}
.admin-user span {
display: block;
margin-bottom: 4px;
color: #6b7f99;
font-size: 10px;
}
.admin-user strong {
color: #173b72;
font-size: 14px;
}
/* =========================================================
АДМИН КАРТИЦЕ
========================================================= */
.admin-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.admin-card {
position: relative;
min-height: 230px;
padding: 25px;
border: 1px solid #dce6f2;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(25, 54, 91, 0.05);
text-decoration: none;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.admin-card:not(.admin-card-disabled):hover {
transform: translateY(-2px);
border-color: #4b91e8;
box-shadow: 0 14px 30px rgba(28, 73, 125, 0.10);
}
.admin-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: 20px;
border-radius: 11px;
background: #eaf3fd;
color: #2c8eea;
font-size: 23px;
font-weight: 700;
}
.admin-card h2 {
margin: 0 0 9px;
color: #172033;
font-size: 16px;
font-weight: 750;
letter-spacing: .2px;
}
.admin-card p {
max-width: 280px;
margin: 0;
color: #64748b;
font-size: 13px;
line-height: 1.55;
}
.admin-card-link {
position: absolute;
left: 25px;
bottom: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 82px;
height: 34px;
padding: 0 14px;
border-radius: 7px;
background: #173f78;
color: #ffffff;
font-size: 10px;
font-weight: 700;
letter-spacing: .7px;
}
.admin-card-disabled {
background: #f7f9fc;
box-shadow: none;
}
.admin-card-disabled .admin-card-icon {
background: #edf1f6;
color: #8ea0b8;
}
.admin-card-disabled h2 {
color: #5f6d7f;
}
.admin-card-disabled .admin-card-link {
background: #91a3bb;
}
/* =========================================================
АДМИН КОНТРОЛЕ
========================================================= */
.admin-footer-actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 28px;
}
.admin-back {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 16px;
border: 1px solid #9eb5d1;
border-radius: 7px;
background: #ffffff;
color: #173f78;
font-size: 11px;
font-weight: 700;
text-decoration: none;
letter-spacing: .4px;
}
.admin-back:hover {
border-color: #4b91e8;
background: #f5f9fe;
color: #173f78;
}
.admin-logout {
min-height: 38px;
padding: 0 17px;
border: 1px solid #e57373;
border-radius: 7px;
background: #ffffff;
color: #d94b4b;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.admin-logout:hover {
background: #fff6f6;
}
/* =========================================================
УВОЗ BIBLIO БАЗЕ
========================================================= */
.admin-import-box {
padding: 30px;
border: 1px solid #dce6f2;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(25, 54, 91, 0.05);
}
.admin-import-info {
margin-bottom: 26px;
padding: 18px 20px;
border-radius: 10px;
background: #eef6ff;
}
.admin-import-info h2 {
margin: 0 0 7px;
color: #172033;
font-size: 16px;
font-weight: 750;
}
.admin-import-info p {
margin: 0;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
.admin-file-field {
display: grid;
grid-template-columns: 150px minmax(250px, 1fr);
align-items: center;
column-gap: 18px;
row-gap: 5px;
padding: 14px 0;
border-bottom: 1px solid #edf1f6;
}
.admin-file-field:last-of-type {
border-bottom: 0;
}
.admin-file-field label {
color: #173b72;
font-size: 12px;
font-weight: 750;
}
.admin-file-field input[type="file"] {
width: 100%;
padding: 7px;
border: 1px solid #d5e0ec;
border-radius: 7px;
background: #ffffff;
font-size: 12px;
}
.admin-file-field > span:not(.field-validation-error) {
grid-column: 2;
color: #8190a3;
font-size: 11px;
}
.admin-import-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 25px;
}
.admin-login-button {
min-height: 40px;
padding: 0 20px;
border: 0;
border-radius: 7px;
background: #173f78;
color: #ffffff;
font-size: 11px;
font-weight: 750;
letter-spacing: .5px;
cursor: pointer;
}
.admin-login-button:hover {
background: #22538f;
}
.admin-import-message {
margin-top: 18px;
padding: 12px 15px;
border-radius: 8px;
background: #eef6ff;
color: #315b88;
font-size: 12px;
}
/* =========================================================
ПРИЈАВА БИБЛИОТЕКАРА
========================================================= */
.admin-login-page {
min-height: calc(100vh - 180px);
display: flex;
align-items: center;
justify-content: center;
padding: 50px 25px;
}
.admin-login-box {
width: 100%;
max-width: 430px;
padding: 36px;
border: 1px solid #dce6f2;
border-radius: 15px;
background: #ffffff;
box-shadow: 0 14px 35px rgba(25, 54, 91, 0.08);
}
.admin-login-kicker {
margin-bottom: 9px;
color: #6880a0;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
}
.admin-login-box h1 {
margin: 0;
color: #172033;
font-size: 24px;
font-weight: 750;
}
.admin-login-description {
margin: 10px 0 28px;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
.admin-login-field {
margin-bottom: 18px;
}
.admin-login-field label {
display: block;
margin-bottom: 7px;
color: #334155;
font-size: 12px;
font-weight: 700;
}
.admin-login-field input {
width: 100%;
height: 42px;
padding: 0 12px;
border: 1px solid #d4dfeb;
border-radius: 7px;
background: #ffffff;
color: #172033;
font-size: 13px;
outline: none;
}
.admin-login-field input:focus {
border-color: #4b91e8;
box-shadow: 0 0 0 3px rgba(75, 145, 232, 0.10);
}
.admin-login-error {
margin-bottom: 18px;
padding: 11px 13px;
border-radius: 7px;
background: #fff2f2;
color: #c44747;
font-size: 12px;
}
.admin-login-box .admin-login-button {
width: 100%;
}
.admin-login-back {
display: block;
margin-top: 20px;
color: #527298;
font-size: 11px;
font-weight: 600;
text-align: center;
text-decoration: none;
}
.admin-login-back:hover {
color: #173f78;
}
/* Библиотекари */
.admin-content {
margin-top: 30px;
}
.admin-section-header {
margin-bottom: 20px;
}
.admin-section-header h2 {
margin: 0 0 7px;
color: #172033;
font-size: 20px;
font-weight: 750;
}
.admin-section-header p {
margin: 0;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
.admin-add-user {
margin-bottom: 30px;
padding: 24px 26px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 7px 24px rgba(15, 23, 42, 0.04);
}
.admin-add-user h2 {
margin: 0 0 7px;
color: #172033;
font-size: 19px;
font-weight: 750;
}
.admin-add-user > p {
margin: 0 0 22px;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
.admin-user-form {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 15px;
align-items: end;
}
.admin-form-group {
display: flex;
flex-direction: column;
gap: 7px;
}
.admin-form-group label {
color: #475569;
font-size: 11px;
font-weight: 700;
}
.admin-form-group input {
width: 100%;
box-sizing: border-box;
height: 42px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 13px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-form-group input:focus {
border-color: #334e68;
box-shadow: 0 0 0 3px rgba(51, 78, 104, 0.10);
}
.admin-form-group select {
width: 100%;
box-sizing: border-box;
height: 42px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 13px;
outline: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.admin-form-group select:focus {
border-color: #334e68;
box-shadow: 0 0 0 3px rgba(51, 78, 104, 0.10);
}
.admin-form-group select:hover {
border-color: #94a3b8;
}
.admin-primary-button {
height: 42px;
padding: 0 18px;
border: none;
border-radius: 8px;
background: #172033;
color: white;
font-family: inherit;
font-size: 11px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, transform 0.2s ease;
}
.admin-primary-button:hover {
background: #26364d;
transform: translateY(-1px);
}
.admin-empty {
padding: 30px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 15px;
text-align: center;
}
.admin-empty strong {
color: #172033;
font-size: 14px;
}
.admin-empty p {
margin: 8px 0 0;
color: #64748b;
font-size: 13px;
}
.admin-table-wrap {
width: 100%;
overflow-x: hidden;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 7px 24px rgba(15, 23, 42, 0.04);
}
.admin-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.admin-table th,
.admin-table td {
padding: 10px 8px;
vertical-align: top;
overflow-wrap: anywhere;
word-break: break-word;
}
.admin-table th {
font-size: 12px;
line-height: 1.25;
}
.admin-table td {
font-size: 13px;
line-height: 1.35;
}
/* =========================================================
ИНВЕНТАРНИ ПРЕГЛЕД – РАСПОРЕД КОЛОНА
========================================================= */
.admin-table th:nth-child(1),
.admin-table td:nth-child(1) {
width: 5%;
text-align: center;
}
.admin-table th:nth-child(2),
.admin-table td:nth-child(2) {
width: 10%;
}
.admin-table th:nth-child(3),
.admin-table td:nth-child(3) {
width: 9%;
text-align: center;
}
.admin-table th:nth-child(4),
.admin-table td:nth-child(4) {
width: 12%;
}
.admin-table th:nth-child(5),
.admin-table td:nth-child(5) {
width: 22%;
}
.admin-table th:nth-child(6),
.admin-table td:nth-child(6) {
width: 17%;
}
.admin-table th:nth-child(7),
.admin-table td:nth-child(7) {
width: 7%;
}
.admin-table th:nth-child(8),
.admin-table td:nth-child(8) {
width: 10%;
}
.admin-table th:nth-child(9),
.admin-table td:nth-child(9) {
width: 8%;
text-align: center;
}
.admin-table {
width: 100%;
border-collapse: collapse;
}
.admin-table th {
padding: 15px 18px;
border-bottom: 1px solid #e2e8f0;
color: #64748b;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-align: left;
}
.admin-table td {
padding: 16px 18px;
border-bottom: 1px solid #f1f5f9;
color: #475569;
font-size: 13px;
}
.admin-table tbody tr:last-child td {
border-bottom: none;
}
.admin-table td strong {
color: #172033;
font-weight: 650;
}
.admin-status {
display: inline-block;
padding: 5px 9px;
border-radius: 6px;
font-size: 9px;
font-weight: 750;
letter-spacing: 0.5px;
}
.admin-status.active {
background: #ecfdf5;
color: #047857;
}
.admin-status.inactive {
background: #f1f5f9;
color: #64748b;
}
.admin-message {
margin-bottom: 18px;
padding: 11px 13px;
border-radius: 8px;
font-size: 12px;
}
.admin-message.error {
background: #fef2f2;
color: #b91c1c;
border: 1px solid #fecaca;
}
@media (max-width: 900px) {
.admin-user-form {
grid-template-columns: 1fr 1fr;
}
.admin-primary-button {
width: fit-content;
}
}
@media (max-width: 600px) {
.admin-user-form {
grid-template-columns: 1fr;
}
.admin-primary-button {
width: 100%;
}
.admin-table th,
.admin-table td {
padding: 13px 12px;
}
}
.admin-footer-right {
display: flex;
align-items: center;
gap: 12px;
}
.admin-table-action {
display: inline-block;
margin-right: 8px;
padding: 7px 11px;
border: 1px solid #d7dee8;
border-radius: 7px;
background: #f8fafc;
color: #334155;
font-family: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.admin-table-action:hover {
background: #eef2f7;
border-color: #cbd5e1;
color: #172033;
}
.admin-footer-right .admin-back {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border: 1px solid #d7dee8;
border-radius: 8px;
background: #f8fafc;
color: #334155;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.admin-footer-right .admin-back:hover {
background: #eef2f7;
border-color: #cbd5e1;
color: #172033;
}
/* =========================================================
ДУГМАД ЗА БРИСАЊЕ
========================================================= */
.admin-danger-button {
border: 1px solid #c62828;
background: #c62828;
color: #ffffff;
padding: 8px 14px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.edit-copies-row > div:first-child {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.edit-copies-row .admin-danger-button {
padding: 5px 9px;
font-size: 11px;
}
.admin-danger-button:hover {
background: #a91f1f;
border-color: #a91f1f;
}
.admin-danger-button:active {
transform: translateY(1px);
}
.admin-danger-button:focus {
outline: 2px solid rgba(198, 40, 40, 0.25);
outline-offset: 2px;
}
/* =====================================================
NOVA KNJIGA
===================================================== */
.biblio-boss-id-info {
margin: 18px 0 28px;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: #f8fafc;
border: 1px solid #dbe3ec;
border-radius: 10px;
}
.biblio-boss-id-info span {
color: #64748b;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.biblio-boss-id-info strong {
color: #172f63;
font-size: 18px;
font-weight: 750;
}
.admin-add-user hr {
margin: 34px 0;
border: 0;
border-top: 1px solid #e2e8f0;
}
.admin-add-user h2 {
margin-bottom: 8px;
}
.admin-add-user p {
margin-bottom: 20px;
}
.admin-user-form textarea {
min-height: 90px;
resize: vertical;
}
.admin-user-form select,
.admin-user-form input,
.admin-user-form textarea {
width: 100%;
box-sizing: border-box;
font-family: inherit;
}
.inventory-row {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto;
gap: 14px;
align-items: end;
margin-bottom: 12px;
padding: 15px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
}
.inventory-row .admin-form-group {
margin-bottom: 0;
}
.inventory-add-cell {
display: flex;
align-items: center;
gap: 7px;
padding-bottom: 1px;
}
.inventory-add-button,
.inventory-remove-button {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid #d7dee8;
border-radius: 8px;
background: #ffffff;
color: #334155;
font-family: inherit;
font-size: 20px;
font-weight: 500;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.inventory-add-button:hover {
background: #eef2f7;
border-color: #cbd5e1;
color: #172033;
}
.inventory-remove-button {
color: #64748b;
}
.inventory-remove-button:hover {
background: #f1f5f9;
border-color: #cbd5e1;
color: #172033;
}
.inventory-number,
.inventory-location {
min-height: 40px;
}
@media (max-width: 760px) {
.inventory-row {
grid-template-columns: 1fr;
align-items: stretch;
}
.inventory-add-cell {
padding-top: 2px;
}
.biblio-boss-id-info {
align-items: flex-start;
flex-direction: column;
gap: 6px;
}
}
/* =====================================================
NOVA KNJIGA - STRUKTURA
===================================================== */
.nova-knjiga-section {
width: 100%;
}
.nova-knjiga-section h2 {
margin: 0 0 8px;
}
.nova-knjiga-section > p {
margin-bottom: 20px;
color: #64748b;
line-height: 1.5;
}
.nova-knjiga-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px 14px;
}
.nova-knjiga-field-wide {
grid-column: span 2;
}
.nova-knjiga-field-full {
grid-column: 1 / -1;
}
.nova-knjiga-grid input,
.nova-knjiga-grid textarea,
.nova-knjiga-grid select {
width: 100%;
box-sizing: border-box;
font-family: inherit;
}
.nova-knjiga-grid textarea {
min-height: 82px;
resize: vertical;
}
.nova-knjiga-divider {
margin: 34px 0;
border-top: 1px solid #e2e8f0;
}
.nova-knjiga-submit {
margin-top: 24px;
display: flex;
justify-content: flex-end;
}
@media (max-width: 900px) {
.nova-knjiga-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nova-knjiga-field-wide {
grid-column: span 2;
}
}
@media (max-width: 650px) {
.nova-knjiga-grid {
grid-template-columns: 1fr;
}
.nova-knjiga-field-wide,
.nova-knjiga-field-full {
grid-column: 1;
}
.inventory-row {
grid-template-columns: 1fr;
}
.nova-knjiga-submit {
justify-content: stretch;
}
.nova-knjiga-submit .admin-primary-button {
width: 100%;
}
}
.nova-knjiga-success {
margin: 18px 0 24px;
padding: 15px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 10px;
}
.nova-knjiga-success > div {
display: flex;
flex-direction: column;
gap: 5px;
}
.nova-knjiga-success strong {
color: #166534;
font-size: 13px;
}
.nova-knjiga-success span {
color: #64748b;
font-size: 11px;
}
.nova-knjiga-success b {
color: #172f63;
font-size: 13px;
}
.nova-knjiga-success .admin-primary-button {
width: auto;
white-space: nowrap;
text-decoration: none;
}
@media (max-width: 650px) {
.nova-knjiga-success {
align-items: stretch;
flex-direction: column;
}
.nova-knjiga-success .admin-primary-button {
width: 100%;
}
}
/* =========================================================
ИЗМЕНА КЊИГЕ
========================================================= */
.edit-book-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 30px;
margin: 0 0 28px;
padding: 16px 0 20px;
border-bottom: 1px solid #e2e8f0;
}
.edit-book-header > div {
display: flex;
flex-direction: column;
gap: 5px;
}
.edit-book-label {
color: #64748b;
font-size: 10px;
font-weight: 750;
letter-spacing: 1px;
text-transform: uppercase;
}
.edit-book-header strong {
color: #172f63;
font-size: 20px;
font-weight: 800;
}
.admin-source {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
height: 30px;
padding: 0 12px;
border-radius: 7px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
}
.admin-source.web {
background: #eaf3fd;
color: #1d5f9f;
border: 1px solid #cfe3f8;
}
.admin-source.biblio {
background: #f1f5f9;
color: #475569;
border: 1px solid #dbe3ec;
}
/* ---------------------------------------------------------
ЛОКАЦИЈСКИ ОПИС
--------------------------------------------------------- */
.edit-copies-block {
width: 100%;
}
.edit-copies-block h3 {
margin: 0 0 8px;
color: #172033;
font-size: 13px;
font-weight: 800;
letter-spacing: .5px;
}
.edit-copies-block > p {
margin: 0 0 18px;
color: #64748b;
font-size: 12px;
line-height: 1.5;
}
/* ---------------------------------------------------------
ПОСТОЈЕЋИ ПРИМЕРЦИ
--------------------------------------------------------- */
.edit-copies-table {
width: 100%;
overflow: hidden;
border: 1px solid #dce5ef;
border-radius: 10px;
background: #ffffff;
}
.edit-copies-header,
.edit-copies-row {
display: grid;
grid-template-columns: minmax(220px, .9fr) minmax(280px, 1.1fr);
align-items: center;
}
.edit-copies-header {
background: #f1f5f9;
border-bottom: 1px solid #dce5ef;
}
.edit-copies-header > div {
padding: 12px 16px;
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: .8px;
}
.edit-copies-row {
min-height: 58px;
border-bottom: 1px solid #edf1f6;
}
.edit-copies-row:last-child {
border-bottom: none;
}
.edit-copies-row > div {
padding: 9px 16px;
}
.edit-copies-row > div:first-of-type {
color: #172033;
}
.edit-copies-row strong {
color: #172033;
font-size: 13px;
font-weight: 750;
}
.edit-copies-row select {
width: 100%;
max-width: 360px;
height: 38px;
padding: 0 11px;
border: 1px solid #cbd5e1;
border-radius: 7px;
background: #ffffff;
color: #334155;
font-family: inherit;
font-size: 12px;
outline: none;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease;
}
.edit-copies-row select:focus {
border-color: #4b91e8;
box-shadow: 0 0 0 3px rgba(75, 145, 232, .10);
}
/* ---------------------------------------------------------
НОВИ ПРИМЕРЦИ
--------------------------------------------------------- */
.new-inventory-row {
grid-template-columns: minmax(220px, 1fr) minmax(280px, 1fr) auto;
margin-bottom: 10px;
padding: 12px 14px;
background: #f8fafc;
border: 1px solid #dfe7f0;
border-radius: 10px;
}
.new-inventory-row > div {
display: flex;
flex-direction: column;
gap: 6px;
}
.new-inventory-row label {
color: #64748b;
font-size: 10px;
font-weight: 750;
letter-spacing: .4px;
}
.new-inventory-row input,
.new-inventory-row select {
width: 100%;
height: 40px;
box-sizing: border-box;
padding: 0 11px;
border: 1px solid #cbd5e1;
border-radius: 7px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 12px;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.new-inventory-row input:focus,
.new-inventory-row select:focus {
border-color: #4b91e8;
box-shadow: 0 0 0 3px rgba(75, 145, 232, .10);
}
.inventory-row-action {
display: flex !important;
align-items: flex-end;
justify-content: center;
}
.inventory-remove {
width: 38px;
height: 38px;
padding: 0;
border: 1px solid #d7dee8;
border-radius: 7px;
background: #ffffff;
color: #64748b;
font-family: inherit;
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.inventory-remove:hover {
background: #f1f5f9;
border-color: #cbd5e1;
color: #172033;
}
.inventory-add {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
margin-top: 4px;
padding: 0 14px;
border: 1px solid #b8c9dc;
border-radius: 7px;
background: #ffffff;
color: #173f78;
font-family: inherit;
font-size: 10px;
font-weight: 800;
letter-spacing: .5px;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.inventory-add:hover {
background: #f5f9fe;
border-color: #8eafd2;
color: #173f78;
}
/* ---------------------------------------------------------
ДУГМА ЗА ЧУВАЊЕ
--------------------------------------------------------- */
.edit-book-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
}
/* ---------------------------------------------------------
МОБИЛНИ ПРИКАЗ
--------------------------------------------------------- */
@media (max-width: 760px) {
.edit-book-header {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
.edit-copies-header {
display: none;
}
.edit-copies-row {
grid-template-columns: 1fr;
gap: 5px;
padding: 10px 0;
}
.edit-copies-row > div {
padding: 4px 14px;
}
.edit-copies-row > div:first-child {
padding-bottom: 0;
}
.edit-copies-row select {
max-width: none;
}
.new-inventory-row {
grid-template-columns: 1fr;
}
.inventory-row-action {
align-items: stretch !important;
}
.inventory-remove {
width: 100%;
}
.edit-book-actions {
align-items: stretch;
flex-direction: column-reverse;
}
.edit-book-actions .admin-primary-button,
.edit-book-actions .admin-back {
width: 100%;
justify-content: center;
}
}
/* =========================================================
ПРЕТРАГА КЊИГА – АДМИНИСТРАЦИЈА
========================================================= */
.admin-book-search-page {
width: 100%;
}
/* ---------------------------------------------------------
ФОРМА ПРЕТРАГЕ
--------------------------------------------------------- */
.admin-book-search-page form {
margin: 0;
}
.admin-book-search-page form > div:first-child {
width: 100%;
}
.admin-book-search-page input[type="text"] {
width: 100%;
min-height: 44px;
box-sizing: border-box;
padding: 0 14px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 13px;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.admin-book-search-page input[type="text"]:focus {
border-color: #4b91e8;
box-shadow: 0 0 0 3px rgba(75, 145, 232, .10);
}
/* ---------------------------------------------------------
RADIO IZBOR POLJA
--------------------------------------------------------- */
.admin-book-search-page input[type="radio"] {
accent-color: #1e3a5f;
}
.admin-book-search-page label {
color: #475569;
font-size: 12px;
cursor: pointer;
}
.admin-book-search-page input[type="radio"] + label {
margin-left: 4px;
}
/* ---------------------------------------------------------
DUGME PRETRAGA
--------------------------------------------------------- */
.admin-book-search-page button[type="submit"] {
min-height: 42px;
padding: 0 18px;
border: 1px solid #1e3a5f;
border-radius: 8px;
background: #1e3a5f;
color: #ffffff;
font-family: inherit;
font-size: 11px;
font-weight: 800;
letter-spacing: .5px;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.admin-book-search-page button[type="submit"]:hover {
background: #294d78;
border-color: #294d78;
transform: translateY(-1px);
}
/* ---------------------------------------------------------
REZULTATI
--------------------------------------------------------- */
.admin-book-search-page .admin-table-wrap {
margin-top: 22px;
}
.admin-book-search-page .admin-table {
table-layout: fixed;
}
.admin-book-search-page .admin-table th {
white-space: nowrap;
}
.admin-book-search-page .admin-table td {
vertical-align: middle;
}
/* BIBLIO.BOSS-ID */
.admin-book-search-page .admin-table th:first-child,
.admin-book-search-page .admin-table td:first-child {
width: 125px;
}
.admin-book-search-page .admin-table td:first-child {
color: #334155;
font-family: Consolas, monospace;
font-size: 12px;
font-weight: 700;
}
/* NASLOV */
.admin-book-search-page .admin-table th:nth-child(2) {
width: auto;
}
.admin-book-search-page .admin-table td:nth-child(2) strong {
display: block;
color: #172033;
font-size: 13px;
line-height: 1.4;
}
/* AUTOR */
.admin-book-search-page .admin-table th:nth-child(3) {
width: 19%;
}
.admin-book-search-page .admin-table td:nth-child(3) {
color: #475569;
}
/* GODINA */
.admin-book-search-page .admin-table th:nth-child(4),
.admin-book-search-page .admin-table td:nth-child(4) {
width: 90px;
}
/* IZVOR */
.admin-book-search-page .admin-table th:nth-child(5),
.admin-book-search-page .admin-table td:nth-child(5) {
width: 90px;
}
/* AKCIJA */
.admin-book-search-page .admin-table th:last-child,
.admin-book-search-page .admin-table td:last-child {
width: 105px;
text-align: right;
}
/* ---------------------------------------------------------
OZNAKA IZVORA
--------------------------------------------------------- */
.admin-book-search-page .admin-source {
min-width: 58px;
height: 27px;
padding: 0 9px;
border-radius: 6px;
font-size: 9px;
}
/* ---------------------------------------------------------
DUGME ИЗМЕНИ
--------------------------------------------------------- */
.admin-book-search-page .admin-table-action {
margin-right: 0;
min-width: 68px;
text-align: center;
box-sizing: border-box;
background: #ffffff;
color: #1e3a5f;
border-color: #b9c9dc;
}
.admin-book-search-page .admin-table-action:hover {
background: #1e3a5f;
border-color: #1e3a5f;
color: #ffffff;
}
/* ---------------------------------------------------------
PRAZAN REZULTAT
--------------------------------------------------------- */
.admin-book-search-page .admin-empty {
margin-top: 20px;
}
/* ---------------------------------------------------------
PAGINACIJA
--------------------------------------------------------- */
.admin-book-search-page a {
text-decoration: none;
}
/* ---------------------------------------------------------
MOBILNI PRIKAZ
--------------------------------------------------------- */
@media (max-width: 900px) {
.admin-book-search-page .admin-table {
min-width: 760px;
}
.admin-book-search-page .admin-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 600px) {
.admin-book-search-page .admin-table {
min-width: 700px;
}
.admin-book-search-page input[type="text"] {
min-height: 46px;
}
.admin-book-search-page button[type="submit"] {
width: 100%;
}
}
/* =========================================================
АДМИН ПРЕТРАГА — ПАГИНАЦИЈА
========================================================= */
.admin-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 22px;
}
.admin-pagination-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 7px;
background: #ffffff;
color: #334155;
font-family: inherit;
font-size: 10px;
font-weight: 800;
letter-spacing: .35px;
text-decoration: none;
white-space: nowrap;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.admin-pagination-button:hover {
background: #f1f5f9;
border-color: #aebdcd;
color: #172033;
}
.admin-pagination-button.disabled {
background: #f8fafc;
border-color: #e2e8f0;
color: #a0aabd;
cursor: default;
pointer-events: none;
}
.admin-pagination-info {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 0 12px;
color: #64748b;
font-size: 11px;
white-space: nowrap;
}
.admin-pagination-info strong {
margin: 0 3px;
color: #172033;
font-weight: 800;
}
@media (max-width: 600px) {
.admin-pagination {
gap: 6px;
}
.admin-pagination-button {
flex: 1 1 auto;
}
.admin-pagination-info {
order: -1;
width: 100%;
margin-bottom: 4px;
}
}
.catalog-stat-label {
margin-top: -2px;
margin-bottom: 5px;
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
}
/* =========================================================
ТРИ ПРЕТРАГЕ ФОНДА
========================================================= */
.catalog-search-fund {
margin-top: 22px;
}
.catalog-search-fund-title {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 22px;
}
.catalog-search-fund-title h2 {
margin: 0 0 5px;
color: #172033;
font-size: 15px;
font-weight: 800;
letter-spacing: .5px;
}
.catalog-search-fund-title p {
margin: 0;
color: #64748b;
font-size: 11px;
}
.catalog-search-fund-flag {
width: 34px;
height: 23px;
object-fit: cover;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(15, 23, 42, .15);
}
.catalog-search-fund-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
background: #f1f5f9;
color: #334e68;
font-size: 14px;
}
.search-results-fund {
margin-top: 18px;
margin-bottom: 24px;
}
/* ---------------------------------------------------------
RAZMAK IZMEĐU TRI PRETRAGE
--------------------------------------------------------- */
.catalog-search-panel + .search-results-fund {
margin-top: 18px;
}
.search-results-fund + .catalog-search-panel {
margin-top: 28px;
}
/* ---------------------------------------------------------
MOBILNI PRIKAZ
--------------------------------------------------------- */
@media (max-width: 700px) {
.catalog-search-fund-title {
align-items: flex-start;
}
.catalog-search-fund-title h2 {
font-size: 14px;
line-height: 1.35;
}
.catalog-search-fund-title p {
line-height: 1.5;
}
.catalog-search-fund-flag,
.catalog-search-fund-icon {
flex: 0 0 auto;
}
}
/* =========================================================
ТРИ ПРЕТРАГЕ + ЈЕДАН ЗАЈЕДНИЧКИ РЕЗУЛТАТ
========================================================= */
.catalog-search-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-bottom: 20px;
}
/* Три претраживача увек иду у први ред */
.catalog-search-grid > .catalog-search-panel:nth-of-type(1) {
grid-column: 1;
grid-row: 1;
}
.catalog-search-grid > .catalog-search-panel:nth-of-type(3) {
grid-column: 2;
grid-row: 1;
}
.catalog-search-grid > .catalog-search-panel:nth-of-type(5) {
grid-column: 3;
grid-row: 1;
}
/* Резултати се приказују преко целе ширине испод претраживача */
.catalog-search-grid > .search-results {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
}
/* Да сва три блока претраге имају једнаку висину */
.catalog-search-grid .catalog-search-panel {
margin-bottom: 0;
height: 100%;
}
/* МОБИЛНИ ПРИКАЗ */
@media (max-width: 900px) {
.catalog-search-grid {
grid-template-columns: 1fr;
}
.catalog-search-grid > .catalog-search-panel:nth-of-type(1),
.catalog-search-grid > .catalog-search-panel:nth-of-type(3),
.catalog-search-grid > .catalog-search-panel:nth-of-type(5) {
grid-column: 1;
grid-row: auto;
}
.catalog-search-grid > .search-results {
grid-column: 1;
grid-row: auto;
}
}
/* =========================================================
АКТИВНА ПРЕТРАГА
========================================================= */
.catalog-search-panel.active-search {
border-color: #172554;
box-shadow: 0 0 0 2px rgba(23, 37, 84, 0.08);
transform: translateY(-1px);
}
.catalog-search-panel.active-search .catalog-search-fund-title h2 {
color: #172554;
}
.admin-card-content {
min-width: 0;
flex: 1;
}
.admin-card-arrow {
margin-left: auto;
color: #172554;
font-size: 22px;
font-weight: 700;
line-height: 1;
}
.admin-card:hover .admin-card-arrow {
color: white;
}
/* =========================================================
BACKUP — РЕЗЕРВНА КОПИЈА БАЗЕ
========================================================= */
.backup-card {
display: flex;
align-items: flex-start;
gap: 20px;
max-width: 900px;
margin: 0 auto;
}
.backup-card .admin-card-icon {
flex: 0 0 auto;
margin-top: 2px;
}
.backup-card .admin-card-content {
flex: 1;
}
.backup-card .admin-card-content h2 {
margin: 0 0 10px;
}
.backup-card .admin-card-content p {
max-width: 700px;
line-height: 1.7;
}
.backup-note {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #e5e7eb;
color: #64748b;
font-size: 13px;
}
.backup-card .admin-form-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 22px;
}
.backup-card .admin-primary-button {
min-height: 42px;
}
.backup-card .admin-secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 16px;
border: 1px solid #d1d5db;
border-radius: 8px;
background: white;
color: #374151;
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: all 0.15s ease;
}
.backup-card .admin-secondary-button:hover {
border-color: #172554;
color: #172554;
}
/* МОБИЛНИ ПРИКАЗ */
@media (max-width: 700px) {
.backup-card {
flex-direction: column;
gap: 14px;
}
.backup-card .admin-form-actions {
flex-wrap: wrap;
}
}
/* =========================================================
DATUM PRINOVE - UREĐIVANJE PRIMERAKA
========================================================= */
.edit-copies-row input[type="date"] {
width: 100%;
min-width: 150px;
height: 42px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff;
color: #1e293b;
font-family: inherit;
font-size: 14px;
box-sizing: border-box;
cursor: pointer;
}
.edit-copies-row input[type="date"]:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.edit-copies-row input[type="date"]::-webkit-calendar-picker-indicator {
opacity: 0.75;
cursor: pointer;
}
.edit-copies-row input[type="date"]:hover {
border-color: #94a3b8;
}
.statistika-ukupno td {
background: #f1f5f9;
border-top: 2px solid #cbd5e1;
font-weight: 700;
}
/* =========================================================
ФИЛТЕРИ – ИНВЕНТАРНА КЊИГА И СТАТИСТИКА ПРИНОВА
========================================================= */
.admin-search-main {
display: grid;
grid-template-columns: minmax(220px, 1.5fr) minmax(180px, 1fr) minmax(120px, 0.65fr) minmax(120px, 0.65fr) auto;
gap: 12px;
align-items: center;
}
.admin-search-main select,
.admin-search-main input[type="number"] {
width: 100%;
height: 46px;
padding: 0 14px;
border: 1px solid #cbd5e1;
border-radius: 9px;
background: #ffffff;
color: #1e293b;
font-family: inherit;
font-size: 14px;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.admin-search-main select {
cursor: pointer;
}
.admin-search-main select:hover,
.admin-search-main input[type="number"]:hover {
border-color: #94a3b8;
}
.admin-search-main select:focus,
.admin-search-main input[type="number"]:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* =========================================================
ДУГМАД – ПРИКАЖИ
========================================================= */
.admin-search-main .admin-primary-button {
height: 46px;
padding: 0 22px;
border-radius: 9px;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* =========================================================
EXCEL ИЗВОЗ
========================================================= */
.admin-form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-top: 18px;
margin-bottom: 10px;
}
.admin-form-actions .admin-primary-button {
min-height: 44px;
padding: 0 20px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
text-decoration: none;
}
/* =========================================================
МАЊИ ЕКРАНИ
========================================================= */
@media (max-width: 900px) {
.admin-search-main {
grid-template-columns: 1fr 1fr;
}
.admin-search-main .admin-primary-button {
width: 100%;
}
.admin-form-actions {
justify-content: flex-start;
}
}
@media (max-width: 600px) {
.admin-search-main {
grid-template-columns: 1fr;
}
.admin-form-actions {
width: 100%;
}
.admin-form-actions .admin-primary-button {
width: 100%;
}
}
/* =========================================================
СТАТИСТИКА ПРИНОВА – ЗАГЛАВЉЕ ИЗВЕШТАЈА
========================================================= */
.statistika-dokument-header {
display: flex;
align-items: center;
gap: 28px;
padding: 24px 28px;
margin-bottom: 24px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 7px 24px rgba(15, 23, 42, 0.04);
}
.statistika-dokument-logo {
width: 150px;
min-width: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.statistika-dokument-logo img {
width: 135px;
height: auto;
display: block;
}
.statistika-dokument-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.statistika-dokument-library {
font-size: 18px;
font-weight: 700;
color: #1e3a5f;
margin-bottom: 7px;
}
.statistika-dokument-title {
font-size: 28px;
font-weight: 800;
color: #0f172a;
margin-bottom: 12px;
letter-spacing: 0.2px;
}
.statistika-dokument-line {
font-size: 14px;
line-height: 1.7;
color: #475569;
}
.statistika-dokument-line strong {
color: #1e293b;
}
/* =========================================================
ПРИЛАГОЂАВАЊЕ МАЊИМ ЕКРАНИМА
========================================================= */
@media (max-width: 700px) {
.statistika-dokument-header {
flex-direction: column;
align-items: flex-start;
gap: 18px;
padding: 20px;
}
.statistika-dokument-logo {
width: 100%;
min-width: 0;
justify-content: flex-start;
}
.statistika-dokument-logo img {
width: 110px;
}
.statistika-dokument-library {
font-size: 16px;
}
.statistika-dokument-title {
font-size: 24px;
}
}
/* =========================================================
СОРТИРАЊЕ КАТАЛОГА
========================================================= */
.browse-sort {
display: flex;
align-items: center;
gap: 9px;
color: #64748b;
font-size: 0.88rem;
}
.browse-sort label {
margin: 0;
color: #475569;
font-size: 0.82rem;
font-weight: 700;
white-space: nowrap;
}
.browse-sort select {
min-width: 190px;
height: 36px;
padding: 0 34px 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 12px;
font-weight: 600;
outline: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.browse-sort select:hover {
border-color: #94a3b8;
background: #f8fafc;
}
.browse-sort select:focus {
border-color: #334e68;
box-shadow: 0 0 0 3px rgba(51, 78, 104, 0.10);
}
/* =========================================================
ПОЧЕТНИ ЕКРАН BIBLIO BOSS
========================================================= */
.app-splash {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
opacity: 1;
visibility: visible;
transition: opacity 0.45s ease, visibility 0.45s ease;
}
.app-splash.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.app-splash-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.app-splash-logo {
display: block;
width: min(260px, 60vw);
height: auto;
margin-bottom: 24px;
}
.app-splash-message {
color: #64748b;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.2px;
}
@media (max-width: 600px) {
.app-splash-logo {
width: 220px;
margin-bottom: 20px;
}
.app-splash-message {
font-size: 13px;
}
}
/* =========================================================
O KATALOGU
========================================================= */
.about-page {
max-width: 1050px;
margin: 0 auto;
padding: 55px 25px 80px;
}
/* HEADER */
.about-header {
text-align: center;
margin-bottom: 42px;
}
.about-kicker {
margin-bottom: 10px;
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: 2.8px;
}
.about-header h1 {
margin: 0;
color: #172033;
font-size: 38px;
line-height: 1.15;
font-weight: 800;
}
.about-header p {
max-width: 680px;
margin: 13px auto 0;
color: #64748b;
font-size: 14px;
line-height: 1.6;
}
/* SECTIONS */
.about-section {
margin-bottom: 20px;
padding: 30px 34px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 15px;
box-shadow: 0 7px 24px rgba(15, 23, 42, 0.035);
}
.about-section-title {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 20px;
}
.about-section-number {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 9px;
background: #eef2f7;
color: #172554;
font-size: 10px;
font-weight: 800;
}
.about-section-title h2 {
margin: 0;
color: #172033;
font-size: 19px;
font-weight: 750;
}
.about-section p {
margin: 0 0 13px;
color: #526176;
font-size: 14px;
line-height: 1.75;
}
.about-section p:last-child {
margin-bottom: 0;
}
/* LIST */
.about-list {
margin: 4px 0 18px;
padding-left: 22px;
color: #526176;
}
.about-list li {
margin-bottom: 7px;
padding-left: 3px;
font-size: 14px;
line-height: 1.55;
}
/* NOTE */
.about-note {
margin-top: 20px !important;
padding: 14px 17px;
border-left: 3px solid #94a3b8;
background: #f8fafc;
color: #64748b !important;
font-size: 13px !important;
}
/* TAGS */
.about-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 17px 0 20px;
}
.about-tags span {
display: inline-flex;
align-items: center;
min-height: 31px;
padding: 0 11px;
border: 1px solid #dbe3ec;
border-radius: 7px;
background: #f8fafc;
color: #475569;
font-size: 11px;
font-weight: 700;
}
/* LOCATIONS */
.about-locations {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin: 17px 0 20px;
}
.about-locations div {
padding: 11px 14px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
color: #475569;
font-size: 12px;
font-weight: 600;
}
/* IMPORTANT */
.about-important {
border-color: #d7e0eb;
background: #fbfcfe;
}
/* GUIDES */
.about-guides {
margin-top: 32px;
padding: 34px;
border-radius: 16px;
background: #172554;
color: white;
}
.about-guides-header {
margin-bottom: 23px;
}
.about-guides-kicker {
margin-bottom: 8px;
color: rgba(255, 255, 255, 0.58);
font-size: 9px;
font-weight: 800;
letter-spacing: 2.5px;
}
.about-guides-header h2 {
margin: 0;
font-size: 22px;
font-weight: 750;
}
.about-guides-header p {
margin: 9px 0 0;
color: rgba(255, 255, 255, 0.68);
font-size: 13px;
line-height: 1.6;
}
/* GUIDE CARDS */
.about-guides-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.about-guide-card {
position: relative;
display: flex;
align-items: center;
gap: 14px;
min-height: 105px;
padding: 18px 20px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
background: rgba(255, 255, 255, 0.07);
color: white;
text-decoration: none;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.about-guide-card:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.28);
color: white;
text-decoration: none;
}
.about-guide-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
font-size: 21px;
}
.about-guide-content {
min-width: 0;
}
.about-guide-content h3 {
margin: 0;
font-size: 13px;
font-weight: 750;
}
.about-guide-content p {
margin: 6px 0 0;
color: rgba(255, 255, 255, 0.62);
font-size: 11px;
line-height: 1.55;
}
.about-guide-arrow {
margin-left: auto;
color: rgba(255, 255, 255, 0.5);
font-size: 20px;
transition: transform 0.18s ease;
}
.about-guide-card:hover .about-guide-arrow {
transform: translateX(4px);
color: white;
}
.about-guides-note {
margin-top: 17px;
color: rgba(255, 255, 255, 0.42);
font-size: 10px;
}
/* LIBRARY */
.about-library {
max-width: 720px;
margin: 45px auto 0;
padding: 0 20px;
text-align: center;
}
.about-library-line {
width: 45px;
height: 3px;
margin: 0 auto 19px;
border-radius: 4px;
background: #172554;
}
.about-library h2 {
margin: 0;
color: #334155;
font-size: 15px;
font-weight: 750;
}
.about-library p {
margin: 12px 0 0;
color: #7b8798;
font-size: 12px;
line-height: 1.7;
}
/* MOBILE */
@media (max-width: 700px) {
.about-page {
padding: 40px 15px 60px;
}
.about-header h1 {
font-size: 32px;
}
.about-section {
padding: 25px 21px;
}
.about-section-title h2 {
font-size: 17px;
}
.about-locations {
grid-template-columns: 1fr;
}
.about-guides {
padding: 27px 20px;
}
.about-guides-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 500px) {
.about-page {
padding-left: 12px;
padding-right: 12px;
}
.about-header h1 {
font-size: 29px;
}
.about-section {
padding: 22px 18px;
}
.about-section-title {
align-items: flex-start;
}
.about-section-title h2 {
font-size: 16px;
line-height: 1.35;
}
.about-guides {
padding: 24px 16px;
}
.about-guide-card {
padding: 16px;
}
}
/* =========================================================
ОБНОВА БАЗЕ
========================================================= */
.admin-warning-box {
margin-bottom: 24px;
padding: 18px 20px;
border: 1px solid #e4c76a;
border-left: 5px solid #c79a16;
border-radius: 8px;
background: #fff9e6;
color: #4d431f;
}
.admin-warning-box strong {
display: block;
margin-bottom: 8px;
color: #8a6810;
font-size: 15px;
letter-spacing: 0.5px;
}
.admin-warning-box p {
margin: 6px 0;
line-height: 1.6;
}
.admin-file-input {
display: block;
width: 100%;
max-width: 600px;
margin-top: 8px;
padding: 10px;
border: 1px solid #cfd8e3;
border-radius: 6px;
background: #ffffff;
font-size: 14px;
box-sizing: border-box;
}
.admin-file-input:focus {
outline: none;
border-color: #3f6f9f;
box-shadow: 0 0 0 2px rgba(63, 111, 159, 0.12);
}
.admin-form-group small {
display: block;
margin-top: 8px;
color: #6b7280;
line-height: 1.5;
}
.admin-confirm-box {
margin-top: 24px;
padding: 14px 16px;
border: 1px solid #d8e0e8;
border-radius: 7px;
background: #f7f9fb;
}
.admin-confirm-box label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
color: #26384a;
line-height: 1.5;
}
.admin-confirm-box input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
flex: 0 0 auto;
cursor: pointer;
}
.admin-form-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 26px;
}
.admin-primary-button,
.admin-secondary-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
}
.admin-primary-button {
border: 1px solid #315d86;
background: #315d86;
color: #ffffff;
}
.admin-primary-button:hover {
background: #274e73;
border-color: #274e73;
}
.admin-secondary-button {
border: 1px solid #cbd5df;
background: #ffffff;
color: #34495e;
}
.admin-secondary-button:hover {
background: #f3f6f9;
border-color: #b8c4d0;
}
.admin-message {
margin-bottom: 20px;
padding: 14px 18px;
border-radius: 7px;
line-height: 1.5;
}
.admin-message-error {
border: 1px solid #e3b8b8;
background: #fff1f1;
color: #8a2525;
}
.admin-message-success {
border: 1px solid #b9d8c1;
background: #eef9f1;
color: #276738;
}
.text-danger {
display: block;
margin-top: 6px;
color: #b42318;
font-size: 13px;
}
/* =========================================================
BIBLIO BOSS – UDK GENERATOR
========================================================= */
.udk-results-card,
.udk-generator-card {
width: 100%;
max-width: 1100px;
margin: 0 auto 28px auto;
background: #ffffff;
border: 1px solid #dbe3eb;
border-radius: 14px;
box-shadow: 0 4px 18px rgba(24, 43, 62, 0.06);
overflow: hidden;
}
/* ---------------------------------------------------------
HEADER
--------------------------------------------------------- */
.udk-generator-header,
.udk-results-header {
padding: 24px 28px;
background: linear-gradient( 180deg, #f8fafc 0%, #ffffff 100% );
border-bottom: 1px solid #e3e9ef;
}
.udk-generator-header h2,
.udk-results-header h2 {
margin: 0;
color: #20364d;
font-size: 21px;
font-weight: 700;
letter-spacing: 0.2px;
}
.udk-generator-header p {
max-width: 820px;
margin: 8px 0 0 0;
color: #667789;
font-size: 14px;
line-height: 1.6;
}
/* ---------------------------------------------------------
SEARCH
--------------------------------------------------------- */
.udk-search-form {
padding: 22px 28px 26px 28px;
}
.udk-search-row {
display: flex;
gap: 12px;
align-items: stretch;
}
.udk-form-input,
.udk-form-textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #cbd6e0;
border-radius: 8px;
background: #ffffff;
color: #26384a;
font-family: inherit;
font-size: 14px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.udk-form-input {
min-height: 42px;
padding: 9px 12px;
}
.udk-form-textarea {
min-height: 120px;
padding: 11px 12px;
resize: vertical;
line-height: 1.55;
}
.udk-form-input::placeholder,
.udk-form-textarea::placeholder {
color: #9aa8b5;
}
.udk-form-input:focus,
.udk-form-textarea:focus {
outline: none;
border-color: #47739d;
box-shadow: 0 0 0 3px rgba(71, 115, 157, 0.12);
}
/* ---------------------------------------------------------
BUTTON
--------------------------------------------------------- */
.udk-generate-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 9px 18px;
border: 1px solid #315d86;
border-radius: 8px;
background: #315d86;
color: #ffffff;
font-family: inherit;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.2px;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.udk-generate-button:hover {
background: #264d73;
border-color: #264d73;
box-shadow: 0 3px 10px rgba(38, 77, 115, 0.18);
}
.udk-generate-button:active {
transform: translateY(1px);
}
/* ---------------------------------------------------------
GENERATOR FORM
--------------------------------------------------------- */
.udk-generator-card > form {
padding: 28px;
}
.udk-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 24px;
}
.udk-form-group {
min-width: 0;
}
.udk-form-wide {
grid-column: 1 / -1;
}
.udk-form-group label {
display: block;
margin-bottom: 7px;
color: #334b62;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.35px;
}
.udk-form-actions {
display: flex;
justify-content: flex-start;
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid #e5ebf0;
}
/* ---------------------------------------------------------
SEARCH / RESULT LIST
--------------------------------------------------------- */
.udk-results {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px 28px 28px 28px;
}
.udk-result {
display: grid;
grid-template-columns: 185px minmax(0, 1fr);
gap: 22px;
align-items: start;
padding: 18px 20px;
border: 1px solid #dce4eb;
border-radius: 10px;
background: #ffffff;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.udk-result:hover {
border-color: #b8c8d7;
box-shadow: 0 4px 14px rgba(31, 55, 79, 0.07);
transform: translateY(-1px);
}
/* ---------------------------------------------------------
UDK NUMBER
--------------------------------------------------------- */
.udk-notation {
color: #315d86;
font-size: 21px;
font-weight: 750;
line-height: 1.35;
letter-spacing: 0.2px;
word-break: break-word;
}
/* ---------------------------------------------------------
RESULT CONTENT
--------------------------------------------------------- */
.udk-result-content {
min-width: 0;
}
.udk-caption {
color: #263b50;
font-size: 16px;
font-weight: 700;
line-height: 1.45;
}
.udk-description {
margin-top: 7px;
color: #5d6e7e;
font-size: 13px;
line-height: 1.55;
}
.udk-keywords {
margin-top: 9px;
color: #738190;
font-size: 12px;
line-height: 1.5;
}
/* ---------------------------------------------------------
RESULT COUNT
--------------------------------------------------------- */
.udk-result-count {
margin-top: 5px;
color: #7a8997;
font-size: 12px;
}
/* ---------------------------------------------------------
GENERATOR SUGGESTION
--------------------------------------------------------- */
.udk-suggestion-reason {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid #edf1f4;
color: #536577;
font-size: 13px;
line-height: 1.55;
}
.udk-suggestion-reason strong {
color: #334b62;
}
.udk-suggestion-score {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 10px;
padding: 5px 9px;
border-radius: 6px;
background: #f1f5f8;
color: #657586;
font-size: 11px;
font-weight: 600;
}
.udk-suggestion-score strong {
color: #315d86;
font-size: 12px;
}
/* ---------------------------------------------------------
WARNING / INFORMATION
--------------------------------------------------------- */
.udk-warning {
margin: 0 28px 26px 28px;
padding: 13px 15px;
border: 1px solid #dce5ec;
border-radius: 8px;
background: #f7f9fb;
color: #667789;
font-size: 12px;
line-height: 1.55;
}
.udk-warning strong {
color: #3c5267;
}
/* ---------------------------------------------------------
OLD SUPPORTING ELEMENTS
--------------------------------------------------------- */
.udk-source {
padding: 5px 8px;
border-radius: 5px;
background: #f1f5f8;
color: #6b7280;
font-size: 11px;
white-space: nowrap;
}
.udk-intro {
margin: 0;
color: #4b5d6d;
font-size: 15px;
line-height: 1.7;
}
.udk-info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 24px;
}
.udk-info-item {
display: flex;
flex-direction: column;
gap: 7px;
padding: 16px;
border: 1px solid #dce3ea;
border-radius: 7px;
background: #f8fafc;
}
.udk-info-item strong {
color: #315d86;
font-size: 14px;
}
.udk-info-item span {
color: #596b7c;
font-size: 13px;
}
/* ---------------------------------------------------------
RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 900px) {
.udk-form-grid {
grid-template-columns: 1fr;
}
.udk-form-wide {
grid-column: auto;
}
.udk-result {
grid-template-columns: 1fr;
gap: 9px;
}
.udk-notation {
font-size: 20px;
}
}
@media (max-width: 650px) {
.udk-search-row {
flex-direction: column;
}
.udk-search-form,
.udk-generator-card > form {
padding: 20px;
}
.udk-generator-header,
.udk-results-header {
padding: 20px;
}
.udk-results {
padding: 15px 20px 20px 20px;
}
.udk-warning {
margin-left: 20px;
margin-right: 20px;
}
.udk-generate-button {
width: 100%;
}
}
/* =========================================================
BIBLIO BOSS + — ZAVRŠNA OPTIMIZACIJA ZA MOBILNE UREĐAJE
---------------------------------------------------------
OVAJ BLOK MENJA ISKLJUČIVO PRIKAZ DO 767px.
DESKTOP PRIKAZ NIJE MENJAN.
========================================================= */
@media (max-width: 767px) {
/* -----------------------------------------------------
OPŠTA MOBILNA PRAVILA
----------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body {
font-size: 14px;
}
img,
svg,
video,
canvas {
max-width: 100%;
}
input,
select,
textarea,
button {
max-width: 100%;
font-family: inherit;
}
/* -----------------------------------------------------
GLAVNO ZAGLAVLJE I NAVIGACIJA
----------------------------------------------------- */
.header-inner {
width: 100%;
min-height: auto;
padding: 12px 12px 14px;
gap: 11px;
}
.header-brand {
width: 100%;
gap: 10px;
justify-content: center;
min-width: 0;
}
.header-logo {
width: 54px;
flex: 0 0 54px;
}
.header-brand-text {
min-width: 0;
padding-left: 10px;
}
.header-program {
font-size: 16px;
letter-spacing: 1px;
white-space: nowrap;
}
.header-library {
margin-top: 5px;
font-size: 10px;
line-height: 1.35;
}
.header-place {
font-size: 9px;
letter-spacing: 1.5px;
}
.main-navigation {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 3px;
}
.main-navigation a {
min-height: 34px;
padding: 0 7px;
font-size: 9px;
letter-spacing: 0;
white-space: nowrap;
}
.main-footer {
font-size: 10px;
}
.footer-inner {
min-height: auto;
padding: 16px 12px;
gap: 7px;
flex-direction: column;
text-align: center;
}
/* =====================================================
POČETNA STRANA
===================================================== */
.home-page {
min-height: auto;
width: 100%;
}
.home-introduction {
padding: 30px 14px 22px;
}
.home-introduction-inner {
width: 100%;
}
.home-kicker {
margin-bottom: 9px;
font-size: 9px;
letter-spacing: 2px;
}
.home-introduction h1 {
font-size: 31px;
line-height: 1.08;
letter-spacing: -0.8px;
}
.home-library-name {
margin-top: 9px;
font-size: 15px;
line-height: 1.35;
}
.home-city {
font-size: 10px;
letter-spacing: 1.5px;
}
.home-separator {
width: 42px;
height: 2px;
margin: 18px auto 16px;
}
.home-introduction p {
font-size: 13px;
line-height: 1.6;
}
/* Statistika fondova:
tri statistike ostaju JEDNA PORED DRUGE. */
.catalog-statistics {
width: calc(100% - 20px);
max-width: none;
margin: 0 10px;
padding: 16px 6px;
display: grid;
grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
gap: 0;
align-items: center;
border-radius: 12px;
}
.catalog-stat {
min-width: 0;
width: 100%;
padding: 0 4px;
}
.catalog-stat-title {
min-height: 30px;
gap: 4px;
font-size: 8px;
letter-spacing: 0.5px;
line-height: 1.25;
white-space: normal;
overflow-wrap: anywhere;
}
.catalog-stat-language {
white-space: normal;
}
.catalog-stat-flag {
width: 18px;
height: 12px;
flex: 0 0 18px;
}
.catalog-stat-number {
margin-top: 6px;
font-size: 20px;
line-height: 1.05;
}
.catalog-stat-secondary {
margin-top: 4px;
font-size: 9px;
line-height: 1.25;
overflow-wrap: anywhere;
}
.catalog-stat-line {
width: 1px;
height: 42px;
}
.home-options {
padding: 18px 10px 0;
}
.home-options-inner {
width: 100%;
max-width: none;
grid-template-columns: 1fr;
gap: 10px;
}
.home-card {
min-height: 135px;
padding: 18px 17px 18px;
border-radius: 12px;
}
.home-card-icon {
width: 40px;
height: 40px;
margin-bottom: 14px;
}
.home-card h2 {
font-size: 14px;
}
.home-card p {
margin-top: 7px;
font-size: 12px;
line-height: 1.5;
}
.home-card-content {
padding-right: 25px;
}
.home-card-arrow {
right: 15px;
bottom: 15px;
font-size: 18px;
}
.home-description {
margin-top: 22px;
padding: 0 15px 30px;
}
.home-description p {
font-size: 12px;
line-height: 1.6;
}
/* Stara/alternativna početna hero struktura, ako je prisutna. */
.home-hero {
min-height: auto;
}
.home-hero-content {
padding: 38px 15px 42px;
}
.home-library-title {
font-size: 18px;
letter-spacing: 1.5px;
}
.home-library-place {
font-size: 9px;
letter-spacing: 2px;
}
.home-hero h1 {
font-size: 31px;
line-height: 1.08;
}
.home-description {
max-width: 100%;
}
.home-actions {
grid-template-columns: 1fr;
gap: 9px;
}
.home-action {
min-height: 70px;
padding: 13px 14px;
}
/* =====================================================
JAVNI KATALOG / PRETRAGA I PRELISTAVANJE
===================================================== */
.catalog-page {
width: 100%;
max-width: none;
padding: 0 10px 40px;
}
.catalog-hero {
margin-top: 14px;
margin-bottom: 14px;
border-radius: 12px;
}
.catalog-hero-content {
padding: 27px 17px 30px;
}
.catalog-eyebrow {
font-size: 9px;
letter-spacing: 1.5px;
}
.catalog-hero h1 {
font-size: 29px;
line-height: 1.1;
}
.catalog-hero p {
font-size: 13px;
line-height: 1.55;
}
.catalog-toolbar {
margin-bottom: 12px;
padding: 14px;
gap: 12px;
border-radius: 11px;
}
.catalog-result-info {
width: 100%;
gap: 10px;
}
.catalog-result-number {
font-size: 23px;
}
.catalog-result-title {
font-size: 13px;
}
.catalog-result-subtitle {
font-size: 11px;
}
.page-size {
width: 100%;
flex-wrap: wrap;
}
.catalog-book {
grid-template-columns: 40px minmax(0, 1fr);
gap: 11px;
padding: 15px;
border-radius: 11px;
}
.catalog-book-number {
width: 40px;
height: 36px;
border-radius: 8px;
}
.catalog-book-author {
font-size: 12px;
}
.catalog-book-title {
font-size: 17px;
}
.catalog-book-subtitle {
font-size: 12px;
}
.catalog-book-publication {
font-size: 11px;
line-height: 1.5;
}
.catalog-book-type {
font-size: 9px;
}
.catalog-book-action {
grid-column: 2;
}
.catalog-book-action a {
width: 100%;
min-height: 38px;
justify-content: center;
}
.catalog-pagination {
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.pagination-button {
min-height: 38px;
padding: 0 11px;
font-size: 11px;
}
.pagination-info {
width: 100%;
justify-content: center;
order: -1;
}
/* -----------------------------------------------------
PRETRAGA KATALOGA
----------------------------------------------------- */
.search-page {
width: 100%;
max-width: none;
padding: 28px 10px 45px;
}
.search-page-header {
margin-bottom: 18px;
}
.search-page-kicker {
font-size: 9px;
letter-spacing: 1.8px;
}
.search-page-header h1 {
font-size: 28px;
line-height: 1.15;
}
.search-page-header p {
margin-top: 9px;
font-size: 12px;
line-height: 1.55;
}
.catalog-search-grid {
width: 100%;
grid-template-columns: 1fr;
gap: 10px;
}
.catalog-search-grid > .catalog-search-panel:nth-of-type(1),
.catalog-search-grid > .catalog-search-panel:nth-of-type(3),
.catalog-search-grid > .catalog-search-panel:nth-of-type(5) {
grid-column: 1;
grid-row: auto;
}
.catalog-search-grid > .search-results {
grid-column: 1;
grid-row: auto;
}
.catalog-search-panel {
width: 100%;
min-width: 0;
}
.catalog-search-panel,
.catalog-search {
padding: 14px;
border-radius: 11px;
}
.catalog-search-main {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.catalog-search-main input {
width: 100%;
min-width: 0;
height: 50px;
padding: 0 13px;
font-size: 16px;
}
.catalog-search-main button {
width: 100%;
min-height: 46px;
height: 46px;
padding: 0 15px;
}
.catalog-search-fund-title {
width: 100%;
gap: 9px;
margin-bottom: 12px;
align-items: flex-start;
}
.catalog-search-fund-title h2 {
font-size: 13px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.catalog-search-fund-title p {
margin-top: 4px;
font-size: 11px;
line-height: 1.45;
}
.catalog-search-fund-flag,
.catalog-search-fund-icon {
width: 26px;
height: auto;
flex: 0 0 26px;
}
.catalog-search-fields {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-top: 11px;
font-size: 11px;
}
.search-fields-label {
width: 100%;
margin-bottom: -2px;
}
.catalog-search-fields label {
min-height: 28px;
gap: 5px;
font-size: 11px;
}
.catalog-search-fields input {
width: 17px;
height: 17px;
}
.search-help {
margin-top: 12px;
padding-top: 11px;
font-size: 10px;
line-height: 1.55;
}
.search-results {
width: 100%;
min-width: 0;
}
.search-results-header {
padding: 0 2px 10px;
gap: 5px;
}
.search-result-card {
width: 100%;
min-width: 0;
padding: 14px;
gap: 12px;
border-radius: 10px;
}
.search-result-card h2 {
font-size: 16px;
line-height: 1.3;
}
.search-result-author {
font-size: 11px;
}
.search-result-subtitle {
font-size: 11px;
}
.search-result-publication {
font-size: 10px;
line-height: 1.5;
}
.search-result-action,
.search-result-action a {
width: 100%;
}
.search-result-action a {
min-height: 38px;
justify-content: center;
}
.search-pagination {
gap: 8px;
margin-top: 18px;
}
/* =====================================================
DETALJI ZAPISA
===================================================== */
.details-page {
width: 100%;
max-width: none;
padding: 28px 10px 45px;
}
.details-header {
margin-bottom: 18px;
}
.details-kicker {
font-size: 9px;
letter-spacing: 0.12em;
}
.details-header h1 {
font-size: 25px;
line-height: 1.15;
}
.details-header p {
font-size: 12px;
line-height: 1.5;
}
.catalog-record {
width: 100%;
min-width: 0;
border-radius: 11px;
}
/* TRI TAB-a UVEK OSTAJU JEDAN PORED DRUGOG. */
.record-tabs {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px;
margin-bottom: -1px;
overflow: visible;
}
.record-tab {
width: 100%;
min-width: 0;
min-height: 48px;
padding: 9px 4px;
border-radius: 8px 8px 0 0;
font-size: 9px;
line-height: 1.2;
letter-spacing: 0;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
}
.record-title-block,
.record-section {
padding: 19px 15px;
}
.record-author {
font-size: 12px;
}
.record-title-block h2 {
font-size: 20px;
line-height: 1.3;
}
.record-subtitle {
font-size: 13px;
line-height: 1.45;
}
.record-field {
grid-template-columns: 1fr;
gap: 4px;
padding: 10px 0;
}
.record-label {
font-size: 10px;
}
.record-value {
font-size: 12px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.record-tags {
gap: 5px;
}
.record-tag {
padding: 5px 8px;
font-size: 10px;
}
.record-note {
padding: 12px 13px;
font-size: 11px;
}
.basic-record {
padding: 18px 13px;
}
.basic-record-label {
margin-bottom: 12px;
font-size: 9px;
}
.catalog-slip {
padding: 17px 14px;
font-size: 14px;
line-height: 1.7;
}
.catalog-slip-description,
.catalog-slip-udk,
.catalog-slip-isbn {
margin-left: 10px;
}
.catalog-note {
margin-top: 17px;
padding: 12px 13px;
font-size: 11px;
}
.copies-table {
width: 100%;
overflow: hidden;
}
.copies-header,
.copies-row {
grid-template-columns: 1fr;
}
.copies-header > div,
.copies-row > div {
padding: 9px 11px;
}
.copies-header > div:last-child {
display: none;
}
.copies-row > div:last-child {
padding-top: 0;
}
.record-system-info {
padding: 13px 15px;
}
.record-system-info div {
max-width: 100%;
flex-wrap: wrap;
gap: 5px;
font-size: 10px;
overflow-wrap: anywhere;
}
.details-actions {
flex-direction: column;
gap: 8px;
}
.details-button {
width: 100%;
min-height: 42px;
}
/* =====================================================
ADMINISTRACIJA — ZAJEDNIČKI MOBILNI IZGLED
===================================================== */
.admin-page {
width: 100%;
max-width: none;
padding: 25px 11px 45px;
}
.admin-header {
width: 100%;
align-items: stretch;
flex-direction: column;
gap: 12px;
margin-bottom: 19px;
}
.admin-kicker {
margin-bottom: 6px;
font-size: 9px;
letter-spacing: 1.8px;
}
.admin-header h1 {
font-size: 27px;
line-height: 1.15;
}
.admin-header p {
margin-top: 7px;
font-size: 12px;
line-height: 1.5;
}
.admin-user {
width: 100%;
min-width: 0;
padding: 10px 13px;
border-radius: 9px;
}
.admin-user span {
font-size: 9px;
}
.admin-user strong {
font-size: 12px;
}
.admin-content {
width: 100%;
margin-top: 18px;
}
.admin-grid {
width: 100%;
grid-template-columns: 1fr;
gap: 10px;
}
.admin-card {
min-height: 0;
padding: 18px;
border-radius: 11px;
}
.admin-card-icon {
width: 40px;
height: 40px;
margin-bottom: 14px;
font-size: 20px;
}
.admin-card h2 {
font-size: 14px;
line-height: 1.3;
}
.admin-card p {
max-width: none;
font-size: 11px;
line-height: 1.5;
}
.admin-card-link {
position: static;
width: fit-content;
min-width: 0;
height: 32px;
margin-top: 15px;
padding: 0 12px;
font-size: 9px;
}
.admin-footer-actions,
.admin-footer-right {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin-top: 18px;
}
.admin-back,
.admin-logout,
.admin-footer-right .admin-back {
width: 100%;
justify-content: center;
min-height: 40px;
}
/* -----------------------------------------------------
ADMIN FORME — BIBLIOTEKARI, NOVA KNJIGA,
IZMENA KNJIGE, LOZINKE
----------------------------------------------------- */
.admin-add-user {
width: 100%;
margin-bottom: 17px;
padding: 17px 14px;
border-radius: 11px;
}
.admin-add-user h2 {
font-size: 16px;
line-height: 1.3;
}
.admin-add-user > p {
margin-bottom: 16px;
font-size: 11px;
line-height: 1.5;
}
.admin-user-form {
width: 100%;
grid-template-columns: 1fr;
gap: 11px;
}
.admin-form-group {
width: 100%;
min-width: 0;
gap: 6px;
}
.admin-form-group label {
font-size: 10px;
}
.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea {
width: 100%;
min-width: 0;
min-height: 44px;
height: auto;
padding: 9px 11px;
font-size: 16px;
line-height: 1.35;
}
.admin-form-group textarea {
min-height: 88px;
}
.admin-primary-button,
.admin-secondary-button {
width: 100%;
min-height: 44px;
height: auto;
padding: 9px 14px;
font-size: 11px;
white-space: normal;
text-align: center;
}
.admin-form-actions {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin-top: 17px;
}
.admin-section-header {
margin-bottom: 13px;
}
.admin-section-header h2 {
font-size: 16px;
line-height: 1.3;
}
.admin-section-header p {
font-size: 11px;
line-height: 1.5;
}
.admin-message {
font-size: 11px;
line-height: 1.5;
}
/* -----------------------------------------------------
ADMIN TABELE
----------------------------------------------------- */
.admin-table-wrap {
width: 100%;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
border-radius: 10px;
}
.admin-table {
width: 100%;
min-width: 620px;
table-layout: auto;
}
.admin-table th,
.admin-table td {
padding: 9px 9px;
font-size: 10px;
line-height: 1.35;
overflow-wrap: anywhere;
word-break: break-word;
}
.admin-table th {
font-size: 9px;
white-space: normal;
}
.admin-table td strong {
font-size: 10px;
}
.admin-status {
padding: 4px 7px;
font-size: 8px;
}
.admin-table-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
margin-right: 3px;
padding: 0 8px;
font-size: 9px;
}
/* Tabele sa mnogo kolona dobijaju kontrolisano skrolovanje
unutar svog okvira, nikada preko cele stranice. */
.admin-book-search-page .admin-table {
min-width: 690px;
}
.admin-book-search-page .admin-table-wrap {
overflow-x: auto;
}
/* -----------------------------------------------------
PRETRAGA KNJIGA U ADMINISTRACIJI
----------------------------------------------------- */
.admin-book-search-page {
width: 100%;
min-width: 0;
}
.admin-book-search-page form {
width: 100%;
}
.admin-book-search-page input[type="text"] {
width: 100%;
min-height: 48px;
font-size: 16px;
}
.admin-book-search-page button[type="submit"] {
width: 100%;
min-height: 44px;
}
.admin-search-fields {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
margin-top: 10px;
}
.admin-search-fields label {
font-size: 10px;
}
/* -----------------------------------------------------
FILTERI — INVENTARNA KNJIGA / STATISTIKA
----------------------------------------------------- */
.admin-search-main {
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.admin-search-main select,
.admin-search-main input[type="number"] {
width: 100%;
min-width: 0;
height: 46px;
font-size: 16px;
}
.admin-search-main .admin-primary-button {
width: 100%;
height: auto;
min-height: 44px;
}
.admin-form-actions .admin-primary-button {
width: 100%;
}
/* -----------------------------------------------------
NOVA KNJIGA / IZMENA KNJIGE
----------------------------------------------------- */
.nova-knjiga-grid {
width: 100%;
grid-template-columns: 1fr;
gap: 11px;
}
.nova-knjiga-field-wide,
.nova-knjiga-field-full {
grid-column: 1;
}
.nova-knjiga-section {
width: 100%;
}
.nova-knjiga-section h2 {
font-size: 16px;
line-height: 1.3;
}
.nova-knjiga-section > p {
margin-bottom: 15px;
font-size: 11px;
line-height: 1.5;
}
.nova-knjiga-divider {
margin: 22px 0;
}
.nova-knjiga-submit {
width: 100%;
margin-top: 17px;
justify-content: stretch;
}
.nova-knjiga-submit .admin-primary-button {
width: 100%;
}
.nova-knjiga-success {
width: 100%;
align-items: stretch;
flex-direction: column;
gap: 10px;
padding: 13px;
}
.nova-knjiga-success .admin-primary-button {
width: 100%;
}
.edit-book-header {
width: 100%;
align-items: stretch;
flex-direction: column;
gap: 10px;
margin-bottom: 17px;
padding: 10px 0 15px;
}
.edit-book-actions {
width: 100%;
align-items: stretch;
flex-direction: column-reverse;
gap: 8px;
}
.edit-book-actions .admin-primary-button,
.edit-book-actions .admin-back {
width: 100%;
justify-content: center;
}
.edit-copies-header {
display: none;
}
.edit-copies-row {
grid-template-columns: 1fr;
gap: 5px;
padding: 9px 0;
}
.edit-copies-row > div {
padding: 4px 11px;
}
.edit-copies-row select,
.edit-copies-row input {
width: 100%;
max-width: none;
min-height: 42px;
}
.new-inventory-row {
grid-template-columns: 1fr;
}
.inventory-row {
grid-template-columns: 1fr;
gap: 8px;
}
.inventory-row-action {
align-items: stretch !important;
}
.inventory-remove {
width: 100%;
min-height: 40px;
height: 40px;
}
.inventory-add {
width: 100%;
min-height: 40px;
}
/* -----------------------------------------------------
UVOZ / OBNOVA / BACKUP
----------------------------------------------------- */
.admin-import-box,
.admin-card-body {
width: 100%;
padding: 17px 14px;
}
.admin-import-info {
padding: 13px;
margin-bottom: 16px;
}
.admin-import-info h2 {
font-size: 14px;
line-height: 1.35;
}
.admin-import-info p {
font-size: 11px;
}
.admin-file-field {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 7px;
padding: 11px 0;
}
.admin-file-field label {
font-size: 10px;
}
.admin-file-field input[type="file"],
.admin-file-input {
width: 100%;
max-width: none;
font-size: 13px;
}
.admin-import-actions {
width: 100%;
flex-direction: column;
gap: 8px;
}
.admin-import-actions .admin-login-button,
.admin-import-actions .admin-primary-button {
width: 100%;
}
.backup-card {
width: 100%;
max-width: none;
flex-direction: column;
gap: 11px;
}
.backup-card .admin-form-actions {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.backup-card .admin-primary-button,
.backup-card .admin-secondary-button {
width: 100%;
}
.admin-warning-box {
padding: 13px 14px;
margin-bottom: 16px;
font-size: 11px;
line-height: 1.5;
}
.admin-warning-box strong {
font-size: 13px;
}
.admin-confirm-box {
padding: 11px 12px;
margin-top: 17px;
}
.admin-confirm-box label {
gap: 8px;
font-size: 11px;
line-height: 1.45;
}
.admin-confirm-box input[type="checkbox"] {
width: 18px;
height: 18px;
}
/* -----------------------------------------------------
STATISTIKA PRINOVA / IZVEŠTAJI
----------------------------------------------------- */
.statistika-dokument-header {
width: 100%;
align-items: flex-start;
flex-direction: column;
gap: 10px;
padding: 15px;
}
.statistika-dokument-info,
.statistika-dokument-library,
.statistika-dokument-line {
max-width: 100%;
}
.statistika-ukupno {
font-size: 11px;
}
/* -----------------------------------------------------
ADMIN PAGINACIJA
----------------------------------------------------- */
.admin-pagination {
width: 100%;
gap: 5px;
}
.admin-pagination-button {
min-height: 36px;
flex: 1 1 auto;
padding: 0 8px;
font-size: 9px;
}
.admin-pagination-info {
width: 100%;
order: -1;
min-height: 30px;
margin-bottom: 2px;
font-size: 10px;
}
/* -----------------------------------------------------
PRIJAVA BIBLIOTEKARA
----------------------------------------------------- */
.admin-login-page {
min-height: calc(100vh - 130px);
width: 100%;
padding: 25px 11px 40px;
}
.admin-login-box {
width: 100%;
max-width: 430px;
padding: 22px 16px;
border-radius: 11px;
}
.admin-login-kicker {
font-size: 9px;
letter-spacing: 1.5px;
}
.admin-login-box h1 {
font-size: 21px;
line-height: 1.2;
}
.admin-login-description {
margin-bottom: 20px;
font-size: 11px;
line-height: 1.5;
}
.admin-login-field {
margin-bottom: 14px;
}
.admin-login-field label {
font-size: 10px;
}
.admin-login-field input {
width: 100%;
height: 46px;
font-size: 16px;
}
.admin-login-box .admin-login-button {
width: 100%;
min-height: 44px;
}
/* -----------------------------------------------------
UDK ADMINISTRACIJA
----------------------------------------------------- */
.admin-page-header {
width: 100%;
margin-bottom: 18px;
}
.admin-page-header h1 {
font-size: 27px;
line-height: 1.15;
}
.udk-generator-card,
.udk-results-card {
width: 100%;
min-width: 0;
padding: 15px;
border-radius: 11px;
}
.udk-form-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.udk-form-wide {
grid-column: 1;
}
.udk-search-row {
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.udk-search-form input,
.udk-form-input,
.udk-form-textarea {
width: 100%;
min-width: 0;
min-height: 44px;
font-size: 16px;
}
.udk-form-textarea {
min-height: 90px;
}
.udk-generate-button,
.udk-form-actions .admin-primary-button {
width: 100%;
}
.udk-results {
width: 100%;
min-width: 0;
}
}
/* -----------------------------------------------------
MANJE ŠIRINE — VEOMA USKI TELEFONI
----------------------------------------------------- */
@media (max-width: 380px) {
.header-program {
font-size: 14px;
}
.header-logo {
width: 48px;
flex-basis: 48px;
}
.main-navigation a {
padding: 0 5px;
font-size: 8px;
}
.home-introduction h1 {
font-size: 28px;
}
.catalog-statistics {
width: calc(100% - 12px);
margin-left: 6px;
margin-right: 6px;
padding-left: 3px;
padding-right: 3px;
}
.catalog-stat {
padding: 0 2px;
}
.catalog-stat-title {
font-size: 7px;
}
.catalog-stat-number {
font-size: 18px;
}
.catalog-stat-secondary {
font-size: 8px;
}
.record-tab {
min-height: 50px;
padding-left: 2px;
padding-right: 2px;
font-size: 8px;
}
.admin-page {
padding-left: 8px;
padding-right: 8px;
}
.admin-add-user,
.admin-card-body,
.admin-import-box {
padding-left: 12px;
padding-right: 12px;
}
}
/* ==========================================================
JAVNI KATALOG – IZBOR JEZIKA
========================================================== */
.public-language-switcher {
display: flex;
align-items: center;
gap: 6px;
margin-left: 14px;
flex-shrink: 0;
}
.public-language-button {
width: 30px;
height: 22px;
padding: 0;
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
cursor: pointer;
overflow: hidden;
opacity: .62;
transition: opacity .15s ease, transform .15s ease, border-color .15s ease;
}
.public-language-button img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.public-language-button:hover,
.public-language-button.active {
opacity: 1;
}
.public-language-button.active {
border-color: rgba(0,0,0,.28);
transform: translateY(-1px);
}
@media (max-width: 767px) {
.public-language-switcher {
margin-left: 0;
justify-content: center;
gap: 5px;
}
.public-language-button {
width: 29px;
height: 21px;
}
}
/* ==========================================================
JAVNI KATALOG – STABILNO ZAGLAVLJE SA DUŽIM PREVODIMA
----------------------------------------------------------
Samo desktop/tablet iznad 900px. Mobilni blokovi ispod
ostaju nepromenjeni.
========================================================== */
@media (min-width: 901px) {
.header-inner {
gap: 16px;
}
.header-brand {
min-width: 0;
flex: 1 1 auto;
}
.header-brand-text {
min-width: 0;
}
.main-navigation {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
white-space: nowrap;
flex: 0 0 auto;
gap: 0;
}
.main-navigation a {
flex: 0 0 auto;
white-space: nowrap;
}
.nav-librarians {
flex: 0 0 auto;
white-space: nowrap;
margin-left: 8px;
}
.public-language-switcher {
flex: 0 0 auto;
margin-left: 8px;
}
}
/* =========================================================
BIBLIOBOS – STATUS FONDA, REVIZIJA, ONLINE I ZAVIČAJNA
========================================================= */
.catalog-search-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 18px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(0, 77, 0, .12);
}
.catalog-search-filters label {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 600;
cursor: pointer;
}
.catalog-search-filters input[type="checkbox"] {
width: 17px;
height: 17px;
}
.record-online-block,
.record-heritage-block {
display: flex;
align-items: center;
gap: 16px;
margin-top: 22px;
padding: 18px 20px;
border-radius: 12px;
border: 1px solid rgba(0, 77, 0, .16);
background: rgba(0, 77, 0, .045);
}
.record-online-icon {
font-size: 2rem;
flex: 0 0 auto;
}
.record-online-content {
min-width: 0;
}
.record-online-content strong,
.record-heritage-block strong {
display: block;
font-size: 1rem;
}
.record-online-content p,
.record-heritage-block p {
margin: 4px 0 10px;
}
.record-online-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 8px 14px;
border-radius: 8px;
text-decoration: none;
font-weight: 700;
}
.record-heritage-block {
align-items: flex-start;
}
.record-heritage-block > span {
font-size: 1.6rem;
}
.record-note {
white-space: pre-line;
}
.copies-header,
.copies-row {
grid-template-columns: minmax(100px, 1fr) minmax(150px, 1.4fr) minmax(180px, 1.5fr) minmax(140px, 1.2fr);
}
.copy-usage-loan {
font-weight: 700;
}
.copy-usage-reading {
font-weight: 700;
}
.copy-heritage {
font-weight: 700;
}
.admin-inventory-list {
min-width: 150px;
font-size: .9rem;
line-height: 1.45;
}
.admin-search-title-col {
min-width: 220px;
}
.inventory-status-select.inventory-status-active {
border-color: #2e7d32;
color: #176b1c;
font-weight: 700;
}
.inventory-status-select.inventory-status-retired {
border-color: #c62828;
color: #b71c1c;
font-weight: 700;
}
.inventory-heritage {
min-width: 125px;
}
.inventory-check-label {
display: inline-flex !important;
align-items: center;
gap: 6px;
cursor: pointer;
font-weight: 600;
}
.inventory-check-label input[type="checkbox"] {
width: 17px;
height: 17px;
}
/* =========================================================
BIBLIOBOS – PRIMERCI, REŽIM KORIŠĆENJA I ZAVIČAJNA ZBIRKA
========================================================= */
.copies-header,
.copies-row {
grid-template-columns: 1.1fr 1.2fr 1.8fr 1.4fr;
}
.copy-usage {
min-width: 0;
}
.copy-free-loan {
color: #287a36;
font-weight: 600;
}
.copy-reading-room {
color: #9a7412;
font-weight: 600;
}
.copy-heritage {
font-weight: 600;
}
.inventory-heritage-check {
display: flex;
align-items: center;
}
.inventory-heritage-check label {
display: flex;
align-items: center;
gap: 7px;
cursor: pointer;
}
.inventory-heritage-check input[type="checkbox"] {
width: auto;
}
.catalog-search-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(0,0,0,.08);
}
.catalog-search-filters > span {
font-weight: 700;
}
.catalog-search-filters label {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.catalog-search-filters input[type="checkbox"] {
width: auto;
}
.record-online-block {
display: flex;
gap: 14px;
align-items: flex-start;
margin: 20px 0;
padding: 18px;
border-radius: 12px;
background: rgba(0, 77, 0, .06);
border: 1px solid rgba(0, 77, 0, .16);
}
.record-online-block > span {
font-size: 28px;
}
.record-online-block p {
margin: 5px 0 12px;
}
.record-heritage-block {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 16px 0;
padding: 15px;
border-radius: 12px;
background: rgba(150, 110, 20, .07);
border: 1px solid rgba(150, 110, 20, .18);
}
@media (max-width: 767px) {
.copies-header,
.copies-row {
grid-template-columns: 1fr;
gap: 7px;
}
.copies-header {
display: none;
}
.copies-row {
padding: 12px;
}
.catalog-search-filters {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.record-online-block {
padding: 14px;
}
}
.loading-book {
display: block;
width: 90px;
height: auto;
margin: 12px auto 0;
object-fit: contain;
}
/* BiblioBos: поправке табела претраге и ревизије */
.admin-table th, .admin-table td {
vertical-align: middle;
}
.admin-table th:nth-child(4), .admin-table td:nth-child(4) {
min-width: 150px;
width: 17%;
overflow-wrap: anywhere;
}
.admin-table th:last-child, .admin-table td:last-child {
min-width: 105px;
width: 110px;
white-space: nowrap;
}
.admin-table-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 76px;
white-space: nowrap;
}
/* BIBLIOBOS – tabelarni raspored za desktop i mobilne uređaje */
.admin-table-wrap {
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admin-table {
width: 100%;
table-layout: auto;
border-collapse: separate;
border-spacing: 0;
}
.admin-table th, .admin-table td {
word-break: normal;
overflow-wrap: normal;
hyphens: none;
vertical-align: middle;
}
.admin-table th {
white-space: normal;
min-width: 95px;
line-height: 1.35;
text-align: left;
}
.admin-table td {
white-space: normal;
min-width: 80px;
}
.admin-table td:last-child {
min-width: 110px;
}
.admin-table tbody tr:nth-child(even) {
background: #f7faf8;
}
.admin-table tbody tr:hover {
background: #edf5ef;
}
.admin-table-action {
white-space: nowrap;
}
@media (max-width: 767px) {
.admin-table-wrap {
overflow-x: auto;
}
.admin-table {
width: max-content;
min-width: 100%;
}
.admin-table th, .admin-table td {
padding: 10px 12px;
font-size: 13px;
}
.admin-table th {
min-width: 110px;
}
.admin-table td {
min-width: 100px;
}
}
/* =========================================================
BIBLIOBOS – ISBD prikaz osnovnih podataka (COBISS stil)
Ograničeno isključivo na karticu „Osnovni podaci“.
========================================================= */
#tab-basic .basic-record {
padding: 28px 36px;
}
#tab-basic .catalog-slip {
padding: 22px 20px;
background: #f1f5f9;
border: 0;
border-radius: 8px;
box-shadow: none;
color: #42536d;
font-family: "Segoe UI", Arial, sans-serif;
font-size: 15px;
line-height: 1.7;
}
#tab-basic .catalog-slip-author {
margin: 0 0 2px;
color: #172033;
font-size: 15px;
font-weight: 600;
}
#tab-basic .catalog-slip-description {
margin: 0;
padding-left: 18px;
white-space: pre-line;
overflow-wrap: anywhere;
}
#tab-basic .catalog-slip-udk {
margin: 24px 0 0;
padding-left: 0;
color: #42536d;
font-size: 14px;
font-weight: 500;
}
#tab-basic .catalog-note {
margin-top: 22px;
padding: 14px 18px;
border-left: 3px solid #9aaac0;
background: #f8fafc;
color: #42536d;
font-size: 14px;
line-height: 1.65;
white-space: pre-line;
}
@media (max-width: 700px) {
#tab-basic .basic-record {
padding: 18px 14px;
}
#tab-basic .catalog-slip {
padding: 18px 15px;
font-size: 14px;
line-height: 1.65;
}
#tab-basic .catalog-slip-description {
padding-left: 12px;
}
#tab-basic .catalog-slip-udk {
margin-top: 18px;
}
#tab-basic .catalog-note {
padding: 12px 14px;
}
}
/* Dugme za povratak na vrh – izgled knjige */
.back-to-top {
position: fixed;
right: 25px;
bottom: 25px;
z-index: 9999;
width: 54px;
height: 54px;
border: none;
border-radius: 50%;
background: #1e3a5f;
color: #ffffff;
font-size: 27px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
/* Dugme se prikazuje nakon skrolovanja */
.back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Efekat pri prelasku mišem */
.back-to-top:hover {
background: #2d5b8a;
transform: translateY(-4px);
}
/* Prilagođavanje za telefone */
@media (max-width: 768px) {
.back-to-top {
right: 16px;
bottom: 18px;
width: 48px;
height: 48px;
font-size: 24px;
}
}
/* =====================================================
ADMIN — ОСНОВНЕ ЦЕЛИНЕ
===================================================== */
.admin-page {
display: flex;
flex-direction: column;
gap: 30px;
}
/* Свака административна целина */
.admin-section {
position: relative;
padding: 26px;
background: #f8faf8;
border: 1px solid #d7e3d7;
border-radius: 18px;
box-shadow: 0 5px 18px rgba(0, 60, 0, 0.06);
}
/* Наслов и опис целине */
.admin-section-header {
margin-bottom: 22px;
padding: 0 0 17px;
border-bottom: 2px solid #dce8dc;
}
.admin-section-header h2 {
margin: 0 0 8px;
color: #174d24;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: 0.03em;
}
.admin-section-header p {
margin: 0;
color: #607064;
font-size: 0.95rem;
line-height: 1.5;
}
/* Распоред картица унутар целине */
.admin-section .admin-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
/* =====================================================
DUPLIKATI — IZBOR BROJA REZULTATA I PAGINACIJA
===================================================== */
.duplicate-page-options {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin: 20px 0;
padding: 15px 18px;
background: #f8fafc;
border: 1px solid #dbe3ec;
border-radius: 10px;
}
.duplicate-page-options label {
margin: 0;
color: #334155;
font-size: 14px;
font-weight: 600;
}
.duplicate-page-options select {
min-width: 90px;
height: 40px;
padding: 0 12px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #172033;
font: inherit;
}
.duplicate-pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin: 26px 0;
}
.duplicate-pagination span {
color: #475569;
font-size: 14px;
font-weight: 600;
}
@media (max-width: 600px) {
.duplicate-page-options {
align-items: stretch;
flex-direction: column;
}
.duplicate-page-options select {
width: 100%;
}
.duplicate-pagination {
gap: 8px;
}
}
/* =========================================================
BIBLIO BOSS+
REVIZIJA FONDA
========================================================= */
.admin-revision-page {
max-width: 1280px;
margin: 0 auto;
padding-bottom: 50px;
}
/* ---------------------------------------------------------
NASLOV
--------------------------------------------------------- */
.admin-revision-page .revision-page-header {
margin-bottom: 28px;
}
.admin-revision-page .revision-page-header p {
margin-top: 8px;
color: #64748b;
}
/* ---------------------------------------------------------
GLAVNI PANEL
--------------------------------------------------------- */
.revision-dashboard {
padding: 28px;
background: #ffffff;
border: 1px solid #dfe6ee;
border-radius: 16px;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
}
/* ---------------------------------------------------------
NASLOV SEKCIJE
--------------------------------------------------------- */
.revision-page-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding-bottom: 24px;
border-bottom: 1px solid #e8edf3;
}
.revision-kicker {
display: block;
margin-bottom: 7px;
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.revision-page-title h2 {
margin: 0;
color: #172033;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.3px;
}
.revision-page-title p {
margin: 8px 0 0;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
/* ---------------------------------------------------------
NOVA REVIZIJA
--------------------------------------------------------- */
.revision-new-button {
display: flex;
align-items: center;
gap: 13px;
min-width: 265px;
padding: 13px 17px;
border: 1px solid #173765;
border-radius: 10px;
background: #173765;
color: #ffffff;
text-decoration: none;
box-shadow: 0 5px 15px rgba(23, 55, 101, 0.16);
transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.revision-new-button:hover {
color: #ffffff;
background: #214b80;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(23, 55, 101, 0.22);
text-decoration: none;
}
.revision-new-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 8px;
background: rgba(255, 255, 255, .13);
font-size: 23px;
font-weight: 300;
}
.revision-new-button strong {
display: block;
font-size: 11px;
letter-spacing: .3px;
}
.revision-new-button small {
display: block;
margin-top: 3px;
color: rgba(255, 255, 255, .68);
font-size: 10px;
}
/* ---------------------------------------------------------
BROJ REVIZIJA
--------------------------------------------------------- */
.revision-list-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 25px 0 12px;
}
.revision-list-header div {
display: flex;
align-items: center;
gap: 9px;
}
.revision-list-header span {
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
}
.revision-list-header strong {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 27px;
height: 27px;
padding: 0 8px;
border-radius: 7px;
background: #eef3f8;
color: #173765;
font-size: 12px;
}
/* ---------------------------------------------------------
TABELA
--------------------------------------------------------- */
.revision-table-wrap {
width: 100%;
overflow-x: auto;
border: 1px solid #dfe6ee;
border-radius: 12px;
background: #ffffff;
-webkit-overflow-scrolling: touch;
}
.revision-table {
width: 100%;
min-width: 980px;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.revision-table th {
padding: 12px 14px;
background: #f3f6f9;
border-bottom: 1px solid #dfe6ee;
color: #52657d;
font-size: 10px;
font-weight: 800;
letter-spacing: .5px;
text-align: left;
}
.revision-table td {
padding: 15px 14px;
border-bottom: 1px solid #edf1f5;
color: #334155;
font-size: 13px;
vertical-align: middle;
}
.revision-table tbody tr:last-child td {
border-bottom: 0;
}
.revision-table tbody tr {
transition: background .15s ease;
}
.revision-table tbody tr:hover {
background: #f8fafc;
}
/* KOLONE */
.revision-table th:nth-child(1),
.revision-table td:nth-child(1) {
width: 27%;
}
.revision-table th:nth-child(2),
.revision-table td:nth-child(2) {
width: 14%;
}
.revision-table th:nth-child(3),
.revision-table td:nth-child(3) {
width: 17%;
}
.revision-table th:nth-child(4),
.revision-table td:nth-child(4) {
width: 12%;
}
.revision-table th:nth-child(5),
.revision-table td:nth-child(5) {
width: 30%;
}
/* ---------------------------------------------------------
NAZIV
--------------------------------------------------------- */
.revision-name {
display: flex;
align-items: center;
gap: 11px;
}
.revision-name-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 9px;
background: #f0f4f8;
font-size: 17px;
}
.revision-name strong {
display: block;
color: #172033;
font-size: 13px;
line-height: 1.4;
}
.revision-name small {
display: block;
margin-top: 3px;
color: #8a97a8;
font-size: 10px;
}
/* ---------------------------------------------------------
LOKACIJA I PERIOD
--------------------------------------------------------- */
.revision-location {
color: #475569;
font-weight: 600;
}
.revision-period {
display: inline-flex;
align-items: center;
gap: 6px;
color: #475569;
white-space: nowrap;
}
.revision-period span {
color: #94a3b8;
}
/* ---------------------------------------------------------
STATUS
--------------------------------------------------------- */
.revision-status {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 10px;
border-radius: 20px;
font-size: 10px;
font-weight: 800;
white-space: nowrap;
}
.revision-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
}
.revision-status-active {
background: #fff6db;
color: #87630b;
}
.revision-status-active .revision-status-dot {
background: #d6a91b;
}
.revision-status-finished {
background: #e8f5ec;
color: #26703c;
}
.revision-status-finished .revision-status-dot {
background: #3b9656;
}
/* ---------------------------------------------------------
DUGMAD
--------------------------------------------------------- */
.revision-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.revision-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 32px;
padding: 0 9px;
border: 1px solid #d3dce6;
border-radius: 7px;
background: #ffffff;
color: #40546d;
text-decoration: none;
font-size: 9px;
font-weight: 800;
letter-spacing: .2px;
white-space: nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.revision-action:hover {
background: #f1f5f9;
border-color: #aebdcd;
color: #173765;
text-decoration: none;
transform: translateY(-1px);
}
.revision-action-main {
background: #173765;
border-color: #173765;
color: #ffffff;
}
.revision-action-main:hover {
background: #214b80;
border-color: #214b80;
color: #ffffff;
}
/* ---------------------------------------------------------
NEMA REVIZIJA
--------------------------------------------------------- */
.revision-empty {
margin-top: 25px;
padding: 55px 25px;
border: 1px dashed #ccd6e1;
border-radius: 12px;
background: #f8fafc;
text-align: center;
}
.revision-empty-icon {
margin-bottom: 14px;
font-size: 34px;
}
.revision-empty strong {
display: block;
color: #334155;
font-size: 15px;
}
.revision-empty p {
margin: 7px 0 20px;
color: #7b8798;
font-size: 12px;
}
.revision-empty-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 16px;
border-radius: 8px;
background: #173765;
color: #ffffff;
text-decoration: none;
font-size: 10px;
font-weight: 800;
}
.revision-empty-button:hover {
background: #214b80;
color: #ffffff;
text-decoration: none;
}
/* ---------------------------------------------------------
MOBILNI
--------------------------------------------------------- */
@media (max-width: 900px) {
.revision-page-title {
align-items: stretch;
flex-direction: column;
}
.revision-new-button {
width: 100%;
box-sizing: border-box;
}
.revision-table {
min-width: 900px;
}
}
@media (max-width: 600px) {
.revision-dashboard {
padding: 18px;
border-radius: 12px;
}
.revision-page-title h2 {
font-size: 21px;
}
.revision-page-title p {
font-size: 12px;
}
.revision-new-button {
min-width: 0;
}
.revision-table {
min-width: 880px;
}
.revision-table th,
.revision-table td {
padding: 11px 10px;
}
}
/* ============================================================
REVIZIJA — LISTE 1–4 I ZAPISNIK
Jedinstven vizuelni sistem za stranice revizije.
============================================================ */
.revision-list-page,
.revision-record-page {
max-width: 1480px;
margin: 0 auto;
padding: 28px 22px 50px;
}
.revision-hero {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 26px 28px;
margin-bottom: 22px;
border: 1px solid #dce7df;
border-radius: 18px;
background: linear-gradient(135deg, #ffffff 0%, #f4f9f5 100%);
box-shadow: 0 8px 28px rgba(0, 55, 30, .07);
}
.revision-hero-main {
min-width: 0;
}
.revision-page-number {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 11px;
border-radius: 999px;
background: #e5f1e8;
color: #17623a;
font-size: .76rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.revision-hero h1 {
margin: 8px 0 6px;
color: #123c29;
font-size: clamp(1.55rem, 3vw, 2.25rem);
line-height: 1.15;
}
.revision-hero-description {
max-width: 900px;
margin: 0;
color: #5f6e66;
line-height: 1.55;
}
.revision-meta {
display: flex;
flex-wrap: wrap;
gap: 9px 12px;
margin-top: 17px;
}
.revision-meta-item {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border: 1px solid #dbe6df;
border-radius: 10px;
background: #fff;
color: #31463b;
font-size: .9rem;
}
.revision-meta-item strong {
color: #123c29;
}
.revision-back {
flex: 0 0 auto;
white-space: nowrap;
}
.revision-alert {
margin: 0 0 18px;
padding: 13px 16px;
border: 1px solid #b8d7c2;
border-radius: 12px;
background: #edf8f0;
color: #205c36;
}
.revision-card {
margin-bottom: 20px;
padding: 24px;
border: 1px solid #dfe7e2;
border-radius: 16px;
background: #fff;
box-shadow: 0 5px 20px rgba(20, 55, 38, .055);
}
.revision-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.revision-card-title {
margin: 0;
color: #173d2b;
font-size: 1.18rem;
font-weight: 800;
}
.revision-card-subtitle {
margin: 5px 0 0;
color: #718078;
font-size: .9rem;
}
.revision-form-grid {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(260px, 2fr);
gap: 18px;
align-items: end;
}
.revision-form-grid--wide {
grid-template-columns: minmax(220px, 1fr) minmax(300px, 2fr) auto;
}
.revision-field {
min-width: 0;
}
.revision-field label {
display: block;
margin-bottom: 7px;
color: #2b4036;
font-size: .84rem;
font-weight: 750;
}
.revision-field .form-control,
.revision-search-box .form-control {
width: 100%;
min-height: 44px;
border: 1px solid #ccd9d1;
border-radius: 10px;
background: #fff;
color: #24352d;
transition: border-color .18s ease, box-shadow .18s ease;
}
.revision-field textarea.form-control {
min-height: 86px;
resize: vertical;
}
.revision-field .form-control:focus,
.revision-search-box .form-control:focus {
border-color: #2b7b50;
box-shadow: 0 0 0 3px rgba(43, 123, 80, .12);
}
.revision-form-actions {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
}
.revision-search-box {
display: grid;
grid-template-columns: minmax(260px, 1fr) auto auto;
gap: 10px;
align-items: end;
padding: 14px;
margin-bottom: 18px;
border: 1px solid #e1e8e3;
border-radius: 12px;
background: #f7faf8;
}
.revision-search-box .revision-field {
margin: 0;
}
.revision-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 15px;
}
.revision-toolbar-left {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.revision-count {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 6px 11px;
border-radius: 999px;
background: #edf4ef;
color: #255b3c;
font-size: .82rem;
font-weight: 800;
}
.revision-table-card {
overflow: hidden;
border: 1px solid #dfe7e2;
border-radius: 14px;
background: #fff;
}
.revision-table-scroll {
width: 100%;
overflow-x: auto;
}
.revision-data-table {
width: 100%;
min-width: 1120px;
border-collapse: separate;
border-spacing: 0;
}
.revision-data-table th {
padding: 12px 11px;
border-bottom: 1px solid #cddbd2;
background: #edf5ef;
color: #28483a;
font-size: .74rem;
font-weight: 850;
letter-spacing: .035em;
text-align: left;
white-space: nowrap;
}
.revision-data-table td {
padding: 12px 11px;
border-bottom: 1px solid #edf1ee;
color: #35463e;
font-size: .88rem;
vertical-align: middle;
}
.revision-data-table tbody tr:last-child td {
border-bottom: 0;
}
.revision-data-table tbody tr:hover {
background: #f8fbf9;
}
.revision-data-table .col-check {
width: 52px;
text-align: center;
}
.revision-data-table .col-no {
width: 58px;
text-align: center;
color: #718078;
}
.revision-data-table .col-inventory {
width: 125px;
}
.revision-data-table .col-signature {
width: 120px;
}
.revision-data-table .col-title {
min-width: 220px;
}
.revision-data-table .col-author {
min-width: 165px;
}
.revision-data-table .col-publisher {
min-width: 150px;
}
.revision-data-table .col-year {
width: 78px;
text-align: center;
}
.revision-data-table .col-status {
width: 120px;
}
.revision-data-table .col-action {
width: 145px;
}
.revision-inventory {
color: #164f31;
font-weight: 850;
letter-spacing: .01em;
}
.revision-muted {
color: #89958f;
}
.revision-status {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 9px;
border-radius: 999px;
font-size: .72rem;
font-weight: 850;
white-space: nowrap;
}
.revision-status--in {
background: #e7f5eb;
color: #21703e;
}
.revision-status--out {
background: #fdebec;
color: #9d2c32;
}
.revision-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.revision-check {
width: 17px;
height: 17px;
accent-color: #267548;
cursor: pointer;
}
.revision-action-button {
border: 0;
border-radius: 8px;
padding: 7px 10px;
background: #fff0f0;
color: #a22d32;
font-size: .78rem;
font-weight: 800;
cursor: pointer;
}
.revision-action-button:hover {
background: #fbdede;
}
.revision-bulk-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
padding: 13px 15px;
margin-bottom: 14px;
border: 1px solid #f0d4d4;
border-radius: 12px;
background: #fff8f8;
}
.revision-bulk-help {
margin: 0;
color: #765d5d;
font-size: .85rem;
}
.revision-empty {
padding: 42px 20px;
text-align: center;
color: #75817b;
}
.revision-empty-icon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
margin: 0 auto 12px;
border-radius: 14px;
background: #edf5ef;
color: #267548;
font-size: 1.5rem;
}
.revision-record-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.revision-record-grid .revision-field--full {
grid-column: 1 / -1;
}
.revision-commission {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.revision-summary-box {
margin-top: 22px;
}
.revision-summary-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.revision-status-banner {
padding: 12px 15px;
border-radius: 11px;
font-weight: 750;
}
.revision-status-banner--finished {
border: 1px solid #b9dbc4;
background: #edf8f0;
color: #23663b;
}
.revision-stat-grid {
display: grid;
grid-template-columns: repeat(6, minmax(110px, 1fr));
gap: 10px;
margin: 18px 0 24px;
}
.revision-stat {
min-height: 92px;
padding: 15px;
border: 1px solid #dce6df;
border-radius: 12px;
background: #f8fbf9;
}
.revision-stat span {
display: block;
min-height: 34px;
color: #68776f;
font-size: .73rem;
line-height: 1.35;
}
.revision-stat strong {
display: block;
margin-top: 7px;
color: #174d31;
font-size: 1.55rem;
}
.revision-list-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.revision-list-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 17px;
border: 1px solid #d9e5dc;
border-radius: 12px;
background: #fff;
color: #1f5738;
text-decoration: none;
font-weight: 800;
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.revision-list-link:hover {
border-color: #7eb091;
box-shadow: 0 5px 16px rgba(28, 91, 54, .08);
transform: translateY(-1px);
color: #16482e;
}
.revision-list-link small {
color: #6c7b73;
font-weight: 650;
}
.revision-page-actions {
display: flex;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
margin-top: 18px;
}
@media (max-width: 1050px) {
.revision-stat-grid {
grid-template-columns: repeat(3, minmax(110px, 1fr));
}
.revision-form-grid,
.revision-form-grid--wide {
grid-template-columns: 1fr;
}
}
@media (max-width: 800px) {
.revision-list-page,
.revision-record-page {
padding: 18px 12px 35px;
}
.revision-hero {
flex-direction: column;
padding: 20px;
}
.revision-back {
width: 100%;
}
.revision-back .btn {
width: 100%;
}
.revision-card {
padding: 18px;
}
.revision-search-box {
grid-template-columns: 1fr;
}
.revision-record-grid,
.revision-list-links {
grid-template-columns: 1fr;
}
.revision-commission {
grid-template-columns: 1fr;
}
.revision-stat-grid {
grid-template-columns: repeat(2, minmax(110px, 1fr));
}
}
@media (max-width: 520px) {
.revision-hero h1 {
font-size: 1.45rem;
}
.revision-meta {
flex-direction: column;
}
.revision-meta-item {
width: 100%;
}
.revision-stat-grid {
grid-template-columns: 1fr 1fr;
}
.revision-form-actions .btn,
.revision-toolbar-left .btn {
width: 100%;
}
.revision-toolbar-left {
width: 100%;
}
}
/* =========================================================
BIBLIOBOS – RASHODOVANO
========================================================= */
.rashod-page {
width: 100%;
}
.rashod-header {
align-items: flex-start;
gap: 28px;
}
.rashod-header > div:first-child {
min-width: 0;
}
.rashod-header-actions {
display: flex;
align-items: stretch;
gap: 12px;
flex-shrink: 0;
}
.rashod-total-card {
min-width: 145px;
padding: 14px 18px;
display: flex;
flex-direction: column;
justify-content: center;
background: #fff7f7;
border: 1px solid #fecaca;
border-radius: 12px;
}
.rashod-total-card span {
color: #991b1b;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
}
.rashod-total-card strong {
margin-top: 2px;
color: #991b1b;
font-size: 27px;
line-height: 1;
}
.rashod-total-card small {
margin-top: 4px;
color: #7f1d1d;
font-size: 10px;
}
.rashod-excel-button {
min-width: 205px;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 11px;
text-decoration: none;
color: #166534;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 12px;
transition: .18s ease;
}
.rashod-excel-button:hover {
color: #14532d;
background: #dcfce7;
border-color: #86efac;
transform: translateY(-1px);
}
.rashod-excel-icon {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
border-radius: 9px;
background: #16a34a;
color: white;
font-size: 19px;
font-weight: 800;
}
.rashod-excel-button strong {
display: block;
font-size: 12px;
letter-spacing: .4px;
}
.rashod-excel-button small {
display: block;
margin-top: 3px;
color: #64748b;
font-size: 10px;
}
.rashod-filter-card,
.rashod-table-card {
margin-bottom: 20px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
box-shadow: 0 5px 20px rgba(15, 23, 42, .045);
}
.rashod-filter-card {
padding: 22px;
}
.rashod-section-heading,
.rashod-table-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.rashod-section-heading {
margin-bottom: 19px;
}
.rashod-kicker {
display: block;
color: #64748b;
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
}
.rashod-section-heading h2,
.rashod-table-heading h2 {
margin: 4px 0 0;
color: #172033;
font-size: 19px;
font-weight: 750;
}
.rashod-result-count {
padding: 7px 11px;
color: #334155;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 12px;
font-weight: 800;
}
.rashod-result-count span {
margin-left: 3px;
color: #94a3b8;
font-weight: 600;
}
.rashod-filter-form {
display: grid;
grid-template-columns: minmax(260px, 1.7fr) minmax(190px, 1fr) 145px 145px auto;
gap: 13px;
align-items: end;
}
.rashod-field {
min-width: 0;
}
.rashod-field label {
display: block;
margin-bottom: 6px;
color: #475569;
font-size: 11px;
font-weight: 750;
}
.rashod-field input,
.rashod-field select {
width: 100%;
height: 42px;
box-sizing: border-box;
padding: 0 11px;
color: #1e293b;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 8px;
font: inherit;
font-size: 13px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
}
.rashod-field input:focus,
.rashod-field select:focus {
border-color: #64748b;
box-shadow: 0 0 0 3px rgba(100, 116, 139, .1);
}
.rashod-filter-actions {
display: flex;
gap: 7px;
align-items: center;
}
.rashod-search-button,
.rashod-reset-button {
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 15px;
border-radius: 8px;
font-size: 11px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.rashod-search-button {
border: 1px solid #334155;
background: #334155;
color: #fff;
}
.rashod-search-button:hover {
background: #1e293b;
border-color: #1e293b;
}
.rashod-reset-button {
border: 1px solid #cbd5e1;
background: #fff;
color: #475569;
}
.rashod-reset-button:hover {
background: #f8fafc;
color: #172033;
}
.rashod-table-card {
overflow: hidden;
}
.rashod-table-heading {
padding: 18px 20px;
border-bottom: 1px solid #e2e8f0;
}
.rashod-table-excel {
padding: 8px 12px;
color: #166534;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 7px;
font-size: 10px;
font-weight: 850;
letter-spacing: .5px;
text-decoration: none;
}
.rashod-table-excel:hover {
background: #dcfce7;
color: #14532d;
}
.rashod-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rashod-table {
width: 100%;
min-width: 1250px;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
.rashod-table th {
padding: 12px 11px;
color: #64748b;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
font-size: 9px;
font-weight: 850;
letter-spacing: .65px;
text-align: left;
white-space: nowrap;
}
.rashod-table td {
padding: 12px 11px;
color: #334155;
border-bottom: 1px solid #edf2f7;
vertical-align: middle;
font-size: 12px;
}
.rashod-table tbody tr:nth-child(even) {
background: #fcfdfd;
}
.rashod-table tbody tr:hover {
background: #f7faf9;
}
.rashod-table th:nth-child(1), .rashod-table td:nth-child(1) {
width: 105px;
}
.rashod-table th:nth-child(2), .rashod-table td:nth-child(2) {
width: 115px;
}
.rashod-table th:nth-child(3), .rashod-table td:nth-child(3) {
width: 245px;
}
.rashod-table th:nth-child(4), .rashod-table td:nth-child(4) {
width: 190px;
}
.rashod-table th:nth-child(5), .rashod-table td:nth-child(5) {
width: 145px;
}
.rashod-table th:nth-child(6), .rashod-table td:nth-child(6) {
width: 135px;
}
.rashod-table th:nth-child(7), .rashod-table td:nth-child(7) {
width: 160px;
}
.rashod-table th:nth-child(8), .rashod-table td:nth-child(8) {
width: 170px;
}
.rashod-table th:nth-child(9), .rashod-table td:nth-child(9) {
width: 100px;
}
.rashod-table th:nth-child(10), .rashod-table td:nth-child(10) {
width: 85px;
}
.rashod-inventory-number {
display: inline-block;
padding: 5px 7px;
color: #172033;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-weight: 800;
font-size: 11px;
}
.rashod-udk {
color: #64748b;
font-family: "Consolas", monospace;
font-size: 11px;
}
.rashod-title strong {
display: block;
color: #1e293b;
font-weight: 700;
line-height: 1.35;
}
.rashod-author,
.rashod-location,
.rashod-reason {
color: #475569;
line-height: 1.35;
}
.rashod-badge {
display: inline-flex;
align-items: center;
min-height: 25px;
padding: 0 8px;
border-radius: 999px;
font-size: 9px;
font-weight: 850;
letter-spacing: .35px;
white-space: nowrap;
}
.rashod-badge-revision {
color: #854d0e;
background: #fef9c3;
border: 1px solid #fde68a;
}
.rashod-badge-extra {
color: #475569;
background: #f1f5f9;
border: 1px solid #e2e8f0;
}
.rashod-revision-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.rashod-revision-info strong {
color: #334155;
font-size: 11px;
}
.rashod-revision-info small {
color: #94a3b8;
font-size: 10px;
}
.rashod-date {
color: #475569;
white-space: nowrap;
}
.rashod-dash {
color: #cbd5e1;
}
.rashod-return-form {
margin: 0;
}
.rashod-return-button {
min-width: 64px;
height: 31px;
padding: 0 10px;
border: 1px solid #bbf7d0;
border-radius: 7px;
background: #f0fdf4;
color: #166534;
font-size: 9px;
font-weight: 850;
cursor: pointer;
}
.rashod-return-button:hover {
background: #dcfce7;
border-color: #86efac;
}
.rashod-empty {
min-height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
}
.rashod-empty-icon {
width: 42px;
height: 42px;
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #64748b;
background: #f1f5f9;
font-size: 18px;
font-weight: 800;
}
.rashod-empty strong {
color: #334155;
font-size: 14px;
}
.rashod-empty span {
color: #94a3b8;
font-size: 12px;
}
.rashod-bottom-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 20px;
}
.rashod-excel-button-bottom {
min-width: 215px;
}
@media (max-width: 1100px) {
.rashod-header {
flex-direction: column;
}
.rashod-header-actions {
width: 100%;
}
.rashod-filter-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rashod-field-search {
grid-column: 1 / -1;
}
.rashod-filter-actions {
grid-column: 1 / -1;
}
}
@media (max-width: 650px) {
.rashod-header-actions {
flex-direction: column;
}
.rashod-total-card,
.rashod-excel-button {
width: 100%;
box-sizing: border-box;
}
.rashod-filter-card {
padding: 16px;
}
.rashod-filter-form {
grid-template-columns: 1fr;
}
.rashod-field-search,
.rashod-filter-actions {
grid-column: auto;
}
.rashod-filter-actions {
flex-direction: column;
}
.rashod-search-button,
.rashod-reset-button {
width: 100%;
}
.rashod-section-heading,
.rashod-table-heading {
align-items: flex-start;
flex-direction: column;
}
.rashod-bottom-actions {
align-items: stretch;
flex-direction: column;
}
.rashod-excel-button-bottom {
width: 100%;
}
}
/* Aktivna pretraga zauzima širinu sva tri panela samo na desktopu */
@media (min-width: 901px) {
.catalog-search-grid > .catalog-search-panel.active-search {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
width: 100%;
min-width: 0;
}
.catalog-search-grid > .search-results {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
width: 100%;
}
}
/* AKTIVNA PRETRAGA - DESKTOP */
@media (min-width: 901px) {
.catalog-search-grid > .catalog-search-panel.active-search {
grid-column: 1 / -1 !important;
grid-row: 1 !important;
width: 100%;
min-width: 0;
}
}
/* =========================================================
BIBLIO BOSS+ — ГЛАВНИ МЕНИ / ПРЕТРАЖИ КАТАЛОГ
========================================================= */
.nav-dropdown {
position: relative;
display: inline-flex;
align-items: center;
}
.nav-dropdown-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 38px;
padding: 0 13px;
border: 0;
border-radius: 7px;
background: transparent;
color: #475569;
font-family: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s ease, color 0.15s ease;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus {
color: #172554;
background: #f1f5f9;
}
.nav-dropdown-arrow {
display: inline-block;
font-size: 12px;
line-height: 1;
transition: transform .18s ease;
}
.nav-dropdown.is-open .nav-dropdown-arrow {
transform: rotate(180deg);
}
.nav-dropdown-menu {
position: absolute;
top: calc(100% + 7px);
left: 50%;
z-index: 1000;
min-width: 190px;
padding: 7px;
transform: translate(-50%, -6px);
opacity: 0;
visibility: hidden;
pointer-events: none;
border: 1px solid #d7e3d7;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 14px 32px rgba(15, 23, 42, .14);
transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
.nav-dropdown-menu::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
width: 11px;
height: 11px;
transform: translateX(-50%) rotate(45deg);
border-left: 1px solid #d7e3d7;
border-top: 1px solid #d7e3d7;
background: #ffffff;
}
.nav-dropdown-menu a {
display: flex !important;
align-items: center;
justify-content: flex-start;
min-height: 40px;
margin: 0;
padding: 9px 13px !important;
border-radius: 8px;
color: #263626 !important;
text-decoration: none !important;
font-size: 12px !important;
font-weight: 750 !important;
letter-spacing: .2px;
white-space: nowrap;
}
.nav-dropdown-menu a::before {
content: "›";
margin-right: 9px;
color: #004d00;
font-size: 17px;
line-height: 1;
transition: transform .15s ease;
}
.nav-dropdown-menu a:hover {
background: #eef5ec !important;
color: #004d00 !important;
}
.nav-dropdown-menu a:hover::before {
transform: translateX(3px);
}
/* Мобилни мени */
@media (max-width: 800px) {
.nav-dropdown {
width: 100%;
display: block;
}
.nav-dropdown-toggle {
width: 100%;
min-height: 44px;
justify-content: space-between;
padding: 10px 14px;
}
.nav-dropdown-menu {
position: static;
width: 100%;
min-width: 0;
margin: 0;
padding: 5px;
transform: none;
border-radius: 9px;
box-shadow: none;
background: #f7faf6;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
transform: none;
}
.nav-dropdown-menu::before {
display: none;
}
.nav-dropdown-menu a {
min-height: 42px;
padding: 10px 13px !important;
}
.nav-dropdown:not(.is-open) .nav-dropdown-menu {
display: none;
}
.nav-dropdown.is-open .nav-dropdown-menu {
display: block;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
/* На десктопу дугме прати постојећу навигацију */
@media (min-width: 801px) {
.main-navigation .nav-dropdown-toggle {
color: #475569;
}
.main-navigation .nav-dropdown-toggle:hover,
.main-navigation .nav-dropdown-toggle:focus {
color: #172554;
background: #f1f5f9;
}
}
/* =========================================================
АДМИН – ПЕРИОДИКА
========================================================= */
/* ---------------------------------------------------------
ДУГМЕ: + НОВА ПЕРИОДИКА
--------------------------------------------------------- */
.admin-new-periodika-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 16px;
border: 1px solid #d7dee8;
border-radius: 8px;
background: #ffffff;
color: #172f63;
font-family: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.admin-new-periodika-button:hover {
background: #f1f5f9;
border-color: #b8c4d4;
color: #172f63;
text-decoration: none;
transform: translateY(-1px);
}
/* ---------------------------------------------------------
СТРАНИЦА НОВА ПЕРИОДИКА
--------------------------------------------------------- */
.nova-periodika-page {
width: 100%;
}
.nova-periodika-page .admin-add-user {
width: 100%;
box-sizing: border-box;
}
/* ---------------------------------------------------------
BIBLIO.BOSS-ID
--------------------------------------------------------- */
.nova-periodika-page .biblio-boss-id-info {
margin: 0 0 28px;
}
/* ---------------------------------------------------------
СЕКЦИЈЕ
--------------------------------------------------------- */
.nova-periodika-page .nova-knjiga-section {
width: 100%;
}
.nova-periodika-page .nova-knjiga-section h2 {
margin: 0 0 8px;
color: #172033;
font-size: 16px;
font-weight: 750;
line-height: 1.3;
}
.nova-periodika-page .nova-knjiga-section > p {
margin: 0 0 20px;
color: #64748b;
font-size: 12px;
line-height: 1.5;
}
/* ---------------------------------------------------------
ОСНОВНА ПОЛЈА – GRID
--------------------------------------------------------- */
.nova-periodika-page .nova-knjiga-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 17px 14px;
width: 100%;
}
/* ---------------------------------------------------------
ПОЉА
--------------------------------------------------------- */
.nova-periodika-page .admin-form-group {
display: flex;
flex-direction: column;
gap: 7px;
width: 100%;
min-width: 0;
}
.nova-periodika-page .admin-form-group label {
color: #475569;
font-size: 11px;
font-weight: 700;
line-height: 1.3;
}
.nova-periodika-page .admin-form-group input,
.nova-periodika-page .admin-form-group select,
.nova-periodika-page .admin-form-group textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 13px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.nova-periodika-page .admin-form-group input,
.nova-periodika-page .admin-form-group select {
height: 42px;
padding: 0 12px;
}
.nova-periodika-page .admin-form-group textarea {
min-height: 90px;
padding: 10px 12px;
resize: vertical;
line-height: 1.45;
}
/* HOVER */
.nova-periodika-page .admin-form-group input:hover,
.nova-periodika-page .admin-form-group select:hover,
.nova-periodika-page .admin-form-group textarea:hover {
border-color: #94a3b8;
}
/* FOCUS */
.nova-periodika-page .admin-form-group input:focus,
.nova-periodika-page .admin-form-group select:focus,
.nova-periodika-page .admin-form-group textarea:focus {
border-color: #334e68;
box-shadow: 0 0 0 3px rgba(51, 78, 104, 0.10);
}
/* ---------------------------------------------------------
ШИРОКА И ПУНА ПОЉА
--------------------------------------------------------- */
.nova-periodika-page .nova-knjiga-field-wide {
grid-column: span 2;
}
.nova-periodika-page .nova-knjiga-field-full {
grid-column: 1 / -1;
}
/* ---------------------------------------------------------
ЛИНИЈЕ ИЗМЕЂУ СЕКЦИЈА
--------------------------------------------------------- */
.nova-periodika-page .nova-knjiga-divider {
margin: 34px 0;
border: 0;
border-top: 1px solid #e2e8f0;
}
/* =========================================================
НАПОМЕНЕ О ИСТОРИЈИ ПЕРИОДИКЕ
========================================================= */
.nova-periodika-page .napomena-row {
display: grid;
grid-template-columns: 1fr 1.2fr 2fr auto;
gap: 10px;
align-items: end;
margin-bottom: 12px;
padding: 14px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
}
.nova-periodika-page .napomena-row input {
width: 100%;
height: 40px;
box-sizing: border-box;
padding: 0 11px;
border: 1px solid #cbd5e1;
border-radius: 7px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 12px;
outline: none;
}
.nova-periodika-page .napomena-row input:focus {
border-color: #334e68;
box-shadow: 0 0 0 3px rgba(51, 78, 104, 0.10);
}
/* =========================================================
ФОНД ПЕРИОДИКЕ
========================================================= */
.nova-periodika-page .periodika-copy-row {
display: grid;
grid-template-columns: 0.8fr 0.8fr 0.8fr 0.8fr 1.2fr 1.25fr 1fr 1.55fr auto auto;
gap: 8px;
align-items: end;
margin-bottom: 12px;
padding: 14px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 10px;
}
.nova-periodika-page .periodika-copy-row > input,
.nova-periodika-page .periodika-copy-row > select {
width: 100%;
min-width: 0;
height: 40px;
box-sizing: border-box;
padding: 0 10px;
border: 1px solid #cbd5e1;
border-radius: 7px;
background: #ffffff;
color: #172033;
font-family: inherit;
font-size: 12px;
outline: none;
}
.nova-periodika-page .periodika-copy-row > input:focus,
.nova-periodika-page .periodika-copy-row > select:focus {
border-color: #334e68;
box-shadow: 0 0 0 3px rgba(51, 78, 104, 0.10);
}
/* ---------------------------------------------------------
ЗАВИЧАЈНА ЗБИРКА
--------------------------------------------------------- */
.nova-periodika-page .periodika-check {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 40px;
color: #475569;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.nova-periodika-page .periodika-check input {
width: 15px;
height: 15px;
margin: 0;
}
/* ---------------------------------------------------------
ДУГМЕ УКЛОНИ У РЕДОВИМА
--------------------------------------------------------- */
.nova-periodika-page .napomena-row .admin-danger-button,
.nova-periodika-page .periodika-copy-row .admin-danger-button {
height: 40px;
padding: 0 12px;
white-space: nowrap;
}
/* ---------------------------------------------------------
ДУГМЕ + ДОДАЈ
--------------------------------------------------------- */
.nova-periodika-page .admin-secondary-button {
min-height: 40px;
padding: 0 15px;
border: 1px solid #d7dee8;
border-radius: 8px;
background: #ffffff;
color: #334155;
font-family: inherit;
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.nova-periodika-page .admin-secondary-button:hover {
background: #f1f5f9;
border-color: #cbd5e1;
color: #172033;
}
/* ---------------------------------------------------------
САЧУВАЈ ПЕРИОДИКУ
--------------------------------------------------------- */
.nova-periodika-page .nova-knjiga-submit {
margin-top: 24px;
display: flex;
justify-content: flex-end;
}
.nova-periodika-page .nova-knjiga-submit .admin-primary-button {
width: auto;
min-width: 190px;
height: 42px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.nova-periodika-page .periodika-copy-row {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.nova-periodika-page .periodika-copy-row .admin-danger-button {
grid-column: span 1;
}
}
@media (max-width: 900px) {
.nova-periodika-page .nova-knjiga-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nova-periodika-page .nova-knjiga-field-wide {
grid-column: span 2;
}
.nova-periodika-page .napomena-row {
grid-template-columns: 1fr 1fr;
}
.nova-periodika-page .napomena-row input:nth-child(3) {
grid-column: span 2;
}
.nova-periodika-page .periodika-copy-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 650px) {
.nova-periodika-page .nova-knjiga-grid {
grid-template-columns: 1fr;
}
.nova-periodika-page .nova-knjiga-field-wide,
.nova-periodika-page .nova-knjiga-field-full {
grid-column: 1;
}
.nova-periodika-page .napomena-row {
grid-template-columns: 1fr;
}
.nova-periodika-page .napomena-row input:nth-child(3) {
grid-column: 1;
}
.nova-periodika-page .periodika-copy-row {
grid-template-columns: 1fr;
}
.nova-periodika-page .periodika-check {
justify-content: flex-start;
}
.nova-periodika-page .napomena-row .admin-danger-button,
.nova-periodika-page .periodika-copy-row .admin-danger-button {
width: 100%;
}
.nova-periodika-page .nova-knjiga-submit {
justify-content: stretch;
}
.nova-periodika-page .nova-knjiga-submit .admin-primary-button {
width: 100%;
}
}
/* =========================================================
PERIODIKA – NAPOMENE I FOND
========================================================= */
/* Zajednički izgled sekcija */
.periodika-section {
margin-top: 32px;
padding: 26px 28px 28px;
background: #ffffff;
border: 1px solid #e1e7f0;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(20, 45, 80, 0.05);
}
/* Naslov sekcije */
.periodika-section h2,
.periodika-section h3 {
margin: 0 0 8px;
color: #142b55;
font-size: 19px;
font-weight: 800;
letter-spacing: .2px;
}
/* Opis ispod naslova */
.periodika-section .section-description {
margin: 0 0 22px;
color: #718096;
font-size: 13px;
line-height: 1.6;
}
/* =========================================================
NAPOMENE O ISTORIJI PERIODIKE
========================================================= */
.periodika-history-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Jedna napomena */
.periodika-history-row {
display: grid;
grid-template-columns: 165px 165px minmax(250px, 1fr) 82px;
gap: 10px;
align-items: center;
padding: 12px;
background: #f8fafc;
border: 1px solid #e3e8f0;
border-radius: 10px;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.periodika-history-row:hover {
background: #fbfdff;
border-color: #cbd7e8;
box-shadow: 0 3px 10px rgba(20, 45, 80, 0.05);
}
/* =========================================================
FOND PERIODIKE
========================================================= */
.periodika-fund-list {
display: flex;
flex-direction: column;
gap: 14px;
}
/* Jedan primerak */
.periodika-fund-row {
padding: 14px;
background: #f8fafc;
border: 1px solid #e3e8f0;
border-radius: 10px;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.periodika-fund-row:hover {
background: #fbfdff;
border-color: #cbd7e8;
box-shadow: 0 3px 10px rgba(20, 45, 80, 0.05);
}
/* Prvi red fonda */
.periodika-fund-main {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1.2fr;
gap: 10px;
align-items: center;
}
/* Drugi red fonda */
.periodika-fund-details {
display: grid;
grid-template-columns: 1.4fr 1.2fr 1.5fr auto 82px;
gap: 10px;
align-items: center;
margin-top: 10px;
}
/* =========================================================
POLJA
========================================================= */
.periodika-section input,
.periodika-section select,
.periodika-section textarea {
width: 100%;
box-sizing: border-box;
min-height: 40px;
padding: 9px 11px;
border: 1px solid #ccd5e2;
border-radius: 7px;
background: #ffffff;
color: #26364d;
font-family: inherit;
font-size: 13px;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.periodika-section input::placeholder,
.periodika-section textarea::placeholder {
color: #9aa6b5;
}
.periodika-section input:hover,
.periodika-section select:hover,
.periodika-section textarea:hover {
border-color: #aebdce;
}
.periodika-section input:focus,
.periodika-section select:focus,
.periodika-section textarea:focus {
border-color: #315f91;
box-shadow: 0 0 0 3px rgba(49, 95, 145, 0.10);
background: #ffffff;
}
.periodika-section textarea {
min-height: 40px;
resize: vertical;
}
/* =========================================================
CHECKBOX – ZAVIČAJNA ZBIRKA
========================================================= */
.periodika-zavicajna {
display: flex;
align-items: center;
gap: 7px;
min-height: 40px;
padding: 0 8px;
white-space: nowrap;
color: #536276;
font-size: 13px;
}
.periodika-zavicajna input[type="checkbox"] {
width: 17px;
height: 17px;
min-height: auto;
margin: 0;
accent-color: #315f91;
}
/* =========================================================
DUGMAD
========================================================= */
.periodika-section .btn-add {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 12px;
padding: 9px 15px;
border: 1px solid #cbd8e7;
border-radius: 7px;
background: #ffffff;
color: #234c78;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
}
.periodika-section .btn-add:hover {
background: #edf4fb;
border-color: #aebfd3;
color: #173f68;
}
/* Ukloni – diskretno crveno */
.periodika-section .btn-remove {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0 12px;
border: 0;
border-radius: 7px;
background: #f4dddd;
color: #a52d2d;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all .2s ease;
}
.periodika-section .btn-remove:hover {
background: #e9c4c4;
color: #8e2020;
}
/* =========================================================
SEPARATOR IZMEĐU SEKCIJA
========================================================= */
.periodika-section + .periodika-section {
margin-top: 24px;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1000px) {
.periodika-history-row {
grid-template-columns: 1fr 1fr;
}
.periodika-history-row textarea,
.periodika-history-row .history-description {
grid-column: 1 / -1;
}
.periodika-fund-main {
grid-template-columns: repeat(2, 1fr);
}
.periodika-fund-main input:last-child {
grid-column: 1 / -1;
}
.periodika-fund-details {
grid-template-columns: 1fr 1fr;
}
.periodika-zavicajna {
justify-content: flex-start;
}
}
@media (max-width: 650px) {
.periodika-section {
padding: 20px 16px;
border-radius: 10px;
}
.periodika-history-row,
.periodika-fund-main,
.periodika-fund-details {
grid-template-columns: 1fr;
}
.periodika-history-row > *,
.periodika-fund-main > *,
.periodika-fund-details > * {
grid-column: auto !important;
}
.periodika-section .btn-remove {
width: 100%;
}
.periodika-section .btn-add {
width: 100%;
}
}
,, /* =========================================================
PERIODIKA – NAPOMENE I FOND
========================================================= */
/* ---------------------------------------------------------
4. NAPOMENE O ISTORIJI PERIODIKE
--------------------------------------------------------- */
.nova-knjiga-section .napomena-row {
display: grid;
grid-template-columns: 180px 220px minmax(280px, 1fr) 90px;
gap: 10px;
align-items: center;
width: 100%;
margin-bottom: 10px;
}
.nova-knjiga-section .napomena-row input {
width: 100%;
height: 42px;
box-sizing: border-box;
padding: 0 13px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #172554;
font-size: 14px;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.nova-knjiga-section .napomena-row input:focus {
border-color: #315f8d;
box-shadow: 0 0 0 3px rgba(49, 95, 141, .12);
}
.nova-knjiga-section .napomena-row input::placeholder {
color: #94a3b8;
}
.nova-knjiga-section .napomena-row .admin-danger-button {
height: 42px;
min-width: 90px;
margin: 0;
border-radius: 8px;
}
/* ---------------------------------------------------------
5. FOND PERIODIKE
--------------------------------------------------------- */
.nova-knjiga-section #primerci {
width: 100%;
}
.nova-knjiga-section .periodika-copy-row {
display: grid;
grid-template-columns: 1fr 1fr .8fr .8fr 1.25fr;
gap: 10px;
width: 100%;
padding: 16px;
margin-bottom: 12px;
box-sizing: border-box;
background: #f8fafc;
border: 1px solid #dbe4ee;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}
/* Sva polja u prvom redu */
.nova-knjiga-section .periodika-copy-row input,
.nova-knjiga-section .periodika-copy-row select {
width: 100%;
min-width: 0;
height: 42px;
box-sizing: border-box;
padding: 0 11px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #172554;
font-size: 14px;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.nova-knjiga-section .periodika-copy-row input:focus,
.nova-knjiga-section .periodika-copy-row select:focus {
border-color: #315f8d;
box-shadow: 0 0 0 3px rgba(49, 95, 141, .12);
}
.nova-knjiga-section .periodika-copy-row input::placeholder {
color: #94a3b8;
}
/* Drugi red fonda – lokacija, datum, režim, zavičajna, ukloni */
.nova-knjiga-section .periodika-copy-row select[name="Lokacije"],
.nova-knjiga-section .periodika-copy-row input[type="date"],
.nova-knjiga-section .periodika-copy-row select[name="RezimKoriscenja"] {
grid-row: 2;
}
/* Lokacija */
.nova-knjiga-section .periodika-copy-row select[name="Lokacije"] {
grid-column: 1 / 2;
}
/* Datum prinove */
.nova-knjiga-section .periodika-copy-row input[type="date"] {
grid-column: 2 / 3;
}
/* Režim korišćenja */
.nova-knjiga-section .periodika-copy-row select[name="RezimKoriscenja"] {
grid-column: 3 / 5;
}
/* Zavičajna zbirka */
.nova-knjiga-section .periodika-copy-row .periodika-check {
grid-column: 5 / 6;
grid-row: 2;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
height: 42px;
padding: 0 10px;
border: 1px solid #d5dee8;
border-radius: 8px;
background: #fff;
color: #334155;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
}
.nova-knjiga-section .periodika-copy-row .periodika-check input {
width: 17px;
height: 17px;
margin: 0;
accent-color: #315f8d;
}
/* Dugme Ukloni */
.nova-knjiga-section .periodika-copy-row .admin-danger-button {
grid-column: 5 / 6;
grid-row: 2;
justify-self: end;
align-self: center;
height: 42px;
min-width: 90px;
border-radius: 8px;
}
/* ---------------------------------------------------------
DUGMAD "DODAJ"
--------------------------------------------------------- */
.nova-knjiga-section > .admin-secondary-button {
margin-top: 4px;
border-radius: 8px;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
}
/* ---------------------------------------------------------
NASLOVI SEKCIJA 4 I 5
--------------------------------------------------------- */
.nova-knjiga-section h2 {
margin-bottom: 8px;
}
.nova-knjiga-section > p {
margin-bottom: 18px;
color: #64748b;
line-height: 1.55;
}
/* ---------------------------------------------------------
MOBILNI PRIKAZ
--------------------------------------------------------- */
@media (max-width: 1000px) {
.nova-knjiga-section .napomena-row {
grid-template-columns: 1fr 1fr;
}
.nova-knjiga-section .napomena-row input:nth-child(3) {
grid-column: 1 / -1;
}
.nova-knjiga-section .napomena-row .admin-danger-button {
grid-column: 2;
justify-self: end;
}
.nova-knjiga-section .periodika-copy-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nova-knjiga-section .periodika-copy-row select[name="Lokacije"],
.nova-knjiga-section .periodika-copy-row input[type="date"],
.nova-knjiga-section .periodika-copy-row select[name="RezimKoriscenja"],
.nova-knjiga-section .periodika-copy-row .periodika-check,
.nova-knjiga-section .periodika-copy-row .admin-danger-button {
grid-column: auto;
grid-row: auto;
}
.nova-knjiga-section .periodika-copy-row .periodika-check {
width: auto;
}
.nova-knjiga-section .periodika-copy-row .admin-danger-button {
justify-self: start;
}
}
@media (max-width: 600px) {
.nova-knjiga-section .napomena-row,
.nova-knjiga-section .periodika-copy-row {
grid-template-columns: 1fr;
}
.nova-knjiga-section .napomena-row input,
.nova-knjiga-section .napomena-row .admin-danger-button {
grid-column: auto;
}
.nova-knjiga-section .periodika-copy-row select[name="Lokacije"],
.nova-knjiga-section .periodika-copy-row input[type="date"],
.nova-knjiga-section .periodika-copy-row select[name="RezimKoriscenja"],
.nova-knjiga-section .periodika-copy-row .periodika-check,
.nova-knjiga-section .periodika-copy-row .admin-danger-button {
grid-column: auto;
grid-row: auto;
}
.nova-knjiga-section .periodika-copy-row .admin-danger-button {
width: 100%;
}
}
/* =========================================================
ПОСТОЈЕЋИ ПРИМЕРЦИ – УРЕЂИВАЊЕ
========================================================= */
.edit-copies-block {
margin-top: 28px;
}
.edit-copies-block > h3 {
margin: 0 0 6px;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.4px;
color: #18283a;
}
.edit-copies-block > p {
margin: 0 0 14px;
color: #6b7b8f;
font-size: 13px;
}
/* Главни оквир табеле */
.edit-copies-table {
width: 100%;
border: 1px solid #d9e2ec;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 2px 8px rgba(20, 45, 70, 0.04);
}
/* Заглавље */
.edit-copies-header {
display: grid;
grid-template-columns: 1.1fr 1.5fr 1.1fr;
gap: 0;
padding: 12px 14px;
background: #eef4f9;
border-bottom: 1px solid #d9e2ec;
}
.edit-copies-header > div {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.6px;
color: #5d7690;
}
/* Један постојећи примерак */
.edit-copies-row {
display: grid;
grid-template-columns: 1.1fr 1.5fr 1.1fr;
column-gap: 18px;
row-gap: 14px;
padding: 18px 14px 16px;
background: #ffffff;
border-bottom: 1px solid #e5ebf1;
}
.edit-copies-row:last-child {
border-bottom: none;
}
/* Основни подаци – прва три поља */
.edit-copies-row > div:nth-of-type(1),
.edit-copies-row > div:nth-of-type(2),
.edit-copies-row > div:nth-of-type(3) {
min-width: 0;
}
/* Инвентарни број */
.edit-copies-row > div:nth-of-type(1) {
display: flex;
align-items: center;
gap: 9px;
}
.edit-copies-row > div:nth-of-type(1) strong {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 12px;
border-radius: 7px;
background: #f1f5f9;
color: #172b3f;
font-size: 14px;
font-weight: 800;
}
/* Select и date поља */
.edit-copies-row select,
.edit-copies-row input[type="date"],
.edit-copies-row input[type="text"] {
width: 100%;
box-sizing: border-box;
min-height: 38px;
padding: 8px 10px;
border: 1px solid #ccd8e4;
border-radius: 7px;
background: #ffffff;
color: #26384a;
font-size: 13px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.edit-copies-row select:focus,
.edit-copies-row input[type="date"]:focus,
.edit-copies-row input[type="text"]:focus {
outline: none;
border-color: #39709e;
box-shadow: 0 0 0 3px rgba(57, 112, 158, 0.10);
}
/* Ознаке изнад додатних поља */
.edit-copies-row label {
display: block;
margin-bottom: 6px;
color: #52687d;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.35px;
}
/* Поље за режим коришћења */
.edit-copies-row > div:nth-of-type(4) {
grid-column: 1;
}
/* Статус фонда */
.edit-copies-row > div:nth-of-type(5) {
grid-column: 2;
}
/* Датум отписа */
.edit-copies-row > div:nth-of-type(6) {
grid-column: 3;
}
/* Основ расходовања */
.edit-copies-row > div:nth-of-type(7) {
grid-column: 1 / span 2;
}
/* Завичајна збирка */
.edit-copies-row > div:nth-of-type(8) {
grid-column: 3;
display: flex;
align-items: flex-end;
}
/* Завичајна checkbox */
.inventory-heritage-check {
display: flex;
align-items: center;
}
.inventory-heritage-check label {
display: flex !important;
align-items: center;
gap: 7px;
margin: 0 !important;
min-height: 38px;
padding: 0 11px;
border: 1px solid #d7e0e9;
border-radius: 7px;
background: #f8fafc;
color: #52687d;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.inventory-heritage-check input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
accent-color: #39709e;
}
/* Дугме ОБРИШИ */
.edit-copies-row .admin-danger-button {
min-height: 32px;
padding: 6px 10px;
border-radius: 6px;
font-size: 10px;
font-weight: 800;
}
/* Раздвајање примерака */
.edit-copies-row + .edit-copies-row {
border-top: 5px solid #f3f6f9;
}
/* Празан фонд */
.edit-copies-block .admin-empty {
padding: 18px;
border: 1px dashed #cbd7e3;
border-radius: 10px;
background: #f8fafc;
color: #687b8f;
}
/* =========================================================
МОБИЛНИ ПРИКАЗ
========================================================= */
@media (max-width: 900px) {
.edit-copies-header {
display: none;
}
.edit-copies-row {
grid-template-columns: 1fr 1fr;
padding: 16px;
}
.edit-copies-row > div:nth-of-type(1) {
grid-column: 1 / -1;
}
.edit-copies-row > div:nth-of-type(2) {
grid-column: 1;
}
.edit-copies-row > div:nth-of-type(3) {
grid-column: 2;
}
.edit-copies-row > div:nth-of-type(4) {
grid-column: 1;
}
.edit-copies-row > div:nth-of-type(5) {
grid-column: 2;
}
.edit-copies-row > div:nth-of-type(6) {
grid-column: 1;
}
.edit-copies-row > div:nth-of-type(7) {
grid-column: 1 / -1;
}
.edit-copies-row > div:nth-of-type(8) {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
.edit-copies-row {
grid-template-columns: 1fr;
gap: 12px;
}
.edit-copies-row > div:nth-of-type(1),
.edit-copies-row > div:nth-of-type(2),
.edit-copies-row > div:nth-of-type(3),
.edit-copies-row > div:nth-of-type(4),
.edit-copies-row > div:nth-of-type(5),
.edit-copies-row > div:nth-of-type(6),
.edit-copies-row > div:nth-of-type(7),
.edit-copies-row > div:nth-of-type(8) {
grid-column: 1 / -1;
}
}
/* =========================================================
МОБИЛНИ МЕНИ – УЈЕДНАЧЕН ИЗГЛЕД
========================================================= */
@media (max-width: 800px) {
/* Ставка „ПРЕТРАЖИ КАТАЛОГ“ више није кутија */
.main-navigation .nav-dropdown {
width: 100%;
display: block;
margin: 0;
}
.main-navigation .nav-dropdown-toggle {
position: relative;
width: 100%;
min-height: 42px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 35px 0 10px;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #475569 !important;
font-size: 10px !important;
font-weight: 750 !important;
letter-spacing: .2px;
text-align: center;
}
/* Стрелица остаје десно, али не помера текст */
.main-navigation .nav-dropdown-toggle .nav-dropdown-arrow {
position: absolute;
right: 14px;
margin: 0;
font-size: 10px;
color: #64748b;
}
/* Када је мени отворен */
.main-navigation .nav-dropdown.is-open .nav-dropdown-toggle {
background: transparent !important;
color: #004d00 !important;
border: none !important;
}
/* Подмени */
.main-navigation .nav-dropdown-menu {
position: static;
width: calc(100% - 20px);
min-width: 0;
margin: 0 10px 5px;
padding: 4px;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #f7faf6;
box-shadow: none;
transform: none;
}
.main-navigation .nav-dropdown-menu a {
min-height: 36px;
display: flex;
align-items: center;
padding: 8px 11px !important;
border-radius: 6px;
font-size: 10px !important;
font-weight: 650 !important;
}
/* Остале ставке остају визуелно исте */
.main-navigation > a {
width: 100%;
min-height: 42px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border-radius: 0;
font-size: 10px;
font-weight: 750;
letter-spacing: .2px;
}
}