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;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Persistent work-order actions stay reachable while editing long forms. */
.work-order-form {
  padding-bottom: 5.5rem;
}

.work-order-fixed-actions {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem;
  border: 1px solid var(--theme-border, #343c48);
  border-radius: .75rem;
  background: var(--theme-surface, #202630);
  box-shadow: var(--theme-shadow, 0 .45rem 1.25rem rgba(0, 0, 0, .24));
}

.work-order-fixed-actions .btn {
  min-height: 2.65rem;
  white-space: nowrap;
}

@media (max-width: 576px) {
  .work-order-fixed-actions {
    right: .75rem;
    bottom: .75rem;
    left: .75rem;
  }

  .work-order-fixed-actions .btn {
    flex: 1 1 0;
  }
}

/* Mobile layout for field technicians: larger touch targets and clear card rhythm. */
@media (max-width: 767.98px) {
  .mobile-work-order,
  .work-order-edit-page {
    width: 100%;
    max-width: 100%;
    margin-top: .65rem !important;
    padding-right: .65rem;
    padding-bottom: 1rem;
    padding-left: .65rem;
  }

  .mobile-work-order > .no-print:first-child,
  .work-order-edit-page .edit-page-header {
    margin-bottom: .85rem !important;
  }

  .mobile-work-order > .no-print:first-child {
    align-items: flex-start !important;
    gap: .65rem;
  }

  .mobile-work-order > .no-print:first-child h4 {
    margin: 0;
    font-size: 1.18rem;
    line-height: 1.2;
  }

  .mobile-work-order > .no-print:first-child > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: .35rem;
  }

  .mobile-work-order > .no-print:first-child > div .btn {
    width: 100%;
    min-height: 2.65rem;
    margin: 0 !important;
    padding: .5rem .35rem;
    font-size: .76rem;
  }

  .work-order-form {
    padding-bottom: calc(7rem + env(safe-area-inset-bottom));
  }

  .work-order-form > .card,
  .work-order-form .logistics-editor {
    margin-bottom: .8rem !important;
    border-radius: .85rem;
    overflow: hidden;
  }

  .work-order-form .card-header,
  .work-order-form .logistics-editor .card-header {
    min-height: 3rem;
    padding: .8rem .9rem;
    font-size: .88rem;
    font-weight: 750;
  }

  .work-order-form .card-body,
  .work-order-form .logistics-editor .card-body {
    padding: .85rem .8rem;
  }

  .work-order-form .row.g-3,
  .work-order-form .row.mb-3 {
    row-gap: .7rem !important;
  }

  .work-order-form label,
  .work-order-form .control-label {
    display: block;
    margin-bottom: .32rem;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.25;
  }

  .work-order-form .form-control,
  .work-order-form .form-select,
  .work-order-form select,
  .work-order-form textarea {
    min-height: 2.8rem;
    border-radius: .62rem;
    font-size: 16px;
  }

  .work-order-form textarea {
    min-height: 5.2rem;
  }

  .work-order-form .input-group > .form-control,
  .work-order-form .input-group > .form-select,
  .work-order-form .input-group > .btn {
    min-height: 2.8rem;
  }

  .work-order-fixed-actions {
    right: .55rem;
    bottom: max(.55rem, env(safe-area-inset-bottom));
    left: .55rem;
    gap: .45rem;
    padding: .45rem;
    border-radius: .85rem;
    backdrop-filter: blur(12px);
  }

  .work-order-fixed-actions .btn {
    min-height: 3rem;
    border-radius: .65rem;
    font-size: .88rem;
    font-weight: 700;
  }

  .work-order-edit-page .edit-page-header {
    margin-bottom: .85rem;
    border-radius: .85rem;
  }

  .work-order-edit-page .edit-title-wrap {
    gap: .65rem;
  }

  .work-order-edit-page .edit-title-icon {
    flex-basis: 2.55rem;
    width: 2.55rem;
    height: 2.55rem;
  }

  .work-order-edit-page .edit-page-title {
    font-size: 1.2rem;
  }

  .work-order-edit-page .edit-page-subtitle {
    font-size: .72rem;
  }
}

.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;
}

/* Zajednički izgled primarne akcije spremanja u obrascima. */
.btn.save-changes-button,
input.btn[type="submit"][value^="Spremi"] {
  min-height: 2.75rem;
  padding: 0.65rem 1.15rem;
  border-color: #2877ed;
  border-radius: 0.7rem;
  background: linear-gradient(135deg, #2877ed, #1557bd);
  color: #fff;
  font-weight: 650;
  box-shadow: 0 0.25rem 0.7rem rgba(21, 87, 189, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn.save-changes-button:hover,
input.btn[type="submit"][value^="Spremi"]:hover {
  transform: translateY(-1px);
  border-color: #1557bd;
  background: linear-gradient(135deg, #3582f2, #1557bd);
  color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(21, 87, 189, 0.3);
}

.btn.save-changes-button:focus-visible,
input.btn[type="submit"][value^="Spremi"]:focus-visible {
  outline: 3px solid rgba(40, 119, 237, 0.3);
  outline-offset: 2px;
}

.btn.save-changes-button:disabled,
input.btn[type="submit"][value^="Spremi"]:disabled {
  transform: none;
  box-shadow: none;
  filter: grayscale(0.25);
  opacity: 0.65;
}

/* Kompaktni indeksni prikazi dokumenata: računi, e-računi i primke. */
.compact-index-page { padding-top: 1rem; padding-bottom: 2rem; }
.compact-index-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; padding:.45rem 0 .8rem; border-bottom:1px solid rgba(255,255,255,.14); }
.compact-index-header h1 { margin:0; color:#fff; font-size:clamp(1.4rem,3vw,1.85rem); font-weight:750; letter-spacing:-.025em; }
.compact-index-header small { display:block; margin-top:.2rem; color:rgba(255,255,255,.68); }
.compact-index-create { display:inline-flex; width:auto !important; align-items:center; gap:.4rem; min-height:2.35rem; margin:0 !important; padding:.45rem .8rem; border-radius:.55rem; font-size:.86rem; font-weight:650; white-space:nowrap; }
.compact-index-filter { align-items:end; padding:.7rem; border:1px solid rgba(255,255,255,.13); border-radius:.7rem; background:#202630; }
.compact-index-filter label { margin-bottom:.25rem; color:#aeb8c8; font-size:.7rem; font-weight:650; }
.compact-index-filter .form-control, .compact-index-filter .form-select, .compact-index-filter .btn { min-height:2.3rem; font-size:.82rem; }
.compact-index-table-wrap { overflow:hidden; border:1px solid #343c48; border-radius:.7rem; background:#202630; }
.compact-index-table { --bs-table-bg:#202630; --bs-table-color:#eef2f7; --bs-table-hover-bg:#29313d; --bs-table-hover-color:#fff; margin:0; vertical-align:middle; font-size:.8rem; }
.compact-index-table thead th { padding:.58rem .6rem; border-color:#39424f; background:#181d25; color:#aeb8c8; font-size:.66rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
.compact-index-table tbody td { padding:.5rem .6rem; border-color:#303844; }
.compact-index-table tbody td:first-child { font-weight:750; }
.compact-index-table .btn { width:auto !important; min-height:1.85rem; margin:0 !important; padding:.25rem .45rem; border-radius:.4rem; font-size:.72rem; white-space:nowrap; }
.compact-index-pagination { flex-wrap:wrap; gap:.2rem; margin-top:.8rem; margin-bottom:0; }
.compact-index-pagination .page-link { border-radius:.45rem; }
.compact-summary-card .card-body { padding:.7rem .85rem; }
.compact-summary-card small { display:block; min-height:1.1rem; font-size:.7rem; }

@media (max-width: 767.98px) {
  .compact-index-page { padding-top:.6rem; padding-left:.2rem; padding-right:.2rem; }
  .compact-index-header { padding:.25rem 0 .65rem; }
  .compact-index-header small { display:none; }
  .compact-index-filter { padding:.6rem; }
  .compact-index-filter .col-12, .compact-index-filter .col-6 { margin-bottom:0 !important; }
  .compact-index-table-wrap { overflow:visible; border:0; background:transparent; }
  .compact-index-table, .compact-index-table tbody, .compact-index-table tr, .compact-index-table td { display:block; width:100%; }
  .compact-index-table thead { display:none; }
  .compact-index-table tbody { display:grid; gap:.5rem; }
  .compact-index-table tbody tr { margin:0; padding:.58rem .7rem; border:1px solid #343c48; border-radius:.65rem; background:#202630; box-shadow:0 .2rem .55rem rgba(0,0,0,.12); }
  .compact-index-table tbody td { display:flex; position:static; align-items:center; justify-content:space-between; gap:.75rem; min-height:0; padding:.2rem 0; border:0; color:#eef2f7; text-align:right; font-size:.77rem; }
  .compact-index-table tbody td::before { content:attr(data-label); position:static; display:block; flex:0 0 42%; padding:0; color:#909bad; text-align:left; font-size:.65rem; font-weight:650; text-transform:none; }
  .compact-index-table tbody td:first-child { padding-bottom:.38rem; margin-bottom:.12rem; border-bottom:1px solid #343c48; font-size:.88rem; }
  .compact-index-table tbody td[data-label="Akcije"], .compact-index-table tbody td[data-label="Datoteka"], .compact-index-table tbody td[data-label="Preuzmi"] { display:inline-flex; width:auto; padding-top:.45rem; margin-right:.25rem; }
  .compact-index-table tbody td[data-label="Akcije"]::before, .compact-index-table tbody td[data-label="Datoteka"]::before, .compact-index-table tbody td[data-label="Preuzmi"]::before { display:none; }
  .compact-index-table .btn { min-width:2.25rem; min-height:2.1rem; padding:.3rem .5rem; }
  .compact-index-pagination { justify-content:center; }
  .compact-index-pagination .page-item:not(.active):not(:first-child):not(:last-child) { display:none; }
}

/* Ova pravila namjerno imaju veću specifičnost od starog responsive-tables.css. */
@media (max-width: 767.98px) {
  body .compact-index-page { padding-top:.55rem; padding-right:.15rem; padding-bottom:1.5rem; padding-left:.15rem; }
  body .compact-index-page .compact-index-header { display:flex; align-items:center; margin-bottom:.6rem; padding:.2rem 0 .6rem; }
  body .compact-index-page .compact-index-header h1 { margin:0; font-size:1.3rem; }
  body .compact-index-page .compact-index-create { width:auto !important; min-height:2.15rem; margin:0 !important; padding:.38rem .6rem; font-size:.76rem; }
  body .compact-index-page .compact-index-filter { margin-bottom:.6rem !important; padding:.5rem; gap:.4rem 0; }
  body .compact-index-page .compact-index-filter .form-control,
  body .compact-index-page .compact-index-filter .form-select,
  body .compact-index-page .compact-index-filter .btn { min-height:2.15rem; margin-bottom:0; padding:.35rem .55rem; font-size:.74rem; }
  body .compact-index-page .compact-index-table-wrap { overflow:visible; border:0; }
  body .compact-index-page .compact-index-table,
  body .compact-index-page .compact-index-table tbody,
  body .compact-index-page .compact-index-table tr,
  body .compact-index-page .compact-index-table td { display:block; width:100%; }
  body .compact-index-page .compact-index-table thead { display:none; }
  body .compact-index-page .compact-index-table tbody { display:grid; gap:.45rem; }
  body .compact-index-page .compact-index-table tbody tr { margin:0; padding:.5rem .65rem; border:1px solid #343c48; border-radius:.6rem; background:#202630; color:#eef2f7; }
  body .compact-index-page .compact-index-table tbody td { display:flex; position:static; align-items:center; justify-content:space-between; min-height:0; margin:0; padding:.17rem 0; border:0; color:#eef2f7; text-align:right; font-size:.74rem; line-height:1.3; }
  body .compact-index-page .compact-index-table tbody td::before { content:attr(data-label); position:static; display:block; flex:0 0 40%; color:#909bad; text-align:left; font-size:.62rem; font-weight:650; line-height:1.2; text-transform:none; }
  body .compact-index-page .compact-index-table tbody td:first-child { padding-bottom:.35rem; margin-bottom:.12rem; border-bottom:1px solid #343c48; font-size:.84rem; }
  body .compact-index-page .compact-index-table tbody td[data-label="Akcije"],
  body .compact-index-page .compact-index-table tbody td[data-label="Datoteka"],
  body .compact-index-page .compact-index-table tbody td[data-label="Preuzmi"] { display:inline-flex; width:auto; padding-top:.42rem; margin-right:.2rem; }
  body .compact-index-page .compact-index-table tbody td[data-label="Akcije"]::before,
  body .compact-index-page .compact-index-table tbody td[data-label="Datoteka"]::before,
  body .compact-index-page .compact-index-table tbody td[data-label="Preuzmi"]::before { display:none; }
  body .compact-index-page .compact-index-table .btn { width:auto !important; min-width:2.2rem; min-height:2rem; margin:0 !important; padding:.28rem .45rem; font-size:.68rem; }
  body .compact-index-page .compact-index-table td[data-label="Napomena"] { max-height:2.35rem; overflow:hidden; }
  body .compact-index-page .compact-index-pagination { justify-content:center; margin-top:.6rem; }
  body .compact-index-page .compact-index-pagination .page-link { padding:.35rem .55rem; font-size:.72rem; }
  body .compact-index-page .compact-summary-card .card-body { padding:.5rem .55rem; }
  body .compact-index-page .compact-summary-card small { overflow:hidden; font-size:.6rem; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
  body .compact-index-page .work-order-tools { display:grid !important; grid-template-columns:1fr; }
  body .compact-index-page .work-order-tools .btn-group { display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; }
  body .compact-index-page .work-order-tools .btn { width:100% !important; margin:0 !important; padding:.35rem .4rem; border-radius:.4rem !important; font-size:.65rem; }
  body .compact-index-page .work-orders-table .actions-column { display:grid; grid-template-columns:repeat(3,1fr); gap:.25rem; width:100%; }
  body .compact-index-page .work-orders-table .actions-column a { margin:0 !important; }
  body .compact-index-page .work-orders-table .actions-column .btn { width:100% !important; min-width:0; }
}
