/* MedApp - tema e panelit, me ngjyrat e Medicom (blu #223e92). */

:root,
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="auto"] {
  color-scheme: light;
  --primary: #223e92;
  --secondary: #223e92;
  --primary-fg: #ffffff;

  --body-fg: #1b2438;
  --body-bg: #ffffff;
  --body-quiet-color: #5a6479;
  --body-loud-color: #0f1626;

  --header-color: #1b2438;
  --header-branding-color: #223e92;
  --header-bg: #ffffff;
  --header-link-color: #223e92;

  --breadcrumbs-fg: #c6d0f2;
  --breadcrumbs-link-fg: #ffffff;
  --breadcrumbs-bg: #223e92;

  --link-fg: #223e92;
  --link-hover-color: #182c6b;
  --link-selected-fg: #182c6b;

  --hairline-color: #dfe4ef;
  --border-color: #c9d1e3;
  --darkened-bg: #eef1f8;
  --selected-bg: #e8eefb;

  --button-fg: #ffffff;
  --button-bg: #223e92;
  --button-hover-bg: #182c6b;
  --default-button-bg: #182c6b;
  --default-button-hover-bg: #101d4a;
  --object-tools-fg: #ffffff;
  --object-tools-bg: #5a6479;
  --object-tools-hover-bg: #3f4857;
}

body,
input,
select,
textarea,
button {
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  background: #f3f5fa;
}

/* ---- Koka me logo ---- */
#header {
  border-bottom: 3px solid #223e92;
  padding: 12px 32px;
}

#site-name a {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #1b2438;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}

#site-name a span {
  padding-left: 16px;
  border-left: 1px solid #dfe4ef;
}

img.medapp-logo {
  height: 38px;
  width: auto;
  display: block;
}

#user-tools {
  color: #5a6479;
}

#user-tools a {
  color: #223e92;
  border-bottom-color: transparent;
}

/* ---- Kuti dhe module ---- */
.module,
#changelist .results,
#changelist-filter {
  border-radius: 8px;
}

#changelist-filter h2 {
  background: #223e92;
  color: #ffffff;
}

/* ---- Tabelat: përmbajtja në mes ---- */
#result_list thead th,
#result_list tbody th,
#result_list tbody td {
  text-align: center;
  vertical-align: middle;
}

#result_list tbody td,
#result_list tbody th {
  padding-top: 12px;
  padding-bottom: 12px;
}

#result_list thead th {
  background: #eef1f8;
}

/* ---- Faqja e hyrjes ---- */
.login #container {
  width: 420px;
  max-width: 92vw;
  margin-top: 8vh;
  background: #ffffff;
  border: 1px solid #dfe4ef;
  border-radius: 14px;
  overflow: hidden;
}

.login #header {
  justify-content: center;
  border-bottom: 0;
  padding: 28px 24px 6px;
}

.login #content {
  padding: 18px 36px 30px;
}

.login .submit-row {
  padding: 0;
  margin-top: 18px;
  background: transparent;
  border: 0;
}

.login .submit-row input {
  width: 100%;
  height: 46px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
}

.login input[type="text"],
.login input[type="password"] {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid #c9d1e3;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 16px;
}

/* ---- Rregullime pas provës ---- */
#header #site-name a:link,
#header #site-name a:visited {
  color: #1b2438;
}

#header #site-name a span {
  color: #1b2438;
}

a.button,
a.button:link,
a.button:visited {
  text-decoration: none;
  color: #ffffff;
}

/* ---- Zilja e njoftimeve ---- */
.medapp-bell {
  position: relative;
  margin-left: auto;
  margin-right: 18px;
  width: 44px;
  height: 44px;
  border: 1px solid #dfe4ef;
  border-radius: 22px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.medapp-bell svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #223e92;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.medapp-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 10px;
  background: #b3261e;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Menuja e majtë në blu ---- */
#nav-sidebar {
  background: #223e92;
  border-right: 0;
}

#nav-sidebar,
#nav-sidebar * {
  color: #ffffff;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.2);
}

#nav-sidebar caption,
#nav-sidebar caption * {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  letter-spacing: 0.08em;
}

#nav-sidebar #nav-filter {
  background-color: #ffffff;
  color: #1b2438;
  border: 0;
  border-radius: 6px;
}

#nav-sidebar tr.current-model,
#nav-sidebar tr:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

/* ---- Faqja kryesore: modulet si karta në rrjetë ---- */
.dashboard #content-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  align-items: start;
}

.dashboard #content-main .module {
  margin: 0;
  background: #ffffff;
  border: 1px solid #dfe4ef;
  border-radius: 10px;
  overflow: hidden;
}

.dashboard #content-main .module caption {
  background: #eef1f8;
  color: #223e92;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---- Butonat e sipërm në blu ---- */
:root,
html[data-theme="light"],
html[data-theme="dark"],
html[data-theme="auto"] {
  --object-tools-bg: #223e92;
  --object-tools-hover-bg: #182c6b;
}

/* ---- Zilja: e zezë pa njoftime, e kuqe me njoftime ---- */
.medapp-bell svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.medapp-bell.ka-njoftime {
  border-color: #f1b9b5;
}

/* ---- Rregullim: sfondi blu i menusë (rregulli i mësipërm e bënte transparent) ---- */
#nav-sidebar {
  background-color: #223e92;
}

/* ---- Faqja kryesore: modulet janë tashmë në menunë e majtë, nuk i përsërisim ----
   Në ekran të gjerë (ku menuja është e dukshme) kartat fshihen; në telefon mbeten,
   sepse atje menuja është e mbledhur. */
@media (min-width: 1025px) {
  .dashboard #content-main {
    display: none;
  }
}

/* Fusha me gabim: e gjithë rreshti dhe kutia e fushës skuqen */
.form-row.errors,
.form-row:has(.errorlist) {
  background: #fdecec;
  border-left: 4px solid #c62828;
  border-radius: 4px;
}
.form-row.errors input,
.form-row.errors select,
.form-row.errors textarea,
.form-row.errors .select2-selection,
.form-row:has(.errorlist) input,
.form-row:has(.errorlist) select,
.form-row:has(.errorlist) textarea,
.form-row:has(.errorlist) .select2-selection,
[aria-invalid="true"] {
  border: 2px solid #c62828 !important;
  background-color: #fff5f5 !important;
}
.form-row.errors label,
.errorlist li,
.errornote {
  color: #c62828 !important;
  font-weight: 600;
}
td.errors,
.inline-related .errors {
  background: #fdecec;
}

/* ---- Kërkimi në menunë blu (varianti A) ---- */
#nav-sidebar #nav-filter {
  background-color: rgba(255, 255, 255, 0.14) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23c9d3f2' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px center;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 12px !important;
  padding: 11px 14px 11px 42px !important;
  font-size: 15px;
  box-sizing: border-box;
  width: 100%;
  outline: none;
}
#nav-sidebar #nav-filter::placeholder {
  color: #c9d3f2;
  opacity: 1;
}
#nav-sidebar #nav-filter:focus {
  background-color: #ffffff !important;
  color: #16224f !important;
  border-color: #ffffff !important;
}

/* ---- Karta e QR kodit ---- */
.qr-karte {
  display: inline-flex;
  gap: 22px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d9dff0;
  border-radius: 16px;
  padding: 22px 26px;
  box-shadow: 0 2px 10px rgba(34, 62, 146, 0.08);
}
.qr-karte img {
  width: 150px;
  height: 150px;
  border: 1px solid #e3e7f3;
  border-radius: 10px;
  padding: 8px;
  background: #ffffff;
}
.qr-karte .qr-veprime {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.qr-karte .qr-titulli {
  font-weight: 600;
  color: #16224f;
  font-size: 17px;
}
.qr-karte a.qr-btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  background: #223e92;
  color: #ffffff;
  border: 1.5px solid #223e92;
}
.qr-karte a.qr-btn:hover {
  background: #182c6b;
}
.qr-karte a.qr-btn.kontur {
  background: #ffffff;
  color: #223e92;
}
.qr-karte a.qr-btn.kontur:hover {
  background: #eef1f8;
}
.qr-karte a.qr-lidhje {
  color: #223e92;
  font-size: 14px;
  text-decoration: underline;
}


/* ---- Lista e përdoruesve (stili A: rreshta me avatar) ---- */
body.model-user.change-list #changelist .module { border: 0; background: transparent; }
body.model-user.change-list #toolbar {
  background: #ffffff; border: 1px solid #dfe4ef; border-radius: 14px;
  padding: 14px 16px; margin: 0 0 14px;
}
body.model-user.change-list #toolbar form > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.model-user.change-list #searchbar {
  height: 44px; min-width: 320px; padding: 0 14px 0 42px; border: 1.5px solid #c9d1e3;
  border-radius: 12px; font-size: 15px; box-sizing: border-box;
  background: #f7f8fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23223e92' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center;
}
body.model-user.change-list #searchbar:focus { outline: none; border-color: #223e92; background-color: #fff; }
body.model-user.change-list #toolbar input[type=submit] {
  height: 44px; padding: 0 22px; border-radius: 12px; border: 0; font-weight: 600; font-size: 15px;
  background: #223e92; color: #fff; cursor: pointer;
}
body.model-user.change-list #toolbar input[type=submit]:hover { background: #182c6b; }

body.model-user.change-list .actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #eef1f8; border: 1px solid #dfe4ef; border-radius: 12px; padding: 10px 14px; margin: 0 0 14px;
}
body.model-user.change-list .actions label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #16224f; margin: 0; }
body.model-user.change-list .actions select {
  height: 40px; line-height: 38px; min-width: 280px; padding: 0 12px; border: 1.5px solid #c9d1e3;
  border-radius: 10px; background: #fff; font-size: 14px;
}
body.model-user.change-list .actions button.button {
  height: 40px; padding: 0 22px; border-radius: 10px; border: 0; background: #223e92;
  color: #fff; font-weight: 600; cursor: pointer;
}
body.model-user.change-list .actions button.button:hover { background: #182c6b; }
body.model-user.change-list .actions .action-counter { color: #5a6479; font-size: 14px; }

.perd-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; background: #223e92; color: #fff; font-weight: 600; font-size: 14px;
  vertical-align: middle; margin-right: 12px;
}
.perd-avatar.perd-admin { background: #e07a2f; }
.perd-tekst { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 1.25; }
.perd-tekst b { color: #16224f; font-size: 15px; font-weight: 600; }
.perd-tekst small { color: #5a6479; font-size: 12px; }
.rol-etikete {
  display: inline-block; padding: 3px 10px; border-radius: 999px; background: #e8eefb;
  color: #223e92; font-size: 12px; font-weight: 600; margin: 1px 2px 1px 0;
}
.rol-etikete.rol-admin { background: #fdeede; color: #a8540f; }
.statusi { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.statusi-aktiv { background: #e3f4e8; color: #1c6b34; }
.statusi-joaktiv { background: #f1f1f1; color: #6b6b6b; }
.tik-po { color: #223e92; font-size: 18px; }
.tik-jo { color: #c3cadb; font-size: 18px; }

body.model-user.change-list #changelist-filter {
  background: #fff; border: 1px solid #dfe4ef; border-radius: 14px; padding: 6px 14px 14px;
}
body.model-user.change-list #changelist-filter h2 { background: transparent; color: #16224f; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }

/* ---- Rregullime: kërkimi pa lupë të dyfishtë, tabela pa lëvizje horizontale ---- */
body.model-user.change-list #toolbar label[for="searchbar"],
body.model-user.change-list #toolbar label[for="searchbar"] * { display: none !important; }
body.model-user.change-list #changelist-search #searchbar,
body.model-user.change-list #toolbar #searchbar {
  flex: 1 1 360px; width: auto !important; height: 46px !important; min-width: 280px;
  padding: 0 16px 0 44px !important; border: 1.5px solid #c9d1e3 !important; border-radius: 12px !important;
  box-sizing: border-box; font-size: 15px;
}
body.model-user.change-list #changelist .results { overflow-x: visible; }
.perd-avatar { width: 36px; height: 36px; margin-right: 10px; }

/* ---- Lista e përdoruesve: KARTA (stili C) ---- */
body.model-user.change-list #changelist .results { overflow: visible; }
body.model-user.change-list #result_list,
body.model-user.change-list #result_list tbody { display: block; border: 0; background: transparent; }
body.model-user.change-list #result_list thead { display: none; }
body.model-user.change-list #result_list tbody {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px;
}
body.model-user.change-list #result_list tbody tr {
  display: grid; grid-template-columns: 1fr 1fr; align-content: start; position: relative;
  background: #fff; border: 1px solid #dfe4ef; border-radius: 16px; padding: 20px;
  box-shadow: 0 2px 8px rgba(22, 34, 79, .05);
}
body.model-user.change-list #result_list tbody tr.selected { border-color: #223e92; background: #f3f6fd; }
body.model-user.change-list #result_list tbody tr td,
body.model-user.change-list #result_list tbody tr th {
  display: block; border: 0; background: transparent; padding: 0; text-align: left;
}
body.model-user.change-list #result_list td.action-checkbox { position: absolute; top: 16px; right: 16px; }
body.model-user.change-list #result_list td.action-checkbox input { width: 18px; height: 18px; }
body.model-user.change-list #result_list th.field-perdoruesi_pamje { grid-column: 1 / -1; padding-bottom: 12px; padding-right: 30px; }
body.model-user.change-list #result_list th.field-perdoruesi_pamje a { display: flex; align-items: center; text-decoration: none; }
body.model-user.change-list #result_list td.field-roli_pamje,
body.model-user.change-list #result_list td.field-njesite_pamje { padding-bottom: 12px; font-size: 13px; color: #223e92; font-weight: 600; }
body.model-user.change-list #result_list td.field-njesite_pamje { text-align: right; }
body.model-user.change-list #result_list td[class*="field-dok_"],
body.model-user.change-list #result_list td.field-stok_leviz,
body.model-user.change-list #result_list td.field-klient_ndryshon,
body.model-user.change-list #result_list td.field-pajisje_ndryshon,
body.model-user.change-list #result_list td.field-kontrata_sheh,
body.model-user.change-list #result_list td.field-administrator {
  display: flex !important; align-items: center; gap: 8px; padding: 5px 0 !important; font-size: 13px;
}
body.model-user.change-list #result_list td.field-roli_pamje { border-top: 1px solid #eef1f8; padding-top: 12px; grid-column: 1 / -1; }
body.model-user.change-list #result_list td.field-njesite_pamje { grid-column: 1 / -1; text-align: left; font-weight: 400; color: #5a6479; padding-top: 0; }
body.model-user.change-list #result_list td .tik-po,
body.model-user.change-list #result_list td .tik-jo { font-size: 16px; line-height: 1; }
body.model-user.change-list #result_list td.field-dok_sheh::after { content: "Sheh dokumente"; }
body.model-user.change-list #result_list td.field-dok_shton::after { content: "Shton dokumente"; }
body.model-user.change-list #result_list td.field-dok_ndryshon::after { content: "Ndryshon dokumente"; }
body.model-user.change-list #result_list td.field-stok_leviz::after { content: "Lëvizje stoku"; }
body.model-user.change-list #result_list td.field-klient_ndryshon::after { content: "Klientë"; }
body.model-user.change-list #result_list td.field-pajisje_ndryshon::after { content: "Pajisje"; }
body.model-user.change-list #result_list td.field-kontrata_sheh::after { content: "Kontrata"; }
body.model-user.change-list #result_list td.field-administrator::after { content: "Aprovon / anulon"; }
body.model-user.change-list #result_list td:has(.tik-jo)::after { color: #a3abc0; }
body.model-user.change-list #result_list td.field-dok_sheh { border-top: 1px solid #eef1f8; padding-top: 12px !important; }
body.model-user.change-list #result_list td.field-dok_shton { border-top: 1px solid #eef1f8; padding-top: 12px !important; }
body.model-user.change-list #result_list td.field-veprime_pamje {
  grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef1f8;
}
.kv-btn {
  flex: 1; text-align: center; padding: 9px; border-radius: 10px; font-size: 13px; font-weight: 600;
  border: 1.5px solid #223e92; color: #223e92; text-decoration: none; background: #fff;
}
.kv-btn.kv-plote { background: #223e92; color: #fff; }
.kv-btn:hover { opacity: .88; }
.perd-avatar { width: 52px; height: 52px; font-size: 18px; }
.perd-tekst b { font-size: 17px; }

/* ===== Faqet e formave si KARTA (dokumenti, furnitori, klienti, kontrata, pajisja) ===== */
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px;
  background: #fff; border: 1px solid #dfe4ef; border-radius: 16px; padding: 20px 22px; margin: 0 0 16px;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned > h2 {
  grid-column: 1 / -1; background: none; color: #223e92; padding: 0; margin: 0; font-size: 13px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .form-row {
  padding: 0 !important; border: 0 !important; overflow: visible; min-width: 0;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .form-row:has(textarea) { grid-column: 1 / -1; }
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .form-row > div,
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .flex-container {
  display: flex; flex-direction: column; align-items: stretch; gap: 5px;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned label {
  float: none !important; width: auto !important; padding: 0 !important; display: block;
  font-size: 12px; font-weight: 600; color: #5a6479; line-height: 1.3;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned input:is([type=text], [type=number], [type=email], [type=date], [type=time], [type=url], [type=tel], [type=password]),
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned select,
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned textarea {
  width: 100% !important; box-sizing: border-box; min-height: 42px; padding: 8px 12px; border: 1.5px solid #c9d1e3;
  border-radius: 10px; background: #f7f8fc; font-size: 14px; line-height: 1.3;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .vDateField,
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .vTimeField { width: 70% !important; }
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .readonly,
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned label + div.readonly {
  margin: 0 !important; padding: 10px 12px !important; background: #eef1f8; border-radius: 10px; font-weight: 600; color: #16224f; min-height: 42px; box-sizing: border-box;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .help,
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned div.help {
  margin: 0 !important; padding: 0 !important; font-size: 12px; color: #7a8499;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) .select2-container { width: 100% !important; min-width: 0; }
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) .select2-container .select2-selection--single { min-height: 42px; border: 1.5px solid #c9d1e3; border-radius: 10px; background: #f7f8fc; }
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) .select2-selection__rendered { line-height: 38px !important; }
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) .select2-selection__arrow { height: 40px !important; }

/* Rreshtat (inline) si kartë, pa shirit horizontal */
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) .inline-group {
  background: #fff; border: 1px solid #dfe4ef; border-radius: 16px; padding: 20px 22px; margin: 0 0 16px; overflow: visible;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) .inline-group h2 {
  background: none; color: #223e92; padding: 0 0 10px; margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
body.change-form .inline-group .tabular, body.change-form .inline-group fieldset.module { border: 0; overflow: visible; background: transparent; }
body.change-form .inline-group table { width: 100%; table-layout: fixed; border-collapse: collapse; }
body.change-form .inline-group thead th {
  background: none; color: #5a6479; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  border: 0; border-bottom: 1px solid #eef1f8; padding: 8px 4px; white-space: normal; text-align: left;
}
body.change-form .inline-group tbody td { padding: 8px 4px; border-bottom: 1px solid #eef1f8; vertical-align: middle; min-width: 0; }
body.change-form .inline-group td input:not([type=checkbox]), body.change-form .inline-group td select, body.change-form .inline-group td textarea {
  width: 100% !important; box-sizing: border-box; min-height: 38px; padding: 6px 8px; border: 1.5px solid #c9d1e3; border-radius: 8px; background: #f7f8fc;
}
body.change-form .inline-group td .select2-container { width: 100% !important; min-width: 0; }
body.change-form .inline-group th.original, body.change-form .inline-group td.original { width: 0; padding: 0; border: 0; overflow: hidden; }
body.change-form .inline-group th.column-artikulli { width: 22%; }
body.change-form .inline-group th.column-pershkrimi { width: 25%; }
body.change-form .inline-group th.column-njesia_matese { width: 10%; }
body.change-form .inline-group th.column-sasia { width: 8%; }
body.change-form .inline-group th.column-cmimi { width: 11%; }
body.change-form .inline-group th.column-cmimi_me_tvsh_pamje { width: 11%; }
body.change-form .inline-group th.column-totali_pamje { width: 11%; }
body.change-form .inline-group td.field-cmimi_me_tvsh_pamje, body.change-form .inline-group td.field-totali_pamje { font-weight: 600; color: #16224f; }
body.change-form .inline-group .add-row a { display: inline-block; padding: 9px 18px; border: 1.5px dashed #9aa5c0; border-radius: 10px; color: #223e92; background: #fff; font-weight: 600; }

/* Kartela anash (vetëm te dokumenti, kur JS e aktivizon) */
body.dok-me-anash #content-main form > div { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 20px; align-items: start; }
body.dok-me-anash #content-main form > div > * { grid-column: 1; min-width: 0; }
body.dok-me-anash #content-main form > div > .dok-anash { grid-column: 2; grid-row: 1 / span 20; position: sticky; top: 12px; align-self: start; }
@media (max-width: 1100px) {
  body.dok-me-anash #content-main form > div { grid-template-columns: minmax(0, 1fr); }
  body.dok-me-anash #content-main form > div > .dok-anash { grid-column: 1; grid-row: auto; position: static; }
}
.dok-karte { background: #fff; border: 1px solid #dfe4ef; border-radius: 16px; padding: 20px 22px; margin: 0 0 16px; }
.dok-karte h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #223e92; background: none; padding: 0; font-weight: 600; }
.dok-tot { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.dok-tot > div { display: flex; justify-content: space-between; }
.dok-tot .dok-total { font-size: 19px; font-weight: 700; color: #16224f; border-top: 1px solid #dfe4ef; padding-top: 8px; margin-top: 4px; }
.dok-shenim { font-size: 13px; color: #5a6479; margin: 8px 0 0; }
#dok-tvsh-vendi { margin-top: 14px; }
#dok-tvsh-vendi .form-row { padding: 0 !important; border: 0 !important; }
#dok-tvsh-vendi label { float: none !important; width: auto !important; padding: 0 !important; display: block; font-size: 12px; font-weight: 600; color: #5a6479; margin-bottom: 5px; }
#dok-tvsh-vendi select { width: 100% !important; min-height: 42px; border: 1.5px solid #c9d1e3; border-radius: 10px; background: #f7f8fc; padding: 8px 12px; }
#dok-tvsh-vendi .help, #dok-tvsh-vendi div.help { margin: 6px 0 0 !important; padding: 0 !important; font-size: 12px; color: #7a8499; }
#dok-veprime-vendi .submit-row {
  display: flex; flex-direction: column; gap: 8px; background: none; border: 0; padding: 0; margin: 0; box-shadow: none; overflow: visible;
}
#dok-veprime-vendi .submit-row input[type=submit], #dok-veprime-vendi .submit-row a.closelink {
  float: none !important; width: 100%; height: 44px; margin: 0 !important; border-radius: 12px; font-weight: 600; font-size: 14px;
  background: #fff; color: #223e92; border: 1.5px solid #223e92; cursor: pointer; text-align: center; box-sizing: border-box; line-height: 40px; padding: 0 12px;
}
#dok-veprime-vendi .submit-row input[type=submit].default { background: #223e92; color: #fff; order: -1; }
#dok-veprime-vendi .submit-row .deletelink-box { float: none !important; margin: 4px 0 0; order: 9; text-align: center; }
#dok-veprime-vendi .submit-row a.deletelink { background: none; color: #b3261e; border: 0; height: auto; text-decoration: underline; padding: 0; }
.dok-dalje { display: flex; gap: 8px; margin-top: 14px; }
.dok-btn {
  flex: 1; display: block; text-align: center; padding: 10px; border-radius: 12px; border: 1.5px solid #223e92; color: #223e92;
  font-weight: 600; font-size: 14px; background: #fff; cursor: pointer; text-decoration: none; list-style: none; box-sizing: border-box;
}
.dok-btn::-webkit-details-marker { display: none; }
.dok-btn:hover { background: #eef1f8; }
.dok-eksporto { flex: 1; position: relative; }
.dok-formatet {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #dfe4ef; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(22, 34, 79, .15); overflow: hidden; z-index: 20;
}
.dok-formatet a { display: block; padding: 10px 14px; color: #16224f; text-decoration: none; font-weight: 600; font-size: 14px; }
.dok-formatet a:hover { background: #eef1f8; }

/* ===== Rregullime: pa lëvizje horizontale, kolona të rreshtuara ===== */
body.change-form { overflow-x: hidden; }
body.change-form #content, body.change-form .main, body.change-form .main > .content, body.change-form #content-main { min-width: 0; max-width: 100%; }
body.change-form #content-main form { max-width: 100%; }
body.change-form fieldset.module, body.change-form .inline-group { max-width: 100%; box-sizing: border-box; }

body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned { align-items: start; }
/* Zëvendëson rregullin e mëparshëm kolonë-nën-kolonë: etiketa sipër, fusha poshtë, ikonat në të njëjtin rresht */
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .form-row > div {
  display: block;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .flex-container {
  display: flex; flex-flow: row wrap; align-items: center; gap: 5px 8px;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .flex-container > label { flex: 0 0 100%; }
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .flex-container > :is(input, select, textarea, .related-widget-wrapper, .select2-container, .readonly) { flex: 1 1 0; min-width: 0; }
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .flex-container > .readonly { flex-basis: 100%; }
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .datetimeshortcuts { flex: none; white-space: nowrap; font-size: 12px; margin: 0; }
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .vDateField,
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .vTimeField { width: auto !important; }
/* Ikonat pranë listave: vetëm "+", me madhësi të vogël, pa u shtyrë poshtë */
body.change-form .related-widget-wrapper { display: flex; align-items: center; gap: 8px; width: 100%; }
body.change-form .related-widget-wrapper > select, body.change-form .related-widget-wrapper > .select2-container { flex: 1 1 0; min-width: 0; }
body.change-form .related-widget-wrapper .related-widget-wrapper-link { flex: none; line-height: 0; }
body.change-form .related-widget-wrapper .change-related, body.change-form .related-widget-wrapper .delete-related, body.change-form .related-widget-wrapper .view-related { display: none; }
body.change-form .related-widget-wrapper img { width: 18px; height: 18px; }

/* ===== v4: kalendari brenda fushës së datës; rreshtat pa shirit, për PC / tablet / telefon ===== */
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .flex-container:has(.datetimeshortcuts) { position: relative; }
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .flex-container > .datetimeshortcuts {
  position: absolute; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 6px; line-height: 1; z-index: 2;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .flex-container:has(.datetimeshortcuts) > input { padding-right: 96px; }
body.change-form .datetimeshortcuts .date-icon { margin: 0; vertical-align: middle; }

/* Rreshtat: pa kurrfarë shiriti */
body.change-form .inline-group, body.change-form .inline-group .tabular, body.change-form .inline-group fieldset.module { overflow: visible !important; }
body.change-form .inline-group table { table-layout: fixed; width: 100%; }
body.change-form .inline-group th, body.change-form .inline-group td { overflow-wrap: anywhere; }
body.change-form .inline-group th.original, body.change-form .inline-group td.original { width: 0; max-width: 0; padding: 0 !important; overflow: hidden; border: 0; font-size: 0; }
body.change-form .inline-group th.column-artikulli { width: 21%; }
body.change-form .inline-group th.column-pershkrimi { width: 24%; }
body.change-form .inline-group th.column-njesia_matese { width: 9%; }
body.change-form .inline-group th.column-sasia { width: 8%; }
body.change-form .inline-group th.column-cmimi { width: 11%; }
body.change-form .inline-group th.column-cmimi_me_tvsh_pamje { width: 10%; }
body.change-form .inline-group th.column-totali_pamje { width: 10%; }
body.change-form .inline-group th:last-child { width: 7%; }
body.change-form .inline-group td.delete { text-align: center; }

@media (max-width: 1100px) {
  body.change-form .inline-group table, body.change-form .inline-group tbody { display: block; width: 100%; }
  body.change-form .inline-group thead { display: none; }
  body.change-form .inline-group tr.form-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; position: relative;
    border: 1px solid #dfe4ef; border-radius: 12px; padding: 14px 14px 12px; margin: 0 0 12px; background: #fbfcfe;
  }
  body.change-form .inline-group tr.empty-form { display: none; }
  body.change-form .inline-group tr.form-row > td { display: block; border: 0; padding: 0; min-width: 0; }
  body.change-form .inline-group tr.form-row > td.original { display: none; }
  body.change-form .inline-group td.field-artikulli, body.change-form .inline-group td.field-pershkrimi { grid-column: 1 / -1; }
  body.change-form .inline-group td.delete { position: absolute; top: 8px; right: 10px; z-index: 3; }
  body.change-form .inline-group td.field-artikulli { padding-right: 34px; }
  body.change-form .inline-group td[class*="field-"]::before {
    display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: #5a6479; text-transform: uppercase; letter-spacing: .04em;
  }
  body.change-form .inline-group td.field-artikulli::before { content: "Artikulli nga stoku"; }
  body.change-form .inline-group td.field-pershkrimi::before { content: "Përshkrimi"; }
  body.change-form .inline-group td.field-njesia_matese::before { content: "Njësia matëse"; }
  body.change-form .inline-group td.field-sasia::before { content: "Sasia"; }
  body.change-form .inline-group td.field-cmimi::before { content: "Çmimi pa TVSH"; }
  body.change-form .inline-group td.field-cmimi_me_tvsh_pamje::before { content: "Çmimi me TVSH"; }
  body.change-form .inline-group td.field-totali_pamje::before { content: "Totali pa TVSH"; }
  body.change-form .inline-group tr.add-row { display: block; border: 0; background: none; padding: 0; }
  body.change-form .inline-group tr.add-row > td { display: block; padding: 0; border: 0; }
}

/* ===== v5: kalendari brenda fushës së datës, pavarësisht nga struktura ===== */
body.change-form .form-row:has(.datetimeshortcuts) { position: relative; }
body.change-form .form-row:has(.datetimeshortcuts) .datetimeshortcuts {
  position: absolute !important; right: 12px; bottom: 11px; top: auto; left: auto; display: flex; align-items: center; gap: 6px;
  line-height: 1; margin: 0 !important; padding: 0; z-index: 3; white-space: nowrap; font-size: 12px;
}
body.change-form .form-row:has(.datetimeshortcuts) input.vDateField,
body.change-form .form-row:has(.datetimeshortcuts) input.vTimeField { padding-right: 100px !important; width: 100% !important; flex: 1 1 100% !important; }

/* ===== v6: data pa rresht të tepërt (nbsp i Django), ikona në mes të fushës ===== */
body.change-form .flex-container { align-content: flex-start; }
body.change-form .form-row:has(.datetimeshortcuts) .flex-container {
  display: block !important; position: relative; font-size: 0; line-height: 0;
}
body.change-form .form-row:has(.datetimeshortcuts) .flex-container > label {
  display: block; font-size: 12px; line-height: 1.3; margin: 0 0 5px;
}
body.change-form .form-row:has(.datetimeshortcuts) .flex-container > input.vDateField,
body.change-form .form-row:has(.datetimeshortcuts) .flex-container > input.vTimeField {
  display: block; margin: 0; font-size: 14px; line-height: 1.3;
}
body.change-form .form-row:has(.datetimeshortcuts) { position: static; }
body.change-form .form-row:has(.datetimeshortcuts) .datetimeshortcuts {
  position: absolute !important; right: 12px !important; bottom: 0 !important; top: auto !important; height: 42px !important; display: flex !important; align-items: center !important; gap: 6px;
  font-size: 12px; line-height: 1; margin: 0 !important; padding: 0 !important;
}
body.change-form .datetimeshortcuts a.date-icon, body.change-form .datetimeshortcuts .date-icon { display: inline-block; vertical-align: middle; margin: 0; }

/* ===== v7: data është brenda <p class="date"> (struktura e vërtetë e Django) ===== */
body.change-form .flex-container > p.date, body.change-form .flex-container > p.time, body.change-form .flex-container > p.datetime {
  position: relative; display: block; flex: 1 1 100%; width: 100%; margin: 0 !important; padding: 0 !important;
  font-size: 0 !important; line-height: 0 !important; min-width: 0;
}
body.change-form .flex-container > p.date > input, body.change-form .flex-container > p.time > input {
  display: block; width: 100% !important; margin: 0 !important; padding-right: 100px !important; font-size: 14px; line-height: 1.3; box-sizing: border-box;
}
body.change-form .flex-container > p.date > .datetimeshortcuts, body.change-form .flex-container > p.time > .datetimeshortcuts {
  position: absolute !important; right: 12px !important; bottom: 0 !important; top: auto !important; height: 42px !important;
  display: flex !important; align-items: center !important; gap: 6px; margin: 0 !important; padding: 0 !important; font-size: 12px; line-height: 1;
}

/* ===== v8: rreshtat e datës me rrjet të fiksuar (nuk varen nga hapësirat e <p>) ===== */
body.change-form fieldset .form-row:has(.datetimeshortcuts) .flex-container {
  display: grid !important; grid-template-columns: minmax(0, 1fr); grid-template-rows: 15.6px auto; row-gap: 5px;
  position: relative; font-size: 0 !important; line-height: 0 !important; align-content: start;
}
body.change-form fieldset .form-row:has(.datetimeshortcuts) .flex-container > label {
  grid-row: 1; grid-column: 1; margin: 0 !important; padding: 0 !important; height: 15.6px; line-height: 15.6px !important; font-size: 12px; overflow: hidden;
}
body.change-form fieldset .form-row:has(.datetimeshortcuts) .flex-container > p.date,
body.change-form fieldset .form-row:has(.datetimeshortcuts) .flex-container > p.time,
body.change-form fieldset .form-row:has(.datetimeshortcuts) .flex-container > p.datetime { display: contents !important; }
body.change-form fieldset .form-row:has(.datetimeshortcuts) .flex-container input.vDateField,
body.change-form fieldset .form-row:has(.datetimeshortcuts) .flex-container input.vTimeField {
  grid-row: 2; grid-column: 1; align-self: start; display: block; margin: 0 !important; width: 100% !important;
  box-sizing: border-box; font-size: 14px; line-height: 1.3; padding-right: 100px !important;
}
body.change-form fieldset .form-row:has(.datetimeshortcuts) .flex-container .datetimeshortcuts {
  position: absolute !important; right: 12px !important; top: 20.6px !important; bottom: auto !important; height: 42px !important;
  display: flex !important; align-items: center !important; gap: 6px; margin: 0 !important; padding: 0 !important; font-size: 12px; line-height: 1;
}


/* ===== Fushat sipas llojit të dokumentit (data-dok-lloji vendoset nga tvsh.js) ===== */
#dok-hint { display: none; }
body[data-dok-lloji=""] #dok-hint { display: block; }
/* pa lloj: fshih gjithçka që varet nga lloji */
body[data-dok-lloji=""] :is(.form-row.field-klienti, .form-row.field-furnitori, .form-row.field-afati_pageses_dite, #rreshtat-group, #dok-totalet) { display: none !important; }
/* Klienti: vetëm për dokumentet e klientit */
body:is([data-dok-lloji="kerkese_oferte"], [data-dok-lloji="kerkese_porosi"]) .form-row.field-klienti { display: none !important; }
/* Furnitori: vetëm për kërkesat */
body:is([data-dok-lloji="oferta"], [data-dok-lloji="profature"], [data-dok-lloji="fature"], [data-dok-lloji="fletedergese"], [data-dok-lloji="raport_pune"]) .form-row.field-furnitori { display: none !important; }
/* Afati i pagesës: vetëm oferta, pro fatura, fatura */
body:is([data-dok-lloji="fletedergese"], [data-dok-lloji="kerkese_oferte"], [data-dok-lloji="kerkese_porosi"], [data-dok-lloji="raport_pune"]) .form-row.field-afati_pageses_dite { display: none !important; }
/* Raporti i punës: vetëm raporti i punës */
body.model-dokumenti[data-dok-lloji]:not([data-dok-lloji="raport_pune"]) fieldset.module:has(.form-row.field-pajisja) { display: none !important; }
/* Pa çmime: fshih kolonat e çmimeve dhe ndaj gjerësinë */
body.dok-pa-cmime .inline-group :is(th.column-cmimi, th.column-cmimi_me_tvsh_pamje, th.column-totali_pamje, td.field-cmimi, td.field-cmimi_me_tvsh_pamje, td.field-totali_pamje) { display: none !important; }
body.dok-pa-cmime .inline-group th.column-artikulli { width: 32%; }
body.dok-pa-cmime .inline-group th.column-pershkrimi { width: 38%; }
body.dok-pa-cmime .inline-group th.column-njesia_matese { width: 12%; }
body.dok-pa-cmime .inline-group th.column-sasia { width: 12%; }

.dok-udhezim { margin: 0 0 12px; padding: 10px 14px; background: #eef1f8; border-radius: 10px; color: #3d4668; font-size: 13px; line-height: 1.4; }

.dok-pershkrim { margin: 0 0 12px; padding: 0 4px; font-size: 12px; line-height: 1.4; color: #5a6479; }
body.change-form .inline-group th.column-cmimi_me_tvsh_pamje::after,
body.change-form .inline-group th.column-totali_pamje::after {
  content: "llogaritet vetë"; display: block; font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #8a93a8;
}
body.change-form .inline-group td.field-cmimi_me_tvsh_pamje, body.change-form .inline-group td.field-totali_pamje { color: #5a6479; }

/* ---- Listat (stili 1): kërkim i madh, filtra në kartë, tabelë me etiketa ---- */
body.change-list:not(.model-user) { overflow-x: hidden; }
body.change-list:not(.model-user) #changelist { border: 0; background: transparent; width: 100%; }
body.change-list:not(.model-user) #changelist .module,
body.change-list:not(.model-user) #changelist-form { border: 0; background: transparent; }
body.change-list:not(.model-user) #content-main { max-width: 100%; }
body.change-list:not(.model-user) #changelist .changelist-form-container {
  display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 100%;
}
body.change-list:not(.model-user) #toolbar {
  order: -2; background: #fff; border: 1px solid #dfe4ef; border-radius: 16px; padding: 14px 16px; margin: 0 0 14px;
}
body.change-list:not(.model-user) #toolbar form > div { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
body.change-list:not(.model-user) #toolbar label[for="searchbar"],
body.change-list:not(.model-user) #toolbar label[for="searchbar"] * { display: none !important; }
body.change-list:not(.model-user) #searchbar {
  flex: 1 1 300px; height: 46px; padding: 0 14px 0 44px; border: 1.5px solid #c9d1e3; border-radius: 12px;
  font-size: 15px; box-sizing: border-box;
  background: #f7f8fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23223e92' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px center;
}
body.change-list:not(.model-user) #searchbar:focus { outline: none; border-color: #223e92; background-color: #fff; }
body.change-list:not(.model-user) #toolbar input[type=submit] {
  height: 46px; padding: 0 24px; border-radius: 12px; border: 0; font-weight: 600; font-size: 15px;
  background: #223e92; color: #fff; cursor: pointer;
}
body.change-list:not(.model-user) #toolbar input[type=submit]:hover { background: #182c6b; }

/* filtrat: kartë horizontale me lista zgjedhëse (details) */
body.change-list:not(.model-user) #changelist-filter {
  order: -1; position: static; float: none; width: 100%; box-sizing: border-box; margin: 0;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid #dfe4ef; border-radius: 16px; padding: 14px 16px;
}
body.change-list:not(.model-user) #changelist-filter h2 {
  background: transparent; color: #5a6479; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  margin: 0; padding: 0; align-self: center; width: auto;
}
body.change-list:not(.model-user) #changelist-filter #changelist-filter-clear { margin: 0; align-self: center; }
body.change-list:not(.model-user) #changelist-filter details { position: relative; margin: 0; border: 0; padding: 0; }
body.change-list:not(.model-user) #changelist-filter summary {
  list-style: none; cursor: pointer; height: 40px; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; border: 1.5px solid #c9d1e3; border-radius: 10px; background: #fff;
  color: #16224f; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; box-sizing: border-box;
}
body.change-list:not(.model-user) #changelist-filter summary::-webkit-details-marker { display: none; }
body.change-list:not(.model-user) #changelist-filter summary::after { content: "▾"; color: #223e92; }
body.change-list:not(.model-user) #changelist-filter details[open] > summary { border-color: #223e92; background: #f3f6fd; }
body.change-list:not(.model-user) #changelist-filter details > ul {
  position: absolute; z-index: 30; top: 46px; left: 0; min-width: 220px; max-height: 320px; overflow: auto;
  margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid #dfe4ef;
  border-radius: 12px; box-shadow: 0 10px 28px rgba(22,34,79,.16);
}
body.change-list:not(.model-user) #changelist-filter details > ul li { margin: 0; padding: 0; border: 0; }
body.change-list:not(.model-user) #changelist-filter details > ul a {
  display: block; padding: 9px 12px; border-radius: 8px; color: #16224f; text-decoration: none; font-size: 14px;
}
body.change-list:not(.model-user) #changelist-filter details > ul a:hover { background: #eef1f8; }
body.change-list:not(.model-user) #changelist-filter li.selected a { background: #223e92; color: #fff; font-weight: 600; }

/* shiriti i veprimeve */
body.change-list:not(.model-user) .actions {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #eef1f8;
  border: 1px solid #dfe4ef; border-radius: 12px; padding: 10px 14px; margin: 0 0 14px;
}
body.change-list:not(.model-user) .actions label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #16224f; margin: 0; }
body.change-list:not(.model-user) .actions select {
  height: 40px; min-width: 240px; max-width: 100%; padding: 0 12px; border: 1.5px solid #c9d1e3; border-radius: 10px; background: #fff; font-size: 14px;
}
body.change-list:not(.model-user) .actions button.button {
  height: 40px; padding: 0 22px; border-radius: 10px; border: 0; background: #223e92; color: #fff; font-weight: 600; cursor: pointer;
}
body.change-list:not(.model-user) .actions .action-counter { color: #5a6479; font-size: 14px; }

/* tabela */
body.change-list:not(.model-user) #changelist .results {
  background: #fff; border: 1px solid #dfe4ef; border-radius: 16px; overflow: hidden; width: 100%;
}
body.change-list:not(.model-user) #result_list { width: 100%; border: 0; border-collapse: collapse; table-layout: auto; }
body.change-list:not(.model-user) #result_list thead th {
  background: #f7f8fc; color: #5a6479; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  text-align: left; padding: 11px 12px; border: 0;
}
body.change-list:not(.model-user) #result_list thead th a { color: #5a6479; }
body.change-list:not(.model-user) #result_list tbody td,
body.change-list:not(.model-user) #result_list tbody th {
  text-align: left; padding: 13px 12px; border: 0; border-top: 1px solid #eef1f8; font-size: 14px; background: #fff;
  word-break: break-word;
}
body.change-list:not(.model-user) #result_list tbody tr:hover td,
body.change-list:not(.model-user) #result_list tbody tr:hover th { background: #f7f9fe; }
body.change-list:not(.model-user) #result_list tbody tr.selected td,
body.change-list:not(.model-user) #result_list tbody tr.selected th { background: #f3f6fd; }
body.change-list:not(.model-user) #result_list tbody th a { color: #223e92; font-weight: 600; text-decoration: none; }
body.change-list:not(.model-user) #result_list td.field-statusi,
body.change-list:not(.model-user) #result_list td.field-njesia { white-space: nowrap; }
.medapp-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #e8eefb; color: #223e92; }
.medapp-chip.st-draft { background: #fdeede; color: #a8540f; }
.medapp-chip.st-final, .medapp-chip.st-aktiv { background: #e3f4e8; color: #1c6b34; }
.medapp-chip.st-anuluar { background: #f1f1f1; color: #6b6b6b; }

body.change-list:not(.model-user) .paginator { margin: 14px 0 0; padding: 0; border: 0; background: transparent; color: #5a6479; font-size: 14px; }
body.change-list:not(.model-user) .paginator a:not(.showall) { display: inline-block; padding: 6px 12px; border-radius: 8px; background: #eef1f8; color: #223e92; text-decoration: none; margin: 0 2px; }
body.change-list:not(.model-user) .paginator .this-page { display: inline-block; padding: 6px 12px; border-radius: 8px; background: #223e92; color: #fff; margin: 0 2px; }

/* telefon / tablet: rreshtat bëhen karta, pa lëvizje horizontale */
@media (max-width: 900px) {
  body.change-list:not(.model-user) #result_list,
  body.change-list:not(.model-user) #result_list tbody { display: block; }
  body.change-list:not(.model-user) #result_list thead { display: none; }
  body.change-list:not(.model-user) #changelist .results { border: 0; background: transparent; overflow: visible; }
  body.change-list:not(.model-user) #result_list tbody tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; position: relative; margin-bottom: 12px;
    background: #fff; border: 1px solid #dfe4ef; border-radius: 16px; padding: 12px 14px;
  }
  body.change-list:not(.model-user) #result_list tbody td,
  body.change-list:not(.model-user) #result_list tbody th {
    display: block; border: 0; padding: 6px 0; background: transparent !important; text-align: left !important;
  }
  body.change-list:not(.model-user) #result_list tbody td[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #7a8499; margin-bottom: 2px;
  }
  body.change-list:not(.model-user) #result_list tbody th { grid-column: 1 / -1; padding-right: 32px; font-size: 16px; }
  body.change-list:not(.model-user) #result_list td.action-checkbox { position: absolute; top: 12px; right: 14px; padding: 0; }
  body.change-list:not(.model-user) #result_list td.action-checkbox input { width: 18px; height: 18px; }
  body.change-list:not(.model-user) #searchbar { min-width: 0; flex-basis: 100%; }
  body.change-list:not(.model-user) .actions select { min-width: 0; width: 100%; }
}

/* ---- Listat: rregullime sipas DOM-it real të Django ---- */
body.change-list:not(.model-user) #changelist { display: flex; flex-direction: column; padding: 0 !important; }
body.change-list:not(.model-user) #changelist .changelist-form-container { display: contents; }
body.change-list:not(.model-user) #changelist > #toolbar,
body.change-list:not(.model-user) #changelist #toolbar { order: -3; }
body.change-list:not(.model-user) #changelist #changelist-filter { order: -2; }
body.change-list:not(.model-user) #changelist > .xfull,
body.change-list:not(.model-user) #changelist > nav.toplinks,
body.change-list:not(.model-user) #changelist .xfull { order: -1; }
body.change-list:not(.model-user) #changelist-form { order: 0; width: 100%; margin: 0; }
body.change-list:not(.model-user) .filtered .results,
body.change-list:not(.model-user) .filtered .paginator,
body.change-list:not(.model-user) .filtered #toolbar,
body.change-list:not(.model-user) .filtered div.xfull,
body.change-list:not(.model-user) #changelist-form .results,
body.change-list:not(.model-user) #changelist-form .paginator { margin-right: 0 !important; width: auto !important; max-width: 100%; box-sizing: border-box; }
body.change-list:not(.model-user) #changelist #toolbar { width: 100% !important; margin-bottom: 14px; }
body.change-list:not(.model-user) #changelist #toolbar form { width: 100%; }
body.change-list:not(.model-user) #changelist-search #searchbar,
body.change-list:not(.model-user) #toolbar #searchbar {
  flex: 1 1 320px; width: auto !important; height: 46px !important; min-width: 0;
  padding: 0 16px 0 44px !important; border: 1.5px solid #c9d1e3 !important; border-radius: 12px !important; box-sizing: border-box;
}
body.change-list:not(.model-user) #changelist-filter { padding: 12px 16px; }
body.change-list:not(.model-user) #changelist-filter details > ul { white-space: normal; }
body.change-list:not(.model-user) #changelist-filter #show-facets,
body.change-list:not(.model-user) #changelist-filter .toggle-facets { margin: 0; align-self: center; }
body.change-list:not(.model-user) #changelist-filter > h2 { order: -1; }
body.change-list:not(.model-user) #result_list td.field-statusi,
body.change-list:not(.model-user) #result_list td.field-njesia { white-space: normal; }
body.change-list:not(.model-user) #result_list tbody th a { white-space: nowrap; }
body.change-list:not(.model-user) #result_list tbody td,
body.change-list:not(.model-user) #result_list tbody th { padding: 12px 8px; }
body.change-list:not(.model-user) #result_list .medapp-chip { white-space: normal; }
body.change-list:not(.model-user) #changelist .xfull, body.change-list:not(.model-user) .xfull {
  background: #fff; border: 1px solid #dfe4ef; border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; font-size: 14px;
}

/* ---- Fusha me "+" (Klienti): ikona brenda fushës, e njëjta gjerësi me të tjerat ---- */
body.change-form:is(.model-dokumenti, .model-kontrata, .model-pajisja) fieldset.module.aligned .related-widget-wrapper { position: relative; }
body.change-form:is(.model-dokumenti, .model-kontrata, .model-pajisja) fieldset.module.aligned .related-widget-wrapper .related-widget-wrapper-link.add-related {
  position: absolute; right: 38px; top: 50%; transform: translateY(-50%); z-index: 3;
}
body.change-form:is(.model-dokumenti, .model-kontrata, .model-pajisja) fieldset.module.aligned .related-widget-wrapper .select2-selection__rendered { padding-right: 64px !important; }

/* ---- Listat v17: filtri pa lartësi fikse, gjerësi e plotë, kolona në mes ---- */
body.change-list:not(.model-user) #changelist #changelist-filter {
  flex: none !important; height: auto !important; min-height: 0 !important; max-height: none !important;
  position: static !important; margin: 0 !important; align-self: stretch !important; width: 100% !important;
}
body.change-list:not(.model-user) :is(#changelist, #changelist .changelist-form-container, #changelist-form, #toolbar, .actions, .xfull, .results, .paginator, .module) {
  margin-right: 0 !important; max-width: 100% !important;
}
body.change-list:not(.model-user) :is(#changelist, #changelist .changelist-form-container, #changelist-form) {
  padding-right: 0 !important; width: 100% !important; box-sizing: border-box;
}
body.change-list:not(.model-user) #changelist-form > * { max-width: 100%; }
body.change-list:not(.model-user) #changelist-filter #changelist-filter-extra-actions {
  margin: 0; padding: 0; border: 0; align-self: center; font-size: 13px;
}
body.change-list:not(.model-user) #changelist-filter #changelist-filter-extra-actions h3 { display: none; }
body.change-list:not(.model-user) #changelist-filter > * { margin-top: 0; margin-bottom: 0; }

/* kolonat në mes (numri majtas) */
body.change-list:not(.model-user) #result_list :is(thead th, tbody td, tbody th) { text-align: center !important; vertical-align: middle; }
body.change-list:not(.model-user) #result_list thead th :is(.text, a, div) { display: block; text-align: center !important; }
body.change-list:not(.model-user) #result_list :is(th.column-numri, th.field-numri, th.column-emri, th.field-emri, th.column-emertimi, th.field-emertimi) { text-align: left !important; }
body.change-list:not(.model-user) #result_list thead th.action-checkbox-column, body.change-list:not(.model-user) #result_list td.action-checkbox { width: 36px; text-align: center !important; }
body.change-list:not(.model-user) #result_list .medapp-chip { display: inline-block; max-width: 100%; white-space: nowrap; }
body.change-list:not(.model-user) .xfull a { margin-right: 8px; }

/* ---- Listat v18: tabela gjithmonë brenda kartës (pa prerje djathtas) ---- */
@media (min-width: 901px) {
  body.change-list:not(.model-user) #changelist .results { overflow: visible; }
  body.change-list:not(.model-user) #result_list { table-layout: fixed; width: 100% !important; }
  body.change-list:not(.model-user) #result_list :is(th, td) { overflow-wrap: anywhere; word-break: normal; padding-left: 6px; padding-right: 6px; }
  body.change-list:not(.model-user) #result_list thead th.action-checkbox-column { width: 44px; }
  body.change-list:not(.model-user) #result_list tbody th a { white-space: normal; }
  body.change-list:not(.model-user) #result_list thead th { font-size: 10.5px; letter-spacing: .02em; }
}
body.change-list:not(.model-user) #changelist .results { border-radius: 16px; }
body.change-list:not(.model-user) #result_list tbody tr:last-child :is(td, th) { border-bottom: 0; }

/* ---- Listat v19: koka e rreshtuar, paginatori pa sfond ---- */
body.change-list:not(.model-user) #result_list thead th { position: relative; vertical-align: middle; height: 44px; }
body.change-list:not(.model-user) #result_list thead th .sortoptions {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); float: none; margin: 0; width: auto; display: flex; gap: 2px; align-items: center;
}
body.change-list:not(.model-user) #result_list thead th .text { padding: 0 !important; width: 100%; }
body.change-list:not(.model-user) #result_list thead th .text a { padding: 0 !important; }
body.change-list:not(.model-user) #result_list :is(th.column-numri, th.field-numri, th.column-emri, th.field-emri, th.column-emertimi, th.field-emertimi) { text-align: center !important; }
body.change-list:not(.model-user) #result_list thead th :is(.text, a, div) { text-align: center !important; }
body.change-list:not(.model-user) #result_list tbody th a { white-space: nowrap; overflow-wrap: normal; }
body.change-list:not(.model-user) .paginator,
body.change-list:not(.model-user) .paginator * { background: transparent !important; box-shadow: none; }
body.change-list:not(.model-user) .paginator { border: 0 !important; padding: 4px 2px !important; margin-top: 10px !important; }
body.change-list:not(.model-user) .paginator a:not(.showall) { background: #eef1f8 !important; }
body.change-list:not(.model-user) .paginator .this-page { background: #223e92 !important; }
body.change-list:not(.model-user) .paginator .this-page { color: #fff; }

/* ---- Listat v20: titujt e gjatë zbresin në rresht tjetër ---- */
body.change-list:not(.model-user) #result_list thead th,
body.change-list:not(.model-user) #result_list thead th :is(.text, a, div, span) {
  white-space: normal !important; overflow-wrap: anywhere; word-break: normal; line-height: 1.25; max-width: 100%; box-sizing: border-box;
}
body.change-list:not(.model-user) #result_list thead th { overflow: hidden; padding: 8px 14px 8px 6px; }
body.change-list:not(.model-user) #result_list thead th.sorted { padding-right: 22px; }
body.change-list:not(.model-user) #result_list :is(td, th) { overflow: hidden; text-overflow: clip; }

/* ---- Fushat me tik (p.sh. Njoftimet automatike): titulli sipër, si fushat e tjera ---- */
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .form-row .flex-container:has(> input[type="checkbox"]) {
  display: flex !important; flex-direction: column !important; align-items: stretch; gap: 5px;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .form-row .flex-container:has(> input[type="checkbox"]) > label {
  order: -1; float: none; width: auto; margin: 0; padding: 0; font-weight: 600; font-size: 13px; color: #16224f; text-transform: none;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .form-row .flex-container > input[type="checkbox"] {
  flex: none; align-self: flex-start; width: 22px; height: 22px; margin: 10px 14px; accent-color: #223e92;
  box-sizing: border-box;
}

/* ---- Fushat me tik v2: struktura reale e Django (.checkbox-row) ---- */
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .form-row :is(.checkbox-row, .flex-container:has(> input[type="checkbox"])) {
  display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 5px !important;
  float: none !important; width: auto !important; padding: 0 !important; margin: 0 !important;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .form-row :is(.checkbox-row, .flex-container) > label:is(.vCheckboxLabel, [for]) {
  order: -1 !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
  font-weight: 600 !important; font-size: 13px !important; color: #16224f !important; display: block !important;
}
body.change-form:is(.model-dokumenti, .model-furnitori, .model-klienti, .model-kontrata, .model-pajisja) fieldset.module.aligned .form-row :is(.checkbox-row, .flex-container) > input[type="checkbox"] {
  align-self: flex-start !important; flex: none !important; width: 24px !important; height: 24px !important;
  margin: 12px 14px !important; accent-color: #223e92; box-sizing: border-box;
}

/* ---- Fushat me tik v3: .flex-container.checkbox-row > div.checkbox > input + label ---- */
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox {
  display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 5px !important; width: 100% !important;
}
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > label {
  order: -1 !important; margin: 0 !important; padding: 0 !important; font-weight: 600 !important; font-size: 13px !important;
  color: #16224f !important; line-height: 1.3; display: block !important;
}
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"] {
  align-self: flex-start !important; width: 24px !important; height: 24px !important; margin: 12px 14px !important; accent-color: #223e92;
}

/* ---- Fushat me tik v4: çelës (toggle) në vend të tikut ---- */
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > label { color: #5a6479 !important; }
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > label::after { content: ":"; }
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; cursor: pointer; flex: none;
  width: 56px !important; height: 30px !important; margin: 11px 2px !important; border-radius: 999px; border: 0;
  background: #c9d1e3; transition: background .15s;
}
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s;
}
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"]:checked { background: #223e92; }
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"]:checked::before { transform: translateX(26px); }
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"]:focus-visible { outline: 3px solid #9fb2ee; outline-offset: 2px; }
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Fushat me çelës v5: kuti si fushat e tjera, teksti majtas, çelësi djathtas ---- */
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox {
  flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
  height: 52px; box-sizing: border-box; margin-top: 23px !important; padding: 0 14px !important;
  border: 1.5px solid #c9d1e3; border-radius: 10px; background: #f7f8fc;
}
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > label {
  order: 0 !important; flex: 1 1 auto; color: #16224f !important; font-size: 14px !important; cursor: pointer;
}
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > label::after { content: none !important; }
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"] {
  order: 1; align-self: center !important; margin: 0 !important; width: 50px !important; height: 28px !important;
}
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"]::before { width: 22px; height: 22px; }
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"]:checked::before { transform: translateX(22px); }

/* ---- Telefon: formularët simetrikë majtas/djathtas, fushat brenda kartës ---- */
@media (max-width: 900px) {
  body.change-form #content { padding: 14px 14px !important; box-sizing: border-box; max-width: 100vw; }
  body.change-form #content-main, body.change-form #content-main form, body.change-form #content-main form > div { max-width: 100%; box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important; }
  body.change-form fieldset.module.aligned {
    padding: 16px !important; margin: 0 0 14px !important; width: 100% !important; box-sizing: border-box; overflow: visible;
  }
  body.change-form fieldset.module.aligned .form-row { padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; overflow: visible; }
  body.change-form fieldset.module.aligned .form-row > div, body.change-form fieldset.module.aligned .flex-container { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  body.change-form fieldset.module.aligned .form-row :is(input:not([type=checkbox]), select, textarea, .select2-container, .related-widget-wrapper) { max-width: 100% !important; box-sizing: border-box; }
  body.change-form fieldset.module.aligned .related-widget-wrapper .related-widget-wrapper-link.add-related { right: 40px; }
  body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox { margin-top: 0 !important; width: 100% !important; }
}

/* ---- Rreshti i njoftimeve: të tre fushat standard (titull njëlloj, kuti 52px, njësoj të rreshtuara) ---- */
body.change-form:is(.model-kontrata, .model-dokumenti, .model-pajisja, .model-klienti, .model-furnitori) fieldset.module.aligned .form-row > div > label,
body.change-form:is(.model-kontrata, .model-dokumenti, .model-pajisja, .model-klienti, .model-furnitori) fieldset.module.aligned .form-row .flex-container > label:not(.vCheckboxLabel) {
  color: #16224f !important; font-weight: 600 !important; font-size: 13px !important; text-transform: none;
}
/* teksti ndihmës poshtë fushës, jo midis titullit dhe fushës */
body.change-form fieldset.module.aligned .form-row > div:has(> .help) { display: flex; flex-direction: column; }
body.change-form fieldset.module.aligned .form-row > div > .flex-container { order: 1; }
body.change-form fieldset.module.aligned .form-row > div > .help { order: 2; margin: 5px 0 0 !important; padding: 0 !important; }
body.change-form fieldset.module.aligned .form-row .flex-container > .help { order: 3; margin: 5px 0 0 !important; padding: 0 !important; }
body.change-form fieldset.module.aligned .form-row .flex-container:has(> .help) { display: flex; flex-direction: column; }
/* fusha vetëm-për-lexim (Njoftimi) si kuti standarde */
body.change-form fieldset.module.aligned .form-row.field-njoftimi_pamje .readonly {
  display: flex !important; align-items: center; min-height: 52px; box-sizing: border-box; padding: 0 14px !important; margin: 0 !important;
  border: 1.5px solid #c9d1e3; border-radius: 10px; background: #eef1f8; color: #16224f; font-weight: 600; font-size: 14px;
}

/* ---- Njoftimet: dy kutitë identike me fushat e tjera ---- */
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox,
body.change-form fieldset.module.aligned .form-row.field-njoftimi_pamje .readonly {
  height: 50px !important; min-height: 50px !important; box-sizing: border-box; background: #f7f8fc !important;
  border: 1.5px solid #c9d1e3 !important; border-radius: 10px !important; padding: 0 14px !important;
  font-size: 16px !important; font-weight: 400 !important; color: #1b2438 !important; line-height: 1.2;
}
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > label {
  font-size: 16px !important; font-weight: 400 !important; color: #1b2438 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"] { width: 46px !important; height: 26px !important; }
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"]::before { width: 20px; height: 20px; }
body.change-form fieldset.module.aligned .form-row .checkbox-row > .checkbox > input[type="checkbox"]:checked::before { transform: translateX(20px); }

/* ---- Dokument i mbyllur: shiriti i kyçjes dhe butoni i korrigjimit ---- */
.dok-kyc { display: flex; align-items: center; gap: 14px; background: #fff6ec; border: 1.5px solid #f0c48f; border-radius: 14px; padding: 14px 18px; margin: 4px 0 18px; color: #7a4a0e; font-size: 15px; line-height: 1.4; }
.dok-kyc b { display: block; font-size: 16px; color: #5e3706; }
.dok-kyc-ic { font-size: 26px; flex: none; }
.dok-kyc.dok-kyc-hapur { background: #eef1f8; border-color: #9fb2ee; color: #16224f; }
.dok-kyc.dok-kyc-hapur b { color: #16224f; }
.dok-karte .dok-korrigjim { display: block; text-align: center; background: #e07a2f; color: #fff !important; border-color: #e07a2f; text-decoration: none; margin-bottom: 8px; }
.dok-karte .dok-korrigjim:hover { background: #c96a22; }
body.model-dokumenti.change-form fieldset.module.aligned .form-row .readonly {
  display: flex; align-items: center; min-height: 50px; box-sizing: border-box; padding: 0 14px; border: 1.5px solid #dfe4ef; border-radius: 10px; background: #eef1f8; color: #3d4668; margin: 0;
}
body.model-dokumenti.change-form fieldset.module.aligned .form-row.field-shenime .readonly,
body.model-dokumenti.change-form fieldset.module.aligned .form-row.field-pershkrimi_punes .readonly { min-height: 90px; align-items: flex-start; padding-top: 12px; }

/* ---- Lidhjet mes faqeve ---- */
.lidhjet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 16px; }
.lidhjet-et { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #5a6479; margin-right: 4px; }
.lidhje { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1.5px solid #c9d1e3; color: #223e92 !important; font-weight: 600; font-size: 14px; text-decoration: none !important; }
.lidhje:hover { background: #eef1f8; border-color: #223e92; }
.lidhje b { background: #223e92; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.dok-lidhje a { display: block; padding: 8px 0; border-top: 1px solid #eef1f8; color: #223e92; font-weight: 600; font-size: 14px; text-decoration: none; }
.dok-lidhje a:first-of-type { border-top: 0; }
.dok-lidhje a:hover { text-decoration: underline; }

/* ---- QR kodi: pa kutinë gri pas kartës ---- */
body.change-form :is(.readonly, .form-row > div, .flex-container):has(.qr-karte) {
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-height: 0 !important;
}
body.change-form .form-row:has(.qr-karte) .readonly { background: transparent !important; border: 0 !important; padding: 0 !important; min-height: 0 !important; display: block !important; }
.qr-karte { margin: 6px 0; max-width: 100%; box-sizing: border-box; }

/* ---- Kërkimi i menysë: i bardhë ---- */
#nav-filter {
  background-color: #ffffff !important; color: #1b2438 !important; border: 1.5px solid #c9d1e3 !important; border-radius: 12px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23223e92' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: 14px center !important; padding-left: 42px !important;
}
#nav-filter::placeholder { color: #6b7490 !important; opacity: 1; }
#nav-filter:focus { outline: 3px solid #9fb2ee; border-color: #223e92 !important; }

/* ---- Karta e QR-së v2: brenda rreshtit, pa dalë jashtë; Kodi unik në mes ---- */
@media (min-width: 901px) {
  body.change-form.model-pajisja fieldset.module.aligned .form-row.field-qr_pamje { grid-column: span 2; }
  body.change-form.model-pajisja fieldset.module.aligned .form-row.field-kodi_unik { align-self: center; }
}
body.change-form .qr-karte {
  display: grid !important; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center;
  width: 100%; max-width: 520px; box-sizing: border-box; padding: 20px 24px; margin: 6px 0;
}
body.change-form .qr-karte img { width: 140px; height: 140px; display: block; }
body.change-form .qr-karte .qr-veprime { align-items: stretch; min-width: 0; gap: 10px; }
body.change-form .qr-karte .qr-titulli { font-size: 16px; }
body.change-form .qr-karte a.qr-btn { text-align: center; text-decoration: none !important; white-space: nowrap; color: #fff; }
body.change-form .qr-karte a.qr-btn.kontur { color: #223e92; }
body.change-form .qr-karte a.qr-lidhje { text-align: center; font-size: 13px; }
@media (max-width: 520px) { body.change-form .qr-karte { grid-template-columns: 1fr; justify-items: center; } body.change-form .qr-karte .qr-veprime { width: 100%; } }


/* ---- v34: lista e dokumenteve me 5 kolona, pilulat e njësive ---- */
.dk-n b { display: block; color: #223e92; font-size: 15px; }
.dk-n small { color: #5a6479; font-size: 12.5px; }
.dk-pika { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dk-chip { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.dk-pilula { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.dk-pil { padding: 9px 16px; border-radius: 999px; border: 1.5px solid #c9d1e3; background: #fff; font-weight: 600; font-size: 14px; color: #3d4668 !important; text-decoration: none !important; }
.dk-pil.on { background: #223e92; border-color: #223e92; color: #fff !important; }
body.model-dokumenti.change-list td.field-dokumenti_pamja { white-space: normal; }

/* v35: lista e dokumenteve me skeda sipas njësisë */
.dk-skedat { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #e3e8f1; margin: 0 0 14px; }
.dk-sked { padding: 11px 20px; font-weight: 600; font-size: 15px; color: #5a6479 !important; text-decoration: none !important; border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; }
.dk-sked i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dk-sked span { background: #eef1f8; border-radius: 999px; padding: 1px 9px; font-size: 12.5px; }
.dk-sked.on { color: #223e92 !important; border-bottom-color: #223e92; }
.dk-sked.on span { background: #223e92; color: #fff; }
.dk-filtrat { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.dk-fil { padding: 7px 15px; border-radius: 999px; border: 1px solid #dfe4ef; background: #fff; font-weight: 600; font-size: 13.5px; color: #3d4668 !important; text-decoration: none !important; }
.dk-fil.on { background: #e8eefb; border-color: #223e92; color: #223e92 !important; }
.dk-fil.spec { background: #fff4e5; border-color: #f0b35a; color: #8a4b00 !important; }
.dk-fil.spec.on { background: #e07a2f; border-color: #e07a2f; color: #fff !important; }

/* v35: lista e dokumenteve me skeda sipas njësisë */
.dk-skedat { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #e3e8f1; margin: 0 0 14px; }
.dk-sked { padding: 11px 20px; font-weight: 600; font-size: 15px; color: #5a6479 !important; text-decoration: none !important; border-bottom: 3px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; }
.dk-sked i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dk-sked span { background: #eef1f8; border-radius: 999px; padding: 1px 9px; font-size: 12.5px; }
.dk-sked.on { color: #223e92 !important; border-bottom-color: #223e92; }
.dk-sked.on span { background: #223e92; color: #fff; }
.dk-filtrat { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.dk-fil { padding: 7px 15px; border-radius: 999px; border: 1px solid #dfe4ef; background: #fff; font-weight: 600; font-size: 13.5px; color: #3d4668 !important; text-decoration: none !important; }
.dk-fil.on { background: #e8eefb; border-color: #223e92; color: #223e92 !important; }
.dk-fil.spec { background: #fff4e5; border-color: #f0b35a; color: #8a4b00 !important; }
.dk-fil.spec.on { background: #e07a2f; border-color: #e07a2f; color: #fff !important; }

/* Teksti i dyfishtë (hije) mbi fushat te tabelat e brendshme (telefona, emaile, llogari, rreshta): Django e vendos emrin e rreshtit absolut mbi fushën e parë. */
.inline-group td.original p, .inline-group th.original p, .inline-group .tabular td.original p { display: none !important; }
.inline-group td.original, .inline-group th.original { width: 0 !important; max-width: 0 !important; padding: 0 !important; border: 0 !important; font-size: 0 !important; overflow: hidden; }

/* ---- Koka (logo, hyrja) mbetet e fiksuar lart; vetëm përmbajtja lëviz ---- */
#header {
  position: sticky; top: 0; z-index: 1000; background: #fff;
  box-shadow: 0 2px 8px rgba(27, 36, 56, .08);
}
#nav-sidebar {
  top: var(--hh, 74px) !important;
  height: calc(100vh - var(--hh, 74px)) !important;
  max-height: calc(100vh - var(--hh, 74px)) !important;
  overflow-y: auto;
}
body.dok-me-anash #content-main form > div > .dok-anash { top: calc(var(--hh, 74px) + 12px); }
.login #header { position: static; box-shadow: none; }

/* ---- Kërkimi i menysë i bardhë (mbivendos rregullin transparent të menysë) dhe i fiksuar lart ---- */
#nav-sidebar #nav-filter {
  background-color: #ffffff !important; color: #1b2438 !important; border: 1.5px solid #c9d1e3 !important;
  position: sticky; top: 0; z-index: 5; box-shadow: 0 0 0 8px #223e92;
}
#nav-sidebar #nav-filter::placeholder { color: #6b7490 !important; opacity: 1; }
#nav-sidebar #nav-filter:focus { background-color: #ffffff !important; color: #1b2438 !important; border-color: #ffffff !important; outline: 3px solid #9fb2ee; }

/* ---- Hyrja / përdoruesi dhe shiriti i rrugës mbeten të fiksuar poshtë logos ---- */
#header #user-tools { position: static; }
.breadcrumbs { position: sticky; top: var(--hh, 74px); z-index: 900; }

/* ---- Koka + shiriti i rrugës bashkë, të fiksuar (mbështjellësi krijohet nga base_site.html) ---- */
#sticky-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; }
body:has(#sticky-top) #container { padding-top: var(--hh, 74px); box-sizing: border-box; }
#sticky-top #header { position: static; box-shadow: none; }
#sticky-top .breadcrumbs { position: static; box-shadow: 0 2px 8px rgba(27, 36, 56, .12); }

/* ---- Pamja e errët (butoni i temës lart): "Errët" kthen gjithë ngjyrat; "Auto" dhe "Dritë" janë të çelëta ---- */
html[data-theme="dark"] { filter: invert(.92) hue-rotate(180deg); background: #fff; }
html[data-theme="dark"] img,
html[data-theme="dark"] video,
html[data-theme="dark"] canvas,
html[data-theme="dark"] iframe,
html[data-theme="dark"] .fd-paper,
html[data-theme="dark"] .qrx-im {
  filter: invert(1) hue-rotate(180deg);
}


/* ---- Kërkimi në menu ngjitet te shiriti blu lart (pa hapësirë sipër), mbetet i fiksuar ---- */
#nav-sidebar { padding-top: 0 !important; }
#nav-sidebar #nav-filter { margin: 8px 0 10px !important; top: 8px !important; box-shadow: 0 0 0 8px #223e92 !important; }
#nav-privilegjet {
  display: block; margin: 0 0 8px; padding: 10px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, .12); color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none;
}
#nav-privilegjet:hover { background: rgba(255, 255, 255, .22); }

/* ---- Filtrat në të djathtë: opsionet si butona (çipa), jo dropdown ---- */
#changelist-filter ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 8px 0 12px; }
#changelist-filter li { margin: 0; padding: 0; }
#changelist-filter li a {
  display: block; padding: 6px 13px; border: 1.5px solid #c9d1e3; border-radius: 999px;
  background: #fff; color: #16224f !important; font-size: 13px; font-weight: 600; text-decoration: none;
}
#changelist-filter li a:hover { border-color: #223e92; }
#changelist-filter li.selected a { background: #223e92; border-color: #223e92; color: #fff !important; }

/* ---- Rreshti i butonave të njësisë mbi listën ---- */
#njesia-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
#njesia-bar .njesia-et { font-size: 13px; font-weight: 700; color: #5a6479; margin-right: 4px; text-transform: uppercase; letter-spacing: .04em; }
#njesia-bar .njesia-btn {
  --ng: #223e92; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  border: 2px solid var(--ng); background: #fff; color: var(--ng) !important; font-weight: 700; font-size: 14px; text-decoration: none;
}
#njesia-bar .njesia-btn.te-gjitha { --ng: #5a6479; }
#njesia-bar .njesia-btn:hover { filter: brightness(.95); background: #f4f6fb; }
#njesia-bar .njesia-btn.zgjedhur { background: var(--ng); color: #fff !important; }

/* ---- Faqja "Historik" e çdo regjistrimi: kartë e qendërzuar, kolonat në mes ---- */
.hst-faqja { max-width: 1100px; margin: 0 auto; }
.hst-karte { background: #fff; border: 1px solid #dfe4ef; border-radius: 14px; box-shadow: 0 2px 10px rgba(34, 62, 146, .06); overflow: hidden; }
.hst-tabela { width: 100%; border-collapse: collapse; table-layout: fixed; }
.hst-tabela th, .hst-tabela td { padding: 14px 18px; text-align: center; vertical-align: middle; border: 0; border-bottom: 1px solid #eef0f8; font-size: 14px; }
.hst-tabela thead th { background: #eef1f8; color: #223e92; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hst-tabela tbody tr:nth-child(even) td { background: #fafbfe; }
.hst-tabela .hst-koha { width: 24%; white-space: nowrap; font-weight: 600; color: #16224f; }
.hst-tabela .hst-pers { width: 22%; }
.hst-fundi { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 12px 18px; color: #5a6479; font-size: 13px; background: #fff; }
.hst-faqet a, .hst-faqet b { display: inline-block; min-width: 28px; padding: 3px 8px; text-align: center; border-radius: 8px; text-decoration: none; }
.hst-faqet b { background: #223e92; color: #fff; }
.hst-bosh { text-align: center; padding: 24px; color: #5a6479; margin: 0; }

/* =====================================================================
   DIZAJNI I RI: koka, shiriti i rrugës, menuja e majtë, faqja kryesore
   ===================================================================== */
#header { border-bottom: 1px solid #e6eaf4 !important; padding: 10px 28px !important; box-shadow: none; }

/* Karta e përdoruesit lart djathtas */
#user-tools.mu { display: flex; align-items: center; gap: 14px; font-family: "Inter", "IBM Plex Sans", system-ui, sans-serif;
  text-transform: none; letter-spacing: 0; font-size: 14px; color: #16224f; }
.mu-menu { position: relative; }
.mu-menu summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px;
  border: 1px solid #e1e6f2; border-radius: 30px; cursor: pointer; background: #fff; }
.mu-menu summary::-webkit-details-marker { display: none; }
.mu-menu summary:hover { border-color: #b9c4e6; }
.mu-av { width: 34px; height: 34px; border-radius: 50%; background: #223e92; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.mu-em b { display: block; font-size: 14px; color: #16224f; line-height: 1.15; font-weight: 600; text-transform: capitalize; }
.mu-em small { display: block; font-size: 12px; color: #7a8499; font-weight: 500; }
.mu-sh { color: #7a8499; font-size: 12px; }
.mu-lista { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: #fff; border: 1px solid #e1e6f2;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(27, 36, 56, .16); padding: 6px; z-index: 2000; }
#user-tools.mu .mu-lista a { display: block; padding: 10px 12px; border-radius: 8px; color: #16224f !important; font-weight: 500;
  text-decoration: none !important; font-size: 14px; text-transform: none; border: 0; }
#user-tools.mu .mu-lista a:hover { background: #f1f4fb; }
.mu-dil { margin: 0; display: inline-flex; }
.mu-dil button { background: none; border: 0; color: #d92d20; font-weight: 700; font-size: 14px; cursor: pointer; padding: 8px 6px; font-family: inherit; }
.mu-dil button:hover { text-decoration: underline; }
@media (max-width: 760px) { .mu-em, .mu-sh { display: none; } .mu-menu summary { padding: 5px; } }

/* Shiriti i rrugës: i bardhë, me butona të rrumbullakët */
.breadcrumbs { background: #fff !important; color: #4a5578 !important; padding: 12px 28px !important; display: flex !important; align-items: center;
  flex-wrap: wrap; gap: 8px; font-size: 14px; border-bottom: 1px solid #e6eaf4; text-transform: none; letter-spacing: 0; }
#sticky-top .breadcrumbs { box-shadow: 0 4px 14px rgba(34, 62, 146, .06); }
.breadcrumbs a, .breadcrumbs a:link, .breadcrumbs a:visited { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: #f1f4fb; color: #4a5578 !important; font-weight: 500; text-decoration: none !important; }
.breadcrumbs a:hover { background: #e3e9f8; color: #223e92 !important; }
.breadcrumbs a.bc-h { background: #e8eefb; color: #223e92 !important; font-weight: 600; }
.breadcrumbs .bc-s { color: #aab3cc; }
.breadcrumbs .bc-cur { padding: 6px 14px; border-radius: 999px; background: #223e92; color: #fff; font-weight: 600; }

/* Menuja e majtë */
#nav-sidebar { background-image: linear-gradient(180deg, #223e92 0%, #182c6b 100%) !important; padding-left: 14px; padding-right: 14px; }
#nav-sidebar .module { margin-bottom: 4px; }
#nav-sidebar .module table { width: 100%; border-collapse: separate; border-spacing: 0 2px; }
#nav-sidebar .module caption, #nav-sidebar .module caption a { font-size: 11px; letter-spacing: .12em; color: rgba(255, 255, 255, .55) !important;
  font-weight: 600; padding: 16px 10px 6px; text-align: left; text-transform: uppercase; }
#nav-sidebar .module tr { display: flex; align-items: center; height: 42px; border-radius: 11px; padding: 0 8px 0 12px; border: 0; }
#nav-sidebar .module tr th { flex: 1; min-width: 0; padding: 0; border: 0; }
#nav-sidebar .module tr td { padding: 0; border: 0; width: auto; }
#nav-sidebar .module tr th a { display: flex; align-items: center; gap: 12px; height: 42px; color: rgba(255, 255, 255, .94) !important;
  font-size: 14.5px; font-weight: 500; text-decoration: none; }
#nav-sidebar .module tr th a::before { content: ""; flex: none; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/></svg>"); }
#nav-sidebar tr.model-dokumenti th a::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5M9 13h6M9 17h6'/></svg>"); }
#nav-sidebar tr.model-furnitori th a::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='6' width='14' height='10' rx='1'/><path d='M15 9h4l3 3v4h-7'/><circle cx='6' cy='18' r='2'/><circle cx='18' cy='18' r='2'/></svg>"); }
#nav-sidebar tr.model-kontrata th a::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 11l3 3 8-8'/><path d='M20 12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9'/></svg>"); }
#nav-sidebar tr.model-kerkesekorrigjimi th a::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21V4h11l-2 4 2 4H5'/></svg>"); }
#nav-sidebar tr.model-tedhenatkompanise th a::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18M5 21V7l7-4 7 4v14M9 9h1M14 9h1M9 13h1M14 13h1'/></svg>"); }
#nav-sidebar tr.model-klienti th a::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='4'/><path d='M2 21a7 7 0 0 1 14 0M17 4a4 4 0 0 1 0 8M22 21a7 7 0 0 0-4-6'/></svg>"); }
#nav-sidebar tr.model-group th a::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='15' r='4'/><path d='M11 12l9-9M16 7l3 3'/></svg>"); }
#nav-sidebar tr.model-user th a::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='4'/><path d='M2 21a7 7 0 0 1 14 0M17 4a4 4 0 0 1 0 8M22 21a7 7 0 0 0-4-6'/></svg>"); }
#nav-sidebar tr.model-pajisja th a::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='12' rx='2'/><path d='M8 20h8M12 16v4'/></svg>"); }
#nav-sidebar tr.model-artikulli th a::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8l-9-5-9 5v8l9 5 9-5z'/><path d='M3 8l9 5 9-5M12 13v9'/></svg>"); }
#nav-sidebar tr.model-levizja th a::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 7h13l-3-3M17 17H4l3 3'/></svg>"); }
#nav-sidebar tr.model-cilesimetservisit th a::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2'/></svg>"); }
#nav-sidebar .module tr:hover { background-color: rgba(255, 255, 255, .10); }
#nav-sidebar .module tr.current-model { background-color: rgba(255, 255, 255, .17); }
#nav-sidebar .module tr.current-model th a { font-weight: 600; }
#nav-sidebar .module td .addlink, #nav-sidebar .module td a.addlink { font-size: 0 !important; background-image: none !important; padding: 0 !important;
  width: 24px; height: 24px; border-radius: 50%; background-color: rgba(255, 255, 255, .16) !important; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; }
#nav-sidebar .module td .addlink::before { content: "+"; font-size: 17px; line-height: 1; color: #fff; font-weight: 500; }
#nav-sidebar .module td .addlink:hover { background-color: rgba(255, 255, 255, .30) !important; }

/* Faqja kryesore: përshëndetja dhe katër kartat */
.dash-mire h1 { margin: 0; font-size: 26px; font-weight: 600; color: #16224f; }
.dash-mire p { margin: 4px 0 20px; color: #6b7490; font-size: 15px; }
.kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi a.kpi-k { display: block; background: #fff; border: 1px solid #e6eaf4; border-top: 4px solid var(--ac); border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 2px 10px rgba(34, 62, 146, .06); text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; }
.kpi a.kpi-k:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(34, 62, 146, .12); }
.kpi-t { font-size: 13px; color: #6b7490; font-weight: 500; }
.kpi-n { font-size: 34px; font-weight: 700; margin-top: 6px; color: #16224f; line-height: 1.1; }
.kpi-c { font-size: 12.5px; margin-top: 6px; font-weight: 600; color: var(--ac); }
@media (max-width: 1000px) { .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.dashboard .ps, body.dashboard .rk { border-radius: 16px; box-shadow: 0 2px 10px rgba(34, 62, 146, .06); }

/* ---- Butoni "Instalo aplikacionin" ---- */
.pwa-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; margin-right: 14px; border: 0; border-radius: 999px;
  background: #223e92; color: #fff; font: 600 13.5px "Inter", "IBM Plex Sans", system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.pwa-btn:hover { background: #182c6b; }
.pwa-btn[hidden] { display: none !important; }
.pwa-dlg { border: 0; border-radius: 16px; padding: 22px 24px; max-width: 360px; box-shadow: 0 20px 50px rgba(27, 36, 56, .3); font-family: "Inter", system-ui, sans-serif; }
.pwa-dlg::backdrop { background: rgba(27, 36, 56, .45); }
.pwa-dlg b:first-child { font-size: 17px; color: #16224f; }
.pwa-dlg ol { padding-left: 20px; line-height: 1.6; font-size: 14px; color: #3d4668; }
.pwa-dlg button { width: 100%; height: 42px; border: 0; border-radius: 10px; background: #223e92; color: #fff; font-weight: 600; cursor: pointer; font-family: inherit; }
@media (max-width: 760px) { .pwa-btn { font-size: 0; padding: 0 12px; margin-right: 8px; } .pwa-btn svg { width: 18px; height: 18px; } }


/* ---- Profili i përdoruesit: Super Admin, konfirmim, yll ---- */
.pf-av.admin { position: relative; }
.pf-av.admin::after, .perd-avatar.perd-admin::after {
  content: "\2605"; position: absolute; top: -5px; right: -5px; width: 24px; height: 24px; border-radius: 50%;
  background: #ffb703; color: #16224f; border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.perd-avatar.perd-admin { position: relative; }
.perd-avatar.perd-admin::after { width: 18px; height: 18px; top: -4px; right: -4px; font-size: 10px; border-width: 1.5px; }
.pf-btn.pf-super { border-color: #f0c24a; background: #fff7e0; color: #8a5a00; }
.pf-btn.pf-rrezik { border-color: #f0b4b4; background: #fff1f1; color: #b3261e; }
.pf-dlg { border: 1px solid #d9dff0; border-radius: 16px; padding: 22px; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 12px 40px rgba(20,30,80,.28); font-family: inherit; color: #3d4668; }
.pf-dlg::backdrop { background: rgba(27,36,56,.45); }
.pf-dlg b { font-size: 17px; color: #16224f; display: block; }
.pf-dlg p { font-size: 14px; line-height: 1.5; margin: 10px 0 0; }
.pf-dlg-b { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.pf-dlg-b button { height: 42px; border-radius: 10px; padding: 0 20px; font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit; }
.pf-dlg-po { background: #223e92; color: #fff; border: 0; }
.pf-dlg-po.super { background: #b8860b; }
.pf-dlg-po.rrezik { background: #b3261e; }
.pf-dlg-jo { background: #fff; color: #223e92; border: 1.5px solid #c9d1e3; }
/* Kolona "Hyri së fundmi" te lista e përdoruesve */
.hy { font-size: 13px; font-weight: 600; white-space: nowrap; }
.hy-sot { color: #1b6b4f; }
.hy-pak { color: #3d4668; }
.hy-asnje { color: #8a93b3; font-weight: 500; }

/* Kolona "Hyri së fundmi" në kartelën e përdoruesit: rresht i plotë me etiketë */
body.model-user.change-list #result_list td.field-hyrja_pamje {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; padding: 0 0 12px; font-size: 13px;
}
body.model-user.change-list #result_list td.field-hyrja_pamje::before { content: "Hyri së fundmi:"; color: #5a6479; font-weight: 400; }


/* ---- Menyja e re e përdoruesit (lart djathtas) ---- */
.mu-lista { min-width: 300px !important; padding: 8px !important; }
.mu-top { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid #eef1f8; margin-bottom: 6px; }
.mu-av-v { width: 46px !important; height: 46px !important; font-size: 17px !important; flex: none; }
.mu-top-t { display: block; line-height: 1.3; min-width: 0; }
.mu-top-t b { display: block; font-size: 15px; color: #16224f; text-transform: capitalize; }
.mu-top-t small { display: block; font-size: 12.5px; color: #6b7391; overflow: hidden; text-overflow: ellipsis; }
.mu-pill { display: inline-block; margin-top: 3px; background: #e9edfa; color: #223e92; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.mu-pill-sa { background: #fff4dc; color: #8a5a00; }
#user-tools.mu .mu-lista .mu-it, #user-tools.mu .mu-lista a.mu-it {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none;
  color: #16224f !important; font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; text-decoration: none !important; box-sizing: border-box;
}
#user-tools.mu .mu-lista .mu-it:hover { background: #f1f4fb; }
#user-tools.mu .mu-lista .mu-it[hidden] { display: none; }
.mu-it svg { width: 18px; height: 18px; stroke: #223e92; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mu-lista form { margin: 0; }
.mu-sep { height: 1px; background: #eef1f8; margin: 6px 0; }
.mu-lb { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a93b3; padding: 6px 12px 4px; }
.mu-seg { display: flex; gap: 4px; margin: 2px 8px 8px; background: #eef1f8; border-radius: 10px; padding: 3px; }
.mu-seg button { flex: 1; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 0; border-radius: 8px; color: #5a6479; cursor: pointer; }
.mu-seg button.on { background: #fff; color: #223e92; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
#user-tools.mu .mu-lista .mu-dil-it { color: #d92d20 !important; font-weight: 700; }
#user-tools.mu .mu-lista .mu-dil-it svg { stroke: #d92d20; }
#pwa-btn { display: none !important; }
/* "Auto" ndjek pamjen e pajisjes */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] { filter: invert(.92) hue-rotate(180deg); background: #fff; }
  html[data-theme="auto"] img, html[data-theme="auto"] video, html[data-theme="auto"] canvas, html[data-theme="auto"] iframe,
  html[data-theme="auto"] .fd-paper, html[data-theme="auto"] .qrx-im { filter: invert(1) hue-rotate(180deg); }
}