/* ============================================================
   Уписни систем — Дом ученика Свилајнац
   main.css v3.0 — усклађен са новим сајтом школе
   Примарна: #2d6a4f | Акцент: #e76f51
   Фонтови: Montserrat (наслови) + Open Sans (тело)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Montserrat:wght@600;700;800&display=swap');

:root {
  /* ── Бoje — идентичне новом сајту школе ── */
  --clr-primary:      #2d6a4f;
  --clr-primary-dk:   #1b4332;
  --clr-primary-lt:   #40916c;
  --clr-primary-bg:   #eef5f1;
  --clr-page-bg:      #f5faf7;

  --clr-accent:       #e76f51;
  --clr-accent-hover: #d4572a;
  --clr-accent-bg:    #faece7;

  --clr-secondary:    #1a2e2a;

  --clr-info:         #185fa5;
  --clr-info-bg:      #e6f1fb;

  --clr-success:      #2d6a4f;
  --clr-success-bg:   #eef5f1;
  --clr-warning:      #ba7517;
  --clr-warning-bg:   #faeeda;
  --clr-danger:       #a32d2d;
  --clr-danger-bg:    #fcebeb;

  --clr-muted:        #666;
  --clr-border:       #ddd;
  --clr-border-green: rgba(45,106,79,.2);
  --clr-white:        #ffffff;

  /* ── Фонтови — идентични новом сајту ── */
  --font-body:    'Open Sans', sans-serif;
  --font-heading: 'Montserrat', sans-serif;

  /* ── Layout ── */
  --radius:    8px;
  --radius-lg: 10px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.10);
  --shadow-md: 0 4px 8px rgba(0,0,0,.15);
  --shadow-lg: 0 8px 16px rgba(0,0,0,.20);
  --navbar-h:  60px;
}

/* ── Ресет ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--clr-page-bg);
  color: #333;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
}

a { color: var(--clr-primary-lt); text-decoration: none; transition: color .3s; }
a:hover { color: var(--clr-accent); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--clr-primary);
  line-height: 1.2;
  margin-bottom: .75rem;
}

h1 { font-size: clamp(1.5rem, 3vw, 2rem); }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.65rem); }
h3 { font-size: 1.2rem; }

p { color: var(--clr-muted); margin-bottom: 1rem; }

/* ── Navbar ── */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--navbar-h);
  background: var(--clr-page-bg);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
}

/* ── Хамбургер (мобилни мени) ── */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--clr-border-green);
  border-radius: 8px;
  color: var(--clr-primary);
  padding: .35rem .5rem;
  cursor: pointer;
  margin-left: auto;
  align-items: center;
}
.nav-toggle:hover { color: var(--clr-accent); border-color: var(--clr-accent); }

/* Зрнаста текстура — исти „папирни" печат као на сајту школе */
.navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}
.navbar > * { position: relative; z-index: 1; }
.navbar {
  border-bottom: 1px solid var(--clr-border-green);
}

.navbar-brand a {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--clr-primary);
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
}
.navbar-brand a:hover { text-decoration: none; color: var(--clr-primary); }

.logo-img {
  height: 48px;
  width: auto;
  max-width: 56px;
  object-fit: contain;
  flex-shrink: 0;
  /* ЈПГ грб има белу позадину — multiply је стапа са траком,
     остаје само цртеж грба (исти утисак као на сајту) */
  mix-blend-mode: multiply;
}

.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-glavni { font-size: .9rem; font-weight: 700; color: var(--clr-primary); font-family: var(--font-heading); }
.brand-naziv { font-size: .68rem; color: var(--clr-muted); font-family: var(--font-body); font-weight: 400; opacity: .85; white-space: nowrap; }

/* Мени сме да се СТИСНЕ и, у крајњем случају, да се склиза —
   пре него што гурне име корисника и „Одјаву" ван екрана.
   Без `min-width:0` flex ставка не пристаје да буде ужа од свог
   садржаја, а ставке су `white-space:nowrap`, па је цео ред излазио
   из екрана: код админа већ на 1440px чим се појави значка на
   „Пријавама", иначе између ~900 и ~1300px. */
.navbar-menu { display: flex; align-items: center; gap: .1rem;
               flex: 1 1 auto; min-width: 0; margin-left: .5rem;
               overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.navbar-menu::-webkit-scrollbar { display: none; }

.navbar-menu a {
  color: var(--clr-primary);
  padding: .6rem .75rem;
  border-radius: 0;              /* равна доња линија — као на сајту */
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-weight: 600;
  font-family: var(--font-body);
  transition: color .3s, border-color .3s;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  text-decoration: none;
}
.navbar-menu a:hover { color: var(--clr-accent); border-bottom-color: var(--clr-accent); text-decoration: none; }
.navbar-menu a.active { color: var(--clr-accent); border-bottom-color: var(--clr-accent); font-weight: 700; }

/* Бројач уз ставку менија (нпр. „Пријаве 3") — број који тражи
   поглед, не украс: црвен, округао, увек уз саму реч. */
.meni-bedz {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--clr-danger, #a3231b);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Одјава се не стиска и не склања — она мора да буде ту увек. */
.navbar-user { display: flex; align-items: center; gap: .6rem;
               margin-left: auto; flex: 0 0 auto; }
.korisnik-ime { color: var(--clr-muted); font-size: .85rem; }

.btn-logout {
  color: var(--clr-primary);
  padding: .3rem .75rem;
  border: 1px solid var(--clr-border-green);
  border-radius: var(--radius);
  font-size: .83rem;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all .3s;
  background: rgba(45,106,79,.08);
}
.btn-logout:hover { background: var(--clr-accent); color: #fff; border-color: var(--clr-accent); text-decoration: none; }

/* ── Main content ── */
.main-content {
  flex: 1;
  padding: 1.5rem;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

/* ── Footer ── */
.footer {
  background: var(--clr-secondary);
  color: rgba(255,255,255,.8);
  padding: .65rem 1.5rem;
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  font-family: var(--font-body);
  margin-top: auto;
}

/* ── Alerts ── */
.alert {
  padding: .75rem 1rem .75rem 1.1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  /* НЕ flex: свака <strong> или <a> у поруци постаје засебна колона,
     па се текст ломи у уске стубце (виђено на прозивци). flow-root
     држи поруку као обичан текст, а прави BFC да плутајући × остане
     унутар оквира. */
  display: flow-root;
  font-size: .9rem;
  line-height: 1.5;
  font-family: var(--font-body);
  border-left: 4px solid;
  animation: slideIn .2s ease;
}
.alert > svg { vertical-align: -.2em; margin-right: .45rem; }
.alert-success { background: var(--clr-success-bg); border-color: var(--clr-success); color: #1b4332; }
.alert-danger  { background: var(--clr-danger-bg);  border-color: var(--clr-danger);  color: #791f1f; }
.alert-info    { background: var(--clr-info-bg);    border-color: var(--clr-info);    color: #0c447c; }
.alert-warning { background: var(--clr-warning-bg); border-color: var(--clr-warning); color: #633806; }
.alert-close { float: right; margin-left: .75rem; background: none; border: none; cursor: pointer; font-size: 1.2rem; line-height: 1.2; color: inherit; opacity: .55; padding: 0; }
.alert-close:hover { opacity: 1; }
@keyframes slideIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* ── Page header ── */
.page-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-header h2 { font-size: 1.45rem; color: var(--clr-primary); font-family: var(--font-heading); margin-bottom: 0; }
.page-header-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.breadcrumb { font-size: .88rem; color: var(--clr-muted); }
.breadcrumb a { color: var(--clr-primary-lt); }
.breadcrumb a:hover { color: var(--clr-accent); }

/* ── Buttons — isti stil kao novi sajt ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1.2rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: .9rem;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all .3s ease;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}
.btn:hover { text-decoration: none; }

/* Primary — zelena, hover narandzasta */
.btn-primary { background: rgba(45,106,79,.08); color: var(--clr-primary); }
.btn-primary:hover { background: var(--clr-accent); color: #fff; }

/* Secondary */
.btn-secondary { background: rgba(45,106,79,.08); color: var(--clr-primary); }
.btn-secondary:hover { background: var(--clr-accent); color: #fff; }

/* Outline */
.btn-outline { background: rgba(45,106,79,.08); color: var(--clr-primary); }
.btn-outline:hover { background: var(--clr-accent); color: #fff; }

/* Accent/CTA */
.btn-accent { background: var(--clr-accent); color: #fff; }
.btn-accent:hover { background: var(--clr-accent-hover); color: #fff; }

/* Hero dugme — puna zelena */
.btn-hero { background: var(--clr-primary); color: #fff; }
.btn-hero:hover { background: var(--clr-accent); color: #fff; }

.btn-warning { background: var(--clr-warning-bg); color: #633806; }
.btn-warning:hover { background: var(--clr-accent); color: #fff; }

.btn-danger { background: var(--clr-danger-bg); color: var(--clr-danger); border: 1px solid #f7c1c1; }
.btn-danger:hover { background: var(--clr-danger); color: #fff; }

.btn-info { background: var(--clr-info-bg); color: var(--clr-info); }
.btn-info:hover { background: var(--clr-info); color: #fff; }

.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: .28rem .75rem; font-size: .82rem; }
.btn-lg { padding: .65rem 1.5rem; font-size: .95rem; }

/* ── Forms ── */
.form-group { margin-bottom: .9rem; }
.form-group label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--clr-primary);
  margin-bottom: .3rem;
}
.form-group.required > label::after { content: ' *'; color: var(--clr-danger); }

.form-control {
  display: block;
  width: 100%;
  padding: .5rem .9rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius);
  font-size: .9rem;
  font-family: var(--font-body);
  background: var(--clr-white);
  color: #333;
  transition: border-color .3s, box-shadow .3s;
}
.form-control:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px rgba(45,106,79,.12);
}
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; }
input[readonly], select[disabled] { background: #f0f0f0; color: var(--clr-muted); cursor: not-allowed; }

.form-check { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; cursor: pointer; }
.form-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--clr-primary); cursor: pointer; }
.form-inline { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }

.field-hint { font-size: .78rem; color: var(--clr-muted); margin-top: .25rem; display: block; }
.field-msg  { font-size: .8rem; margin-top: .25rem; }
.field-msg-danger  { color: var(--clr-danger); }
.field-msg-success { color: var(--clr-success); }

.input-password-wrap { position: relative; }
.input-password-wrap .form-control { padding-right: 2.5rem; }
.btn-toggle-password { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0; }

.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }

/* ── Tables ── */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  margin-bottom: 1.25rem;
  border: 1.5px solid var(--clr-primary);
}

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--clr-white);
  font-size: .88rem;
  font-family: var(--font-body);
}
.table th {
  background: var(--clr-primary);
  color: #fff;
  padding: .6rem .85rem;
  text-align: left;
  font-size: .82rem;
  font-weight: 700;
  font-family: var(--font-heading);
  white-space: nowrap;
}
.table td {
  padding: .55rem .85rem;
  border-bottom: 1px solid #f0f5f3;
  vertical-align: middle;
  color: #333;
}
.table-hover tbody tr:hover td { background: var(--clr-primary-bg); }
.table-sm td, .table-sm th { padding: .35rem .65rem; font-size: .82rem; }
.table-zebra tbody tr:nth-child(even) td { background: var(--clr-page-bg); }

.td-center { text-align: center; }
.td-right  { text-align: right; }
.td-akcije { text-align: right; white-space: nowrap; }
.td-ukupno { background: var(--clr-primary-bg) !important; font-weight: 700; color: var(--clr-primary); }

/* ── Badges ── */
.badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  font-family: var(--font-body);
  white-space: nowrap;
}
.badge-aktivan   { background: var(--clr-success-bg); color: #1b4332; border: 1px solid #9fe1cb; }
.badge-prenesen  { background: #e8f4fb; color: #185fa5; border: 1px solid #b5d4f4; }
.badge-zavrsio   { background: var(--clr-info-bg);    color: #0c447c; border: 1px solid #b5d4f4; }
.badge-ispisan   { background: var(--clr-warning-bg); color: #633806; border: 1px solid #fac775; }
.badge-arhiviran { background: #f1efec; color: #5f5e5a; border: 1px solid #d3d1c7; }
.badge-success   { background: var(--clr-success-bg); color: #1b4332; border: 1px solid #9fe1cb; }
.badge-warning   { background: var(--clr-warning-bg); color: #633806; border: 1px solid #fac775; }
.badge-danger    { background: var(--clr-danger-bg);  color: var(--clr-danger); border: 1px solid #f7c1c1; }
.badge-info      { background: var(--clr-info-bg);    color: var(--clr-info); border: 1px solid #b5d4f4; }
.badge-vaspitna  { background: var(--clr-primary-bg); color: #1b4332; border: 1px solid var(--clr-border-green); }
.badge-upisna    { background: #faeeda; color: #633806; border: 1px solid #fac775; }

.badge-grupa {
  display: inline-block;
  background: var(--clr-info-bg);
  color: var(--clr-info);
  border: 1px solid #b5d4f4;
  padding: .15rem .5rem;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 700;
}
.badge-sg {
  display: inline-block;
  padding: .22rem .65rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  font-size: .8rem;
  color: var(--clr-muted);
  cursor: pointer;
  transition: all .3s;
  text-decoration: none;
}
.badge-sg:hover, .badge-sg.active { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); text-decoration: none; }

.badge-uloga-admin           { background: #f3e5f5; color: #4a235a; border: 1px solid #ce93d8; }
.badge-uloga-vaspitac        { background: var(--clr-primary-bg); color: #1b4332; border: 1px solid var(--clr-border-green); }
.badge-uloga-upisna_komisija { background: var(--clr-warning-bg); color: #633806; border: 1px solid #fac775; }
.badge-uloga-racunovodstvo    { background: #e8f0fe; color: #17417e; border: 1px solid #a9c4ef; }
.badge-uloga-strucni_saradnik { background: #e6f7f4; color: #0c5d51; border: 1px solid #8fd6c9; }

/* ── Stat grid ── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-grid-small { grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); }

.stat-card {
  background: var(--clr-white);
  border-radius: var(--radius);
  padding: 1.1rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--clr-primary);
  border-top: 3px solid var(--clr-primary);
  text-decoration: none;
  color: inherit;
  transition: transform .3s, box-shadow .3s;
  display: block;
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); text-decoration: none; }
.stat-icon  { font-size: 1.7rem; margin-bottom: .35rem; }
.stat-broj  { font-size: 2rem; font-weight: 800; color: var(--clr-primary); font-family: var(--font-heading); }
.stat-naziv { font-size: .8rem; color: var(--clr-muted); margin-top: .2rem; font-family: var(--font-body); }

.stat-primary { border-top-color: var(--clr-primary); }
.stat-success { border-top-color: var(--clr-success); }
.stat-warning { border-top-color: var(--clr-warning); }
.stat-danger  { border-top-color: var(--clr-danger); }
.stat-info    { border-top-color: var(--clr-info); }
.stat-accent  { border-top-color: var(--clr-accent); }

/* ── Quick actions ── */
.quick-actions h3, .admin-section h3 {
  font-size: .9rem;
  color: var(--clr-muted);
  margin-bottom: .65rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--clr-border-green);
  font-family: var(--font-body);
  font-weight: 600;
}
.admin-sections { display: flex; flex-direction: column; gap: 1.25rem; }

.qa-grid { display: flex; flex-wrap: wrap; gap: .55rem; }
.qa-btn {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1rem;
  background: rgba(45,106,79,.08);
  border: none;
  border-radius: var(--radius);
  color: var(--clr-primary);
  font-size: .88rem;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all .3s;
  text-decoration: none;
}
.qa-btn:hover { background: var(--clr-accent); color: #fff; text-decoration: none; }
.qa-btn.qa-primary { background: var(--clr-primary); color: #fff; }
.qa-btn.qa-primary:hover { background: var(--clr-accent); }
.qa-btn.qa-admin { background: #f3e5f5; color: #4a235a; }
.qa-btn.qa-admin:hover { background: var(--clr-accent); color: #fff; }
.qa-icon { font-size: 1rem; }

/* ── Panels ── */
.panel {
  background: var(--clr-white);
  border: 1.5px solid var(--clr-primary);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  box-shadow: var(--shadow-md);
  transition: transform .3s, box-shadow .3s;
}
.panel-header {
  padding: .65rem 1rem;
  background: var(--clr-primary-bg);
  border-bottom: 1px solid var(--clr-border-green);
  font-weight: 700;
  font-size: .9rem;
  color: var(--clr-primary);
  font-family: var(--font-heading);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.panel-body { padding: 1rem; }
.panel-muted .panel-header  { background: #f1efec; color: var(--clr-muted); }
.panel-admin .panel-header  { background: #f3e5f5; color: #4a235a; }
.panel-bodovi .panel-header { background: var(--clr-warning-bg); color: #633806; }

/* ── DL grid ── */
.dl-grid { display: grid; grid-template-columns: minmax(80px,1fr) 2fr; gap: .35rem .75rem; }
.dl-grid dt { font-size: .82rem; color: var(--clr-muted); font-weight: 600; align-self: start; padding-top:.15rem; }
.dl-grid dd { font-size: .88rem; align-self: start; color: #333; min-width:0; word-break:break-word; overflow-wrap:break-word; }
.dl-bodovi .dt-total { font-weight: 700; color: #333; border-top: 1px solid var(--clr-border); padding-top: .4rem; }
.dl-bodovi .dd-total { font-size: 1.15rem; font-weight: 800; color: var(--clr-primary); border-top: 1px solid var(--clr-border); padding-top: .4rem; font-family: var(--font-heading); }

/* ── Filter form ── */
.filter-form {
  background: var(--clr-white);
  padding: .9rem 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  margin-bottom: 1.25rem;
  border: 1.5px solid var(--clr-primary);
}
.filter-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: flex-end; }
.filter-row-secondary { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--clr-border-green); align-items: center; }
.filter-group  { flex: 1 1 160px; min-width: 0; }
.filter-search { flex: 2 1 220px; }
.filter-small  { flex: 0 1 130px; }
.filter-label  { font-size: .8rem; color: var(--clr-muted); margin-right: .25rem; }
.results-header { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; font-size: .88rem; }
.results-count  { color: var(--clr-muted); }
/* ⚠ `flex-wrap` НИЈЕ украс. Шест дугмади сортирања у једном реду
   тражи 429px, па је `/ucenici` на телефону од 390 гурао целу страну
   (мерено 10.09.2026). Исти образац већ забележен на алатним тракама
   извештаја (v6.25) и на навбару — трећи пут у овом пројекту.
   `margin-left:auto` се на уском екрану гаси, иначе гура ред удесно
   уместо да га пусти да се прелама. */
.sort-links { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-left: auto; font-size: .82rem; }
@media (max-width: 760px) {
  .sort-links { margin-left: 0; width: 100%; }
  /* Прст, не миш: дугмад сортирања морају да се погоде. */
  .sort-links a { padding: .35rem .6rem; }
}
.sort-links a { color: var(--clr-muted); padding: .15rem .4rem; border-radius: 3px; }
.sort-links a:hover, .sort-links a.active { background: var(--clr-primary-bg); color: var(--clr-primary); font-weight: 600; }

/* ── Kartica ── */
.kartica-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; align-items: start; }
.kartica-header {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem; background: var(--clr-white);
  border: 1.5px solid var(--clr-primary);
  border-radius: var(--radius); margin-bottom: 1rem;
  box-shadow: var(--shadow-md);
}
.kartica-naslov h2 { font-size: 1.25rem; color: var(--clr-primary); margin-bottom: .4rem; }
.kartica-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .85rem; }

.foto-ucenik { width: 64px; height: 76px; object-fit: cover; border-radius: var(--radius); border: 1.5px solid var(--clr-border-green); }
.foto-placeholder {
  width: 80px; height: 95px;
  background: var(--clr-primary-bg); color: var(--clr-primary);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 800;
  border: 1.5px solid var(--clr-border-green);
  font-family: var(--font-heading);
}

.collapsible summary { cursor: pointer; font-weight: 700; color: var(--clr-primary); padding: .5rem 0; list-style: none; display: flex; align-items: center; gap: .4rem; font-family: var(--font-heading); }
.collapsible summary::before { content: '▶'; font-size: .65rem; }
.collapsible[open] summary::before { content: '▼'; }

/* ── Pagination ── */
.pagination { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: 1rem 0; }
.page-btn {
  padding: .3rem .75rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  background: rgba(45,106,79,.08);
  color: var(--clr-primary);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all .3s;
}
.page-btn.active  { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); }
.page-btn:hover:not(.active) { background: var(--clr-accent); color: #fff; border-color: var(--clr-accent); text-decoration: none; }
.page-info { margin-left: auto; color: var(--clr-muted); font-size: .82rem; }

/* ── Login page ── */
body.login-page {
  background: linear-gradient(135deg, #2d6a4f 0%, #1b4332 55%, #0d2b1d 100%);
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-wrapper { width: 100%; max-width: 420px; padding: 1.5rem; }
.login-card {
  background: var(--clr-white);
  border-radius: 10px;
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-lg);
}
.login-header { text-align: center; margin-bottom: 1.75rem; }
.login-logo {
  width: 88px; height: 88px; border-radius: 50%;
  margin-bottom: .75rem;
  border: 3px solid var(--clr-border-green);
  object-fit: cover;
  display: block; margin-left: auto; margin-right: auto;
}
.login-naziv    { font-size: 1.05rem; color: var(--clr-primary); font-family: var(--font-heading); font-weight: 700; }
.login-podnaziv { color: var(--clr-muted); font-size: .85rem; margin-top: .25rem; }

/* ── Detalj grupe ── */
.detalj-grid { display: grid; grid-template-columns: 270px 1fr; gap: 1.25rem; align-items: start; }
.mini-stat-grid { display: flex; gap: .6rem; margin-bottom: .75rem; }
.mini-stat { text-align: center; flex: 1; background: var(--clr-primary-bg); padding: .5rem; border-radius: var(--radius); border: 1px solid var(--clr-border-green); }
.mini-stat-br { font-size: 1.4rem; font-weight: 800; color: var(--clr-primary); font-family: var(--font-heading); }
.mini-stat-n  { font-size: .72rem; color: var(--clr-muted); }

/* ── Sobe ── */
.sobe-mreza { display: flex; flex-wrap: wrap; gap: .55rem; }
.soba-karta {
  width: 74px; border: 1.5px solid var(--clr-border);
  border-radius: var(--radius); padding: .4rem .35rem;
  text-align: center; position: relative; transition: transform .3s;
}
.soba-karta:hover { transform: scale(1.04); box-shadow: var(--shadow-sm); }
.soba-slobodna  { border-color: #5dcaa5; background: #e1f5ee; }
.soba-delimicno { border-color: #fac775; background: var(--clr-warning-bg); }
.soba-puna      { border-color: #f09595; background: var(--clr-danger-bg); }
.soba-br   { font-weight: 700; font-size: .85rem; color: #333; }
.soba-stat { font-size: .75rem; color: var(--clr-muted); }
.soba-bar  { height: 4px; background: #d3d1c7; border-radius: 2px; margin: .2rem 0; }
.soba-bar-fill { height: 100%; background: var(--clr-success); border-radius: 2px; transition: width .3s; }
.soba-puna .soba-bar-fill      { background: var(--clr-danger); }
.soba-delimicno .soba-bar-fill { background: var(--clr-warning); }

/* ── Modal ── */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.modal-dialog {
  position: relative; background: var(--clr-white); border-radius: 10px;
  width: 100%; max-width: 520px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg); animation: slideIn .2s ease;
}
.modal-header {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--clr-border-green);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-header h3 { font-size: 1rem; color: var(--clr-primary); font-family: var(--font-heading); font-weight: 700; }
.modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--clr-muted); }
.modal-body  { padding: 1.25rem; overflow-y: auto; }
.modal-footer { display: flex; gap: .6rem; padding-top: .75rem; border-top: 1px solid var(--clr-border-green); margin-top: .75rem; }

/* ── Autocomplete ── */
.autocomplete-lista {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
  background: var(--clr-white); border: 1.5px solid var(--clr-primary);
  border-top: none; border-radius: 0 0 var(--radius) var(--radius);
  max-height: 200px; overflow-y: auto; list-style: none;
  box-shadow: var(--shadow-md);
}
.autocomplete-lista li { padding: .42rem .8rem; cursor: pointer; font-size: .88rem; border-bottom: 1px solid #f0f5f3; }
.autocomplete-lista li:hover { background: var(--clr-primary-bg); color: var(--clr-primary); }

/* ── Unos form ── */
.unos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 1.25rem; }
.form-footer { margin-top: 1.25rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.font-mono { font-family: 'Courier New', monospace; letter-spacing: .1em; }

/* ── Rows ── */
.row-aktivan td   { background: #eaf3de !important; }
.row-neaktivan td { opacity: .55; }
.row-nekompletan td { opacity: .65; font-style: italic; }
.row-danas td     { background: var(--clr-warning-bg) !important; }

/* ── Dogadjaji ── */
.dogadjaji-list { list-style: none; }
.dogadjaj-item { padding: .5rem .75rem; margin-bottom: .35rem; border-left: 3px solid var(--clr-border); border-radius: 0 var(--radius) var(--radius) 0; font-size: .85rem; }
.tip-incident  { border-color: var(--clr-danger); background: var(--clr-danger-bg); }
.tip-pohvala   { border-color: var(--clr-success); background: var(--clr-success-bg); }
.tip-obavestenje { border-color: var(--clr-info); background: var(--clr-info-bg); }

/* ── Popis ── */
.popis-toolbar { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; margin-bottom: .65rem; padding: .55rem .75rem; background: var(--clr-primary-bg); border-radius: var(--radius); border: 1px solid var(--clr-border-green); }
.popis-prisutan td { background: #eaf3de !important; }
.popis-odsutan  td { background: var(--clr-danger-bg)  !important; }
.popis-bolestan td { background: var(--clr-warning-bg) !important; }
.popis-odsustvo td { background: var(--clr-info-bg)    !important; }

/* ── Util ── */
.text-muted  { color: var(--clr-muted); }
.text-danger { color: var(--clr-danger); }
.text-success{ color: var(--clr-success); }
.text-accent { color: var(--clr-accent); }
.text-sm     { font-size: .8rem; }
.d-block     { display: block; }
.float-right { float: right; }
.bold        { font-weight: 700; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--clr-muted); }
.empty-icon  { font-size: 2.8rem; margin-bottom: .65rem; }

/* Пре него што мени почне да се склиза, прво се стисну размаци:
   девет ставки × ~0.6rem даје преко 70px, а толико је и фалило. */
@media (max-width: 1340px) {
  .navbar { padding: 0 1rem; gap: .6rem; }
  .navbar-menu a { padding: .6rem .45rem; gap: .3rem; font-size: .82rem; }
}
@media (max-width: 1080px) {
  .korisnik-ime { display: none; }   /* име пише на насловној, у поздраву */
}

/* ── Responsive ── */
@media (max-width: 820px) { .kartica-grid, .detalj-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  /* Хамбургер преузима навигацију */
  /* ⚠ Хамбургер је прво дугме које дежурни притисне на СВАКОЈ
     страни, а мерено је био 35px — испод мете од 38px. Није `.btn`,
     па га опште правило није ни дотицало. */
  .nav-toggle { display: inline-flex; align-items: center;
                min-height: var(--mob-meta); min-width: var(--mob-meta);
                justify-content: center; }
  .navbar-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--clr-page-bg);
    border-bottom: 2px solid var(--clr-primary);
    box-shadow: var(--shadow-md);
    padding: .25rem 0 .5rem;
    z-index: 200;
  }
  .navbar.nav-otvoren .navbar-menu { display: flex; }
  .navbar-menu a {
    padding: .8rem 1.25rem;          /* пун touch target */
    font-size: .95rem;
    border-bottom: 1px solid rgba(45,106,79,.08);
    border-left: 3px solid transparent;
  }
  .navbar-menu a.active,
  .navbar-menu a:hover {
    border-bottom-color: rgba(45,106,79,.08);   /* доња линија мирује */
    border-left-color: var(--clr-accent);        /* акцент прелази лево */
    background: rgba(45,106,79,.05);
  }
}
/* Бирач папира и оријентације (`core/Stampa.php`). Стил је овде, а
   не у `style` атрибуту, да мобилно правило „16px · 38px" може да га
   прегази без `!important` — инлајн стил ниједан медија-упит не може
   да надјача (в. CLAUDE.md §5). */
/* ⚠ САМО оно што је пре стајало у `style` атрибуту — ни слово више.
   Оквир, подлога и породица слова остају прегледачеви, какви су и
   били; додавање „уреднијег" оквира било би измишљање изгледа
   (в. `docs/GRESKE.md` бр. 14). */
.stampa-birac {
  padding: .25rem .4rem;
  font-size: .85rem;
}

@media (max-width: 768px) {
  /* ⚠⚠ ПРСТ, НЕ МИШ — правило из v6.50, ПРИМЕЊЕНО 11.09.2026 уз
     изричито одобрење корисника („веома ми је битан мобилни приказ
     да буде прегледно, да се лако уноси и визуелно буде перфектно").

     Дотад је правило стајало записано а нигде извршено. Мерено на
     390px пре промене, на страни Боравак:
       · поља     34 ком, висине 22–35px, слово 11.7px
       · квачице  314 ком, 13 × 13px
       · дугмад   149 ком, 20–34px, слово 11.7px

     ⚠ **16px у пољу није ствар укуса него понашање прегледача:**
     испод 16px iOS Safari САМ ЗУМИРА страну чим поље добије фокус, и
     корисник после уноса остане на зумираном приказу. Дежурни у 22h
     у ходнику тако после сваког поља враћа страну прстима.

     ⚠ Висина 38px је најмања додирна мета која овде има смисла
     (Apple HIG тражи 44pt, Material 48dp).

     ⚠ Дугмад НЕ добијају 16px — она не отварају тастатуру, па не
     зумирају ништа; њима треба само висина. Слово им остаје мање да
     трака са дугмадима не порасте преко пола екрана. */
  /* ⚠ БРОЈЕВИ ЖИВЕ НА ЈЕДНОМ МЕСТУ. Поједини екрани имају своје
     ситније поље у сопственом `<style>` блоку (прозивка, викенд
     распоред, пријаве…); такав блок стоји ПОСЛЕ овог фајла, па при
     истој специфичности побеђује. Ти екрани зато носе свој
     `@media`, али НЕ и своју вредност — узимају ове променљиве.
     Тако „16px" не стоји у пет фајлова који се при првој измени
     разиђу (в. `docs/GRESKE.md`, „правило на два места"). */
  :root {
    --mob-slovo: 16px;   /* слово у пољу — испод овога iOS зумира  */
    --mob-polje: 40px;   /* висина поља за унос                    */
    --mob-meta:  38px;   /* најмања додирна мета (дугме, квачица)  */
  }

  .form-control,
  input[type="text"].form-control, input[type="date"],
  input[type="number"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"],
  select.form-control, textarea.form-control,
  select.stampa-birac {
    font-size: var(--mob-slovo);
    min-height: var(--mob-polje);
    padding: .5rem .75rem;
  }
  textarea.form-control { min-height: 76px; }

  /* ⚠ Квачица и радио дугме су на прозивци ГЛАВНА контрола: дежурни
     њима означава триста ђака. 13px је мета коју прст промаши, па се
     погоди суседни ред — тиха грешка која мења новац (в. §4).
     Мета се шири и кроз сам елемент и кроз размак око њега. */
  input[type="checkbox"], input[type="radio"] {
    width: 22px; height: 22px;
    flex: none;
  }
  /* Натпис уз квачицу мора да буде део мете, не само сама кутија. */
  label > input[type="checkbox"], label > input[type="radio"] {
    margin-right: .45rem;
  }

  /* Дугме: висина да се погоди прстом, слово остаје читко а не
     крупно. `inline-flex` да текст остане поравнат кад порасте. */
  .btn, button.btn, a.btn {
    min-height: var(--mob-meta);
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* ⚠ `btn-sm` НЕ СМЕ да буде изузетак од 38px. Управо њих има
     највише по редовима табела („Измени", „Обриши", „Вратио се"), а
     мета која се промаши најчешће је најмања. Мања остаје само
     ширина и слово, па се дугме и даље ЧИТА као лакше — исто како то
     раде Apple HIG и Material: мета се шири, изглед остаје. */
  .btn-sm { min-height: var(--mob-meta); }

  .navbar { padding: 0 .75rem; }
  .brand-naziv, .korisnik-ime { display: none; }
  .main-content { padding: .75rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; }

  /* Табеле: мање ћелије, ситнији фонт */
  .table { font-size: .85rem; }
  .table th, .table td { padding: .5rem .55rem; }

  /* Заглавље стране: мањи наслов, дугмад пуном ширином реда */
  .page-header h2 { font-size: 1.2rem; }
  .page-header-actions { margin-left: 0; width: 100%; }
  .page-header-actions .btn { padding: .45rem .7rem; font-size: .82rem; }

  /* Мање битне колоне се склањају — све стаје без скроловања */
  .skrij-mob { display: none !important; }

  /* Сумарне картице: две по реду, компактније */
  .fin-kartice, .stat-kartice { gap: .6rem; }

  /* Модали скоро пуном ширином */
  .modal-kutija { width: calc(100vw - 1.5rem) !important; padding: 1rem !important; }
}
@media (max-width: 560px) {
  /* Филтери: свако поље у свом реду — лакше куцање */
  .filter-group { flex: 1 1 100%; }
  .filter-row .btn { width: 100%; }
  h1 { font-size: 1.3rem; }
}

/* ── Print ── */
/* ══ ШТАМПА ═══════════════════════════════════════════════════════
   Раније је овде било шест редова, па је свака табела на папиру
   излазила са колонама једнаких ширина (име стиснуто, „Пол" широк
   колико и школа), без понављања заглавља и са редовима пресеченим
   на прелому стране. Испод је правило за све табеле у систему.
   Ранг-листе имају свој распоред и намерно се не дирају.        */
@media print {
  /* ── Ништа од окружења не иде на папир ───────────────────────────
     Са екрана се штампа СВЕ што се види, укључујући дугмад, филтере,
     картице са бројевима и оквире панела. На папиру ништа од тога не
     значи — троши мастило и гура табелу на следећу страну. Остаје
     наслов, табела и оно што је садржај.                            */
  .navbar, .footer, .no-print, .btn, .filter-form, .alert-close,
  .page-header-actions, .pagination, .breadcrumb, .toast,
  .modal, .modal-pozadina, .sidebar, form.filter, .tabs,
  /* поља и дугмад — на папиру су мртва */
  input, select, textarea, button, label.form-label,
  .form-group, .filter-row, .filter-group, .search-box, .pretraga,
  /* картице са бројевима, херој блокови, брзе радње */
  .db-karte, .db-hero, .db-radnje, .db-brzi, .badge-sg,
  /* обавештења и модали */
  .alert, .pz-karton, .pz-traka, .pz-strana, .pz-trazi, .pz-nadjeni,
  .pz-dani, .pz-podnozje, .pz-izbor, .pz-nap,
  /* бочне и помоћне траке нових екрана */
  .kt-alati, .kt-tragaj, .pr-vrh form, .ju-dani
  { display: none !important; }

  /* ── Оквири се спљоште ────────────────────────────────────────
     Панели, сенке и заобљења су за екран. На папиру остаје само
     линија где раздваја садржај.                                   */
  .panel, .card, .table-wrapper, .tabela-omot, .pz-panel, .pz-glavno,
  .db-karta, .pr-mesec, .ju-odeljak {
    box-shadow: none !important; border: 0 !important;
    border-radius: 0 !important; background: transparent !important;
    padding: 0 !important; margin-bottom: 8pt !important;
    overflow: visible !important;
  }
  .panel-header, .pz-panel-vrh {
    background: none !important; color: #000 !important;
    border-bottom: .75pt solid #000 !important;
    padding: 0 0 2pt !important; font-weight: 700; font-size: 10pt;
  }
  /* Радни део прозивке се на папиру исправља у један стубац. */
  .pz-radna { display: block !important; }
  .pz-uc { display: block !important; padding: 2pt 0 !important; }

  body { background: #fff; font-size: 9.5pt; color: #000; }
  .main-content, .container { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
  a { color: #000; text-decoration: none; }

  /* ── Табеле ───────────────────────────────────────────────────
     `table-layout: auto` пушта прегледач да рачуна ширину по
     садржају. Уске колоне се држе у једном реду преко `nowrap`,
     а само име и адреса смеју да се преламају — тако име добије
     простор који је „Пол" иначе трошио.                          */
  table, .table { width: 100% !important; border-collapse: collapse; table-layout: auto; }
  .table th, .table td {
    padding: 3pt 5pt !important;
    border: .5pt solid #999 !important;
    vertical-align: top;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  /* Заглавље се понавља на свакој страни — без овога друга страна
     нема ниједан натпис изнад колона. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  /* Ред се не сече на прелому. */
  tr, .table tr { page-break-inside: avoid; break-inside: avoid; }

  /* Колоне које смеју да се преламају — све остале остају у реду */
  .kol-rast, td.kol-rast, th.kol-rast { white-space: normal; }
  /* Бројеви: једнака ширина цифара и десно поравнање, да се стубац чита */
  .kol-broj, td.kol-broj, th.kol-broj { text-align: right; font-variant-numeric: tabular-nums; }
  /* `width:1%` уз nowrap тера прегледач да колону скупи на садржај;
     ослобођена ширина иде колонама са .kol-rast (име, адреса). */
  .kol-uzak, td.kol-uzak, th.kol-uzak { text-align: center; width: 1%; }
  .kol-broj, td.kol-broj, th.kol-broj { width: 1%; }

  .table th {
    background: #2d6a4f !important; color: #fff !important;
    font-size: 8.5pt; letter-spacing: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .table-zebra tbody tr:nth-child(even) td {
    background: #f1f6f2 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* Наслов групе/одељка не сме да остане сам на дну стране */
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }

  /* Ситнице које на папиру немају смисла */
  .avatar-mini, .avatar-placeholder, .badge-sg { display: none !important; }
  .badge, .badge-grupa {
    background: none !important; color: #000 !important;
    border: .5pt solid #666 !important; padding: 0 2pt !important;
  }
}


/* ── Avatar mini u listi ucenika ── */
.avatar-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
  overflow: hidden;
}
.avatar-placeholder {
  color: #fff;
}
.avatar-placeholder.avatar-m { background: #6b9e84; }  /* muski - zelena */
.avatar-placeholder.avatar-z { background: #d99a8a; }  /* zenski - narandzasto-roze */
.avatar-placeholder svg { width: 22px; height: 22px; }


/* ── Kartica foto placeholder po polu ── */
.foto-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  color: #fff;
}
.foto-placeholder.foto-m { background: #2d6a4f; }
.foto-placeholder.foto-z { background: #7b3fa0; }
.foto-ucenik {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}
.btn-ukloni-foto {
  background: none;
  border: none;
  color: #c0392b;
  font-size: .72rem;
  cursor: pointer;
  padding: 2px;
  text-decoration: underline;
}
.btn-ukloni-foto:hover { color: #a02d22; }
.kartica-osnovno {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: .85rem;
  color: #555;
}
.kartica-osnovno span { white-space: nowrap; }


/* ══════════════════════════════════════════════════════════
   Dashboard & Admin — hero, kartice, brzi pristup
   ══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.db-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--clr-border-green);
  flex-wrap: wrap;
}
.db-hero-pozdrav {
  font-size: .9rem;
  color: var(--clr-muted);
  margin-bottom: .2rem;
}
.db-hero-ime {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--clr-primary);
  margin: 0 0 .4rem;
  line-height: 1.2;
}
.db-hero-sg { display: flex; align-items: center; gap: .75rem; }
.db-sg-tekst { font-size: .88rem; color: var(--clr-muted); }
.db-sg-tekst strong { color: var(--clr-primary); font-weight: 700; }

/* ── Kartice grid ── */
.db-karte {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: .85rem;
  margin-bottom: 1.75rem;
}

/* ── Pojedinačna kartica ── */
.db-karta {
  background: var(--clr-white);
  border-radius: 10px;
  padding: 1.2rem 1rem 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
  border: 1px solid var(--clr-border);
  border-top: 3px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.db-karta:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(0,0,0,.11); text-decoration: none; }
.db-karta--ok         { cursor: default; }
.db-karta--ok:hover   { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.db-karta--zelena     { border-top-color: #2d6a4f; }
.db-karta--plava      { border-top-color: #185fa5; }
.db-karta--narandzasta{ border-top-color: #e76f51; }
.db-karta--crvena     { border-top-color: #a32d2d; }
.db-karta--siva       { border-top-color: #999; }

.db-karta-gornji {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .45rem;
}
.db-karta-label {
  font-size: .74rem;
  font-weight: 600;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.3;
}
.db-karta-ikona {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: .3;
}
.db-karta--zelena      .db-karta-ikona { color: #2d6a4f; opacity: .55; }
.db-karta--plava       .db-karta-ikona { color: #185fa5; opacity: .55; }
.db-karta--narandzasta .db-karta-ikona { color: #e76f51; opacity: .65; }
.db-karta--crvena      .db-karta-ikona { color: #a32d2d; opacity: .65; }

.db-karta-broj {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: var(--font-heading);
  line-height: 1;
  color: #1a1a1a;
}
.db-karta--narandzasta .db-karta-broj { color: #e76f51; }
.db-karta--crvena      .db-karta-broj { color: #a32d2d; }
.db-karta--siva        .db-karta-broj { color: #888; }

.db-karta-sub {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--clr-muted);
  margin-top: .1rem;
}

/* ── Brzi pristup panel ── */
.db-brzi {
  display: flex;
  gap: 0;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  overflow: hidden;
}
.db-brzi-sekcija {
  flex: 1;
  padding: 1rem 1.1rem;
  min-width: 150px;
}
.db-brzi-sekcija + .db-brzi-sekcija {
  border-left: 1px solid #eef3f0;
}
.db-brzi-naslov {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-muted);
  margin-bottom: .6rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid #eef3f0;
}
.db-brzi-grid {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.db-brzi-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .38rem .6rem;
  border-radius: 6px;
  font-size: .83rem;
  font-weight: 500;
  color: var(--clr-primary);
  text-decoration: none;
  transition: background .12s;
  white-space: nowrap;
}
.db-brzi-btn:hover { background: var(--clr-primary-bg); text-decoration: none; }
.db-brzi-btn--prim { background: rgba(45,106,79,.07); font-weight: 600; }
.db-brzi-btn--prim:hover { background: var(--clr-primary); color: #fff; }

/* ── Responsive ── */
@media (max-width: 1200px) { .db-karte { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  {
  .db-karte { grid-template-columns: repeat(2, 1fr); }
  .db-brzi  { flex-wrap: wrap; }
  .db-brzi-sekcija { min-width: 45%; }
  .db-brzi-sekcija + .db-brzi-sekcija { border-left: none; border-top: 1px solid #eef3f0; }
}
@media (max-width: 480px)  { .db-karte { grid-template-columns: 1fr 1fr; } }

/* ═══ Телефон: ништа не сме да гура страну у ширину ═════════════
   Мерено на 390px — пет страна је имало водоравни клизач, а на
   телефону он значи да пола садржаја испадне из видокруга.        */
@media (max-width: 820px) {
  /* Погледи постављају број колона ИНЛАЈН (style="grid-template-
     columns:repeat(5,1fr)"), а инлајн побеђује таблицу стилова —
     зато !important. Без њега пет картица остаје пет и на 390px. */
  .db-karte { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
}
@media (max-width: 620px) {
  .db-karte { grid-template-columns: 1fr 1fr !important; gap: .6rem; }
  /* Ставка мреже се подразумевано не скупља испод свог садржаја
     (min-width:auto). Отуда табеле шире од екрана и кад стоје у
     оквиру који уме да клиза. */
  .dezurstvo-grid > *, .kartica-grid > *, .detalj-grid > * { min-width: 0; }
  .mesec-nav { flex-wrap: wrap; gap: .5rem; }
  /* Поља обрасца се секу на ширину екрана, не обрнуто. */
  .form-control, select.form-control, input.form-control, textarea.form-control,
  .form-group, .form-group label { max-width: 100%; }
  /* Табела која није у клизајућем оквиру добија свој. */
  .panel > .table, .panel-body > .table { display: block; overflow-x: auto; }
  /* Двоколонски распореди се прелому у један стубац. */
  .sobe-dve-kolone { flex-wrap: wrap; }
  .sobe-dve-kolone > * { flex: 1 1 100% !important; min-width: 0; }
  .filter-row > * { min-width: 0; }
}

/* ── Inline edit oznake odeljenja ── */
.od-prikaz {
  display: inline-block;
  padding: .15rem .4rem;
  transition: background .15s, color .15s;
  border-radius: 4px;
  user-select: none;
}
.od-prikaz:hover {
  background: rgba(231,111,81,.1);
  color: var(--clr-accent);
  cursor: pointer;
}
.od-prikaz::after {
  content: ' ›';
  font-size: .9rem;
  font-weight: 700;
  color: var(--clr-accent);
  opacity: 0;
  transition: opacity .15s;
}
tr:hover .od-prikaz::after { opacity: 1; }

.btn-oznaka-ok {
  background: var(--clr-primary);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: .2rem .45rem;
  cursor: pointer;
  font-size: .82rem;
  line-height: 1;
}
.btn-oznaka-ok:hover { background: #1b4d38; }

.btn-oznaka-x {
  background: #eee;
  color: #555;
  border: none;
  border-radius: 4px;
  padding: .2rem .4rem;
  cursor: pointer;
  font-size: .82rem;
  line-height: 1;
}
.btn-oznaka-x:hover { background: #ddd; }


/* ── Трака „систем је затворен за рад" ─────────────────────────
   Види је само ко прође брану (admin, по избору и рачуноводство).
   Стоји на свакој страни намерно: брана се пали ради увоза и лако
   се заборави спуштена, а док стоји нико други не може да ради. */
.odr-traka {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .6rem .9rem;
  border: 1px solid #e6cf94; border-left: 4px solid #d99a1c;
  border-radius: 8px; background: #fdf6e3; color: #7a5c00;
  font-size: .88rem; line-height: 1.5;
}
.odr-traka svg { flex: 0 0 auto; margin-right: 0 !important; }
.odr-traka span { flex: 1 1 auto; min-width: 0; }
.odr-traka a {
  flex: 0 0 auto; padding: .25rem .7rem; border-radius: 999px;
  background: #7a5c00; color: #fff; font-weight: 600;
  text-decoration: none; font-size: .82rem;
}
.odr-traka a:hover { background: #5d4600; }
@media print { .odr-traka { display: none; } }

/* ── Модали ─────────────────────────────────────────────────────
   ⚠ Правило је ОВДЕ, у једном фајлу, јер класе користи пет екрана.
   До 02.09.2026. живело је расуто: `finansije/karton.php` и
   `finansije/racunovodstvo.php` имали су свој <style>, `dezurstvo`
   стил на самом елементу, а `boravak/index.php` и `finansije/otisli.php`
   НИШТА — њихови модали су се отварали као обичан <div> на дну
   странице, ван екрана. Корисник је то видео као „дугме не ради".
   Ко дода нов модал: класе су ове, ништа се не преписује. */
.modal-pozadina {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; z-index: 200;
}
.modal-kutija {
  background: #fff; border-radius: 12px; padding: 1.4rem 1.5rem;
  width: 92%; max-width: 560px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  max-height: 90vh; overflow-y: auto;
}

/* ── Имењаци ──────────────────────────────────────────────────
   Ученик који дели и презиме и име са неким добија иза имена
   почетно слово оца (в. `Ucenik::dodaciZaImenjake`). Истакнуто је,
   али не виче: то је разлика која се тражи погледом, не боја која
   се прво примети. Класа стоји у `main.css` јер је исти знак на
   више екрана — списак ученика, боравак, задужења. */