/*
 * Tehnodent Office — spojeni slojevi stilova.
 *
 * NE MENJATI RUČNO. Fajl pravi `php bin/build-css.php` iz slojeva:
 *   v4.7.css, v4.8.css, v4.9.css, v5.1.css, v5.2.css, v5.3.css, v5.4.css, v5.5.css, v5.6.css, v5.7.css, v5.9.css, v6.0.css, v6.1.css, v6.3.css, v6.4.css, v6.5.css, v6.6.css, v6.8.css, v6.9.css, v7.0.css, v7.1.css, v7.2.css, v7.3.css, v7.4.css, v7.5.css, v7.6.css, v7.7.css, v8.0.css, v8.0.1.css, v6.7.css
 *
 * Otisak izvora: 999ce8335d082bcf9c578a8c96690a15aacee4a278c2e5b676fe235f8729dda1
 */

/* ===== v4.7.css ===== */
/* Tehnodent Office v4.7 — zajednički ritam, filteri, Vozila, To Do i kalendar. */
:root {
  --ui-navy: #123a52;
  --ui-navy-deep: #082f47;
  --ui-blue: #147cac;
  --ui-cyan: #14a9cf;
  --ui-teal: #168f96;
  --ui-bg: #f1f6f8;
  --ui-surface: #fff;
  --ui-soft: #f6fafb;
  --ui-line: #d9e6eb;
  --ui-muted: #6e8794;
  --ui-success: #19815d;
  --ui-success-soft: #e5f5ee;
  --ui-warning: #a66a00;
  --ui-warning-soft: #fff4dc;
  --ui-danger: #c63d52;
  --ui-danger-soft: #fff0f2;
  --ui-radius-sm: 12px;
  --ui-radius: 18px;
  --ui-radius-lg: 24px;
  --ui-shadow: 0 12px 34px rgba(16, 57, 79, .08);
}

.page-content,
.office-content,
.module-workspace-content { min-width: 0; }
.panel { border-color: var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
.button { border-radius: var(--ui-radius-sm); }
input, select, textarea { box-sizing: border-box; max-width: 100%; }
.today-stats > a,
.service-list-summary > a { border-radius: var(--ui-radius); }
.today-stats > a small,
.service-list-summary > a small { line-height: 1.3; }
.today-stats > a > div { display: grid; align-content: center; min-height: 88px; }
.today-stat-icon { align-self: start; }

/* Modal ne sme da napravi drugi, bočni scrollbar. */
.modal {
  box-sizing: border-box;
  padding: clamp(12px, 3vw, 28px);
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-card,
.modal-card.compact {
  box-sizing: border-box;
  max-width: calc(100vw - clamp(24px, 6vw, 56px));
  max-height: calc(100dvh - clamp(24px, 6vw, 56px));
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-lg);
}
.modal-card .form-grid,
.task-mobile-filter-form { min-width: 0; }
.task-filter-modal .modal-card { width: min(700px, calc(100vw - 32px)); }
.task-filter-modal .modal-heading,
.task-filter-modal .task-mobile-filter-form { box-sizing: border-box; width: 100%; min-width: 0; }
.task-filter-modal .task-mobile-filter-form { display: grid; padding-inline: clamp(18px, 4vw, 28px); overflow: visible; }
.task-filter-modal .task-mobile-filter-form > label,
.task-filter-modal .task-mobile-filter-form input,
.task-filter-modal .task-mobile-filter-form select { width: 100%; min-width: 0; }
.task-filter-modal .task-filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.task-filter-modal .task-filter-actions .button { width: 100%; }

/* Jedan dosledan filter-disclosure u svim modulima. */
.module-filter-disclosure,
.service-filter-disclosure {
  position: relative;
  min-width: 0;
  margin-bottom: 20px;
}
.module-filter-disclosure > summary,
.service-filter-disclosure > summary {
  width: max-content;
  min-height: 46px;
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface);
  color: var(--ui-navy);
  box-shadow: 0 5px 16px rgba(16, 57, 79, .05);
  font-size: 13px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}
.module-filter-disclosure > summary::-webkit-details-marker,
.service-filter-disclosure > summary::-webkit-details-marker { display: none; }
.module-filter-disclosure > summary .app-icon,
.service-filter-disclosure > summary .app-icon { width: 19px; height: 19px; color: var(--ui-blue); }
.module-filter-disclosure > summary b,
.service-filter-disclosure > summary b { min-width: 22px; padding: 3px 6px; border-radius: 99px; background: #e7f4f9; color: var(--ui-blue); font-size: 10px; text-align: center; }
.module-filter-disclosure > summary i,
.service-filter-disclosure > summary i { font-style: normal; font-size: 18px; transition: transform .18s ease; }
.module-filter-disclosure[open] > summary i,
.service-filter-disclosure[open] > summary i { transform: rotate(180deg); }
.module-filter-disclosure:not([open]) > .module-filter-form,
.service-filter-disclosure:not([open]) > .service-filters { display: none !important; }
.module-filter-form,
.service-module-body .service-filter-disclosure > .service-filters {
  width: min(960px, 100%);
  min-width: 0;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  box-sizing: border-box;
  margin: 10px 0 0;
  padding: 20px;
  border-radius: var(--ui-radius);
  background: #fff;
  overflow: visible;
}
.module-filter-form label,
.service-module-body .service-filter-disclosure .service-filter-field {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #496879;
  font-size: 11px;
  font-weight: 800;
}
.module-filter-form input,
.module-filter-form select,
.service-module-body .service-filter-disclosure input,
.service-module-body .service-filter-disclosure select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-soft);
  color: var(--ui-navy);
  font: inherit;
}
.module-filter-form .filter-search > div { position: relative; min-width: 0; }
.module-filter-form .filter-search svg { position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ui-muted); }
.module-filter-form .filter-search input { padding-left: 42px; }
.module-filter-actions,
.service-module-body .service-filter-disclosure .service-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}
.service-register-heading { align-items: flex-start; }
.service-register-heading .service-filter-disclosure { margin: 0; }
.service-register-heading .service-filter-disclosure > .service-filters { position: absolute; z-index: 25; top: calc(100% + 8px); right: 0; width: min(760px, calc(100vw - 48px)); box-shadow: 0 22px 55px rgba(9, 51, 73, .18); }
.service-module-body .service-filter-disclosure .service-search { grid-template-columns: 22px minmax(0, 1fr); align-items: center; padding: 0 13px; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-sm); background: var(--ui-soft); }
.service-module-body .service-filter-disclosure .service-search .service-search-icon { display: grid; place-items: center; }
.service-module-body .service-filter-disclosure .service-search input { min-height: 46px; padding: 0; border: 0; background: transparent; }

/* To Do: jedna jasna linija za unos i stabilne akcije. */
.dashboard-todo-panel { overflow: visible; }
.dashboard-todo-panel .daily-todo-create {
  grid-template-columns: minmax(0, 1fr) 52px auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 20px 26px !important;
  border-top: 1px solid #edf3f6;
}
.daily-todo-create-copy { min-width: 0; }
.dashboard-todo-panel .daily-todo-create-copy .daily-todo-title-input {
  width: 100%;
  min-height: 54px;
  padding: 0 17px;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: var(--ui-soft);
  color: var(--ui-navy);
  font-size: 16px;
  font-weight: 700;
}
.dashboard-todo-panel .daily-todo-deadline { display: grid; place-items: center; }
.dashboard-todo-panel .daily-todo-deadline .icon-button { width: 52px; height: 52px; border: 1px solid var(--ui-line); border-radius: 14px; background: #fff; }
.dashboard-todo-panel .daily-todo-create > .button { min-width: 112px; min-height: 52px; }
.dashboard-todo-panel .daily-todo-list { grid-template-columns: 1fr; gap: 0; overflow: visible; }
.dashboard-todo-panel .daily-todo-list article {
  position: relative;
  grid-template-columns: 34px minmax(0, 1fr) 42px 42px !important;
  align-items: center;
  gap: 11px !important;
  min-height: 74px !important;
  padding: 12px 0 !important;
  overflow: visible;
}
.daily-todo-copy { min-width: 0; gap: 6px; }
.daily-todo-copy strong { overflow-wrap: anywhere; color: var(--ui-navy); font-size: 14px; line-height: 1.4; }
.daily-todo-copy small { max-width: 100%; width: max-content; font-size: 9px; }
.todo-row-calendar > summary,
.todo-actions-menu > summary { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--ui-line); border-radius: 12px; background: #fff; color: var(--ui-navy); }
.todo-calendar-menu > div,
.actions-menu > div { z-index: 90; }
.completed-todo-group { margin-inline: 26px; padding-bottom: 18px; }

/* Nedeljni i dnevni prikaz su kalendarske kutije, ne lista. */
.calendar-focus-grid {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  background: #eef4f7;
}
.calendar-focus-grid.calendar-focus-week { grid-template-columns: repeat(7, minmax(150px, 1fr)); overflow-x: auto; }
.calendar-focus-grid.calendar-focus-day { grid-template-columns: minmax(0, 1fr); }
.calendar-focus-grid > .calendar-focus-day {
  min-width: 0;
  min-height: 390px;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: #fff;
}
.calendar-focus-grid > .calendar-focus-day.today { border-color: #63bfd9; box-shadow: inset 0 4px #21a4ca; }
.calendar-focus-heading {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px 9px;
  align-items: center;
  padding: 14px;
  border: 0;
  border-bottom: 1px solid #e7eef2;
  background: #f8fbfc;
  color: var(--ui-navy);
  text-align: left;
  cursor: pointer;
}
.calendar-focus-heading > span { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #e6f4f8; color: var(--ui-blue); font-size: 20px; font-weight: 850; }
.calendar-focus-heading strong { overflow: hidden; font-size: 11px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.calendar-focus-heading small { color: var(--ui-muted); font-size: 9px; }
.calendar-focus-items { display: grid; align-content: start; gap: 8px; padding: 11px; }
.calendar-focus-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 7px;
  padding: 9px;
  border-left: 4px solid var(--event-color);
  border-radius: 10px;
  background: #f5f9fa;
  color: var(--ui-navy);
}
.calendar-focus-item > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.calendar-focus-item small { color: var(--ui-muted); font-size: 7px; font-weight: 850; letter-spacing: .06em; }
.calendar-focus-item strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-focus-item span span { overflow: hidden; color: var(--ui-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.calendar-focus-empty { margin: 0; padding: 12px 4px; color: #8ca0aa; font-size: 11px; text-align: center; }
.calendar-more-button,
.calendar-cell-more { border: 0; border-radius: 9px; background: #e5f3f8; color: var(--ui-blue); font-size: 10px; font-weight: 850; cursor: pointer; }
.calendar-more-button { min-height: 34px; width: 100%; }
.calendar-cell-more { position: absolute; z-index: 4; right: 7px; bottom: 7px; padding: 5px 7px; }
.calendar-week-row .calendar-day { position: relative; }

/* Administracija: kontrola modula je alat u modalu. */
.office-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.office-admin-actions .button { min-height: 46px; }
.office-admin-actions svg { width: 18px; height: 18px; }
.module-controls-card { width: min(1120px, calc(100vw - 36px)); }
.module-maintenance-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 24px 24px; }
.module-maintenance-card { min-width: 0; gap: 16px; padding: 19px; border-radius: 17px; background: #f8fbfc; }
.module-maintenance-card label input { width: 100%; min-width: 0; min-height: 46px; margin-top: 5px; padding-inline: 13px; border: 1px solid var(--ui-line); border-radius: 11px; background: #fff; }

/* Vozila. */
.auto-module-body { background: var(--ui-bg); }
.auto-module-body .module-workspace-sidebar { background: linear-gradient(180deg, #0b3a52, #09666f); }
.auto-hero { min-height: 270px; border-radius: var(--ui-radius-lg); background: radial-gradient(circle at 85% 20%, rgba(48, 211, 195, .25), transparent 31%), linear-gradient(135deg, #0a344c, #0b6c74); box-shadow: 0 20px 50px rgba(8, 52, 73, .16); }
.auto-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.auto-dashboard-grid { gap: 22px; }
.auto-results-heading { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 14px; color: var(--ui-muted); font-size: 12px; font-weight: 750; }
.auto-results-heading a { color: var(--ui-blue); }
.auto-vehicle-grid { gap: 20px; }
.auto-vehicle-card {
  gap: 10px;
  padding: 24px;
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.auto-vehicle-card:hover { transform: translateY(-3px); border-color: #acd4e0; box-shadow: 0 18px 42px rgba(16, 57, 79, .13); }
.auto-vehicle-card-icon { border-radius: 18px; background: #e4f5f6; color: var(--ui-teal); }
.auto-vehicle-facts { gap: 10px; }
.auto-vehicle-facts span { padding: 12px; border: 1px solid #edf2f4; border-radius: 12px; background: #f7fafb; }
.auto-vehicle-due { gap: 8px; padding-top: 4px; }
.auto-vehicle-due span { min-height: 29px; padding: 5px 8px; border-radius: 9px; background: #f4f8fa; }
.auto-vehicle-due span.danger { background: var(--ui-danger-soft); color: var(--ui-danger); }
.auto-card-open { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #e7eef1; color: var(--ui-blue); }
.auto-record-hero { border-radius: var(--ui-radius-lg); box-shadow: 0 18px 45px rgba(9, 51, 72, .16); }
.auto-record-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.auto-record-stats article { min-width: 0; border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
.auto-record-stats strong { overflow-wrap: anywhere; }
.service-fields-heading { display: grid; gap: 3px; margin-top: 4px; padding: 13px 15px; border: 1px solid #d9e9ed; border-radius: 12px; background: #eff8fa; color: var(--ui-navy); }
.service-fields-heading span { color: var(--ui-muted); font-size: 11px; }
.auto-vehicle-modal-card { width: min(820px, calc(100vw - 32px)); }
.auto-alert-list a,
.auto-mini-vehicles a { min-width: 0; padding: 14px 0; }
.auto-alert-list a b { max-width: 240px; }

@media (max-width: 1100px) {
  .module-maintenance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auto-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auto-record-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .module-filter-form,
  .service-module-body .service-filter-disclosure > .service-filters { grid-template-columns: 1fr 1fr; }
  .service-register-heading .service-filter-disclosure > .service-filters { position: fixed; top: 50%; right: 14px; left: 14px; width: auto; max-height: calc(100dvh - 40px); transform: translateY(-50%); overflow-y: auto; }
  .calendar-focus-grid.calendar-focus-week { grid-template-columns: repeat(7, minmax(180px, 1fr)); }
  .auto-record-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .page-content,
  .module-workspace-content { overflow-x: clip; }
  .modal { padding: 10px; }
  .modal-card,
  .modal-card.compact { max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; }
  .task-filter-modal .modal-card { width: calc(100vw - 20px); }
  .task-filter-modal .task-filter-actions { grid-template-columns: 1fr; }
  .module-filter-disclosure > summary,
  .service-filter-disclosure > summary { width: 100%; justify-content: center; }
  .module-filter-form,
  .service-module-body .service-filter-disclosure > .service-filters { grid-template-columns: 1fr; padding: 15px; }
  .module-filter-actions,
  .service-module-body .service-filter-disclosure .service-filter-actions { display: grid; grid-template-columns: 1fr; }
  .dashboard-todo-panel > .panel-heading { padding: 20px 18px 15px; }
  .dashboard-todo-panel .daily-todo-create { grid-template-columns: minmax(0, 1fr) 48px 48px !important; gap: 8px !important; padding: 14px 14px 17px !important; }
  .dashboard-todo-panel .daily-todo-create-copy .daily-todo-title-input { min-height: 48px; padding-inline: 13px; font-size: 14px; }
  .dashboard-todo-panel .daily-todo-deadline .icon-button { width: 48px; height: 48px; }
  .dashboard-todo-panel .daily-todo-create > .button { width: 48px; min-width: 48px; min-height: 48px; padding: 0; }
  .dashboard-todo-panel .daily-todo-create > .button span:last-child { display: none; }
  .dashboard-todo-panel .daily-todo-list { padding: 0 14px 12px; }
  .dashboard-todo-panel .daily-todo-list article { grid-template-columns: 31px minmax(0, 1fr) 38px 38px !important; gap: 7px !important; }
  .todo-calendar-menu > div,
  .actions-menu > div { box-sizing: border-box; right: 10px; bottom: 10px; left: 10px; width: auto; max-width: none; overflow-x: hidden; }
  .completed-todo-group { margin-inline: 14px; }
  .calendar-focus-grid { padding: 8px; }
  .calendar-focus-grid.calendar-focus-week { grid-template-columns: repeat(7, minmax(165px, 1fr)); }
  .calendar-focus-grid > .calendar-focus-day { min-height: 340px; }
  .calendar-focus-grid.calendar-focus-day > .calendar-focus-day { min-height: 460px; }
  .office-admin-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .office-admin-actions .button { width: 100%; }
  .module-maintenance-grid { grid-template-columns: 1fr; padding: 0 15px 15px; }
  .auto-stats,
  .auto-record-stats { grid-template-columns: 1fr; }
  .auto-vehicle-card { padding: 20px; }
  .auto-alert-list a { grid-template-columns: 42px minmax(0, 1fr) 16px; }
  .auto-alert-list a b { grid-column: 2; max-width: none; text-align: left; }
}

/* ===== v4.8.css ===== */
/* Tehnodent Office v4.8 — univerzalni podsetnici, osnovna sredstva i pregledniji Planner. */
[hidden] { display: none !important; }
.auto-module-body .module-workspace-sidebar,
.fixed-assets-module-body .module-workspace-sidebar { background: linear-gradient(180deg, #0b334d, #0a5267); }
.auto-hero,
.asset-hero { color: #fff; }
.auto-hero h1,
.auto-hero p,
.asset-hero h1,
.asset-hero p { color: #fff; }
.auto-hero .button.ghost,
.asset-hero .button.ghost { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; }
.reminder-hero { min-height: 300px; background: radial-gradient(circle at 87% 15%, rgba(20,169,207,.34), transparent 30%), linear-gradient(135deg, #082f47, #0b5c78); }
.asset-hero { min-height: 280px; border-radius: var(--ui-radius-lg); background: radial-gradient(circle at 88% 20%, rgba(71,207,176,.25), transparent 31%), linear-gradient(135deg,#0a344c,#11647a); box-shadow: 0 20px 50px rgba(8,52,73,.16); }
.light { color: #91ddef !important; }

/* Univerzalni podsetnici */
.reminder-page-heading { align-items: end; }
.reminder-stats { grid-template-columns: repeat(4,minmax(0,1fr)); }
.reminder-filter-form { grid-template-columns: minmax(220px,1.3fr) repeat(4,minmax(130px,.72fr)); width: 100%; }
.reminder-toolbar,.asset-results-heading { display:flex;align-items:end;justify-content:space-between;gap:16px;margin:18px 0 12px;color:var(--ui-muted);font-size:12px;font-weight:750; }
.reminder-list { display:grid;gap:12px; }
.reminder-list-card { position:relative;display:grid;grid-template-columns:52px minmax(250px,1.4fr) minmax(150px,.55fr) minmax(170px,.7fr) 18px;align-items:center;gap:16px;padding:18px 20px;border-left:5px solid var(--reminder-color);color:var(--ui-navy);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.reminder-list-card:hover { transform:translateY(-2px);box-shadow:0 16px 36px rgba(16,57,79,.13); }
.reminder-list-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:color-mix(in srgb,var(--reminder-color) 12%,white);color:var(--reminder-color); }
.reminder-list-icon svg { width:24px;height:24px; }
.reminder-list-copy,.reminder-list-meta { min-width:0;display:grid;gap:5px; }
.reminder-list-copy>span { display:flex;flex-wrap:wrap;align-items:center;gap:8px; }
.reminder-list-copy>span b { color:var(--reminder-color);font-size:10px;text-transform:uppercase;letter-spacing:.07em; }
.reminder-list-copy>strong { overflow-wrap:anywhere;font-size:16px; }
.reminder-list-copy small,.reminder-list-meta span { overflow:hidden;color:var(--ui-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap; }
.reminder-list-meta>small { color:#7c929d;font-size:9px;font-weight:850;letter-spacing:.08em; }
.reminder-list-meta>strong { font-size:14px; }
.reminder-template-card { width:min(870px,calc(100vw - 32px)); }
.reminder-template-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 24px 26px; }
.reminder-template-grid button,.reminder-template-grid a { min-width:0;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;gap:3px 13px;padding:18px;border:1px solid var(--ui-line);border-radius:17px;background:#f8fbfc;color:var(--ui-navy);font:inherit;text-align:left;cursor:pointer; }
.reminder-template-grid button:hover,.reminder-template-grid a:hover { border-color:#75c3d9;background:#eef8fb; }
.reminder-template-grid>*>span { grid-row:1/3;width:50px;height:50px;display:grid;place-items:center;border-radius:14px;background:#e5f4f8;color:var(--ui-blue); }
.reminder-template-grid svg { width:25px;height:25px; }
.reminder-template-grid strong { align-self:end;font-size:15px; }
.reminder-template-grid small { color:var(--ui-muted);font-size:11px;line-height:1.45; }
.reminder-entry-card { width:min(900px,calc(100vw - 32px)); }
.reminder-recurrence,.reminder-offset-picker,.warranty-mode { padding:16px;border:1px solid var(--ui-line);border-radius:15px;background:#f8fbfc; }
.reminder-recurrence>div { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.reminder-offset-picker>div { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:12px; }
.reminder-offset-picker>div label { display:flex;align-items:center;gap:8px;padding:11px;border:1px solid var(--ui-line);border-radius:11px;background:#fff; }
.reminder-offset-picker>div input { width:auto;min-height:0; }
.reminder-detail-hero { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;margin-bottom:16px;padding:28px;border-radius:var(--ui-radius-lg);background:radial-gradient(circle at 86% 15%,color-mix(in srgb,var(--reminder-color) 40%,transparent),transparent 32%),linear-gradient(135deg,#082f47,#0c5871);color:#fff; }
.reminder-detail-hero h1 { margin:7px 0;font-size:clamp(28px,4vw,44px); }
.reminder-detail-hero p { max-width:750px;margin:0;color:#c6dce5; }
.reminder-detail-due { min-width:190px;display:grid;gap:6px;padding:18px 22px;border:1px solid rgba(255,255,255,.2);border-radius:17px;background:rgba(255,255,255,.1); }
.reminder-detail-due>span { color:#8ed5e8;font-size:9px;font-weight:850;letter-spacing:.1em; }
.reminder-detail-due>strong { font-size:24px; }
.reminder-detail-due>small { width:max-content;padding:5px 8px;border-radius:99px;background:rgba(255,255,255,.15);font-weight:800; }
.reminder-detail-grid,.asset-detail-grid { display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px; }
.reminder-offset-summary { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px; }
.reminder-offset-summary span { padding:8px 10px;border-radius:99px;background:#e8f5f8;color:var(--ui-blue);font-size:10px;font-weight:850; }
.reminder-recipient-list { display:grid;gap:8px; }
.reminder-recipient-list>div { display:flex;align-items:center;gap:10px;padding:9px;border-radius:11px;background:#f6fafb; }
.reminder-recipient-list>div>span { display:grid;gap:2px; }
.reminder-recipient-list small { color:var(--ui-muted);font-size:10px; }
.reminder-history { display:grid; }
.reminder-history article { display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px;padding:11px 0;border-bottom:1px solid #e5edef; }
.reminder-history article>span { width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#e7f5ef;color:var(--ui-success); }
.reminder-history article>div { display:grid;gap:3px; }
.reminder-history small { color:var(--ui-muted);font-size:10px; }
.reminder-history p { margin:3px 0 0;color:#577686;font-size:11px; }

/* Osnovna sredstva */
.fixed-assets-module-body { background:var(--ui-bg); }
.asset-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.asset-card-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }
.asset-card { display:grid;gap:8px;padding:21px;color:var(--ui-navy);transition:transform .18s ease,box-shadow .18s ease; }
.asset-card:hover { transform:translateY(-3px);box-shadow:0 18px 42px rgba(16,57,79,.13); }
.asset-card-head { display:flex;align-items:start;justify-content:space-between;gap:10px; }
.asset-card-icon { width:52px;height:52px;display:grid;place-items:center;border-radius:16px;background:#e6f4f8;color:var(--ui-blue); }
.asset-card-icon svg { width:27px;height:27px; }
.asset-card h3 { margin:7px 0 0;font-size:18px;overflow-wrap:anywhere; }
.asset-card>p { margin:0;color:var(--ui-muted);font-size:12px; }
.asset-card-content { display:grid;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:13px;margin-top:7px; }
.asset-card dl { display:grid;gap:0;margin:0; }
.asset-card dl div { display:grid;grid-template-columns:1fr auto;gap:10px;padding:7px 0;border-bottom:1px solid #e8eff2; }
.asset-card dt { color:var(--ui-muted);font-size:9px; }
.asset-card dd { margin:0;font-size:10px;font-weight:800;text-align:right; }
.warranty-dial { --dial-color:#1a9ac0;position:relative;width:104px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--dial-color) calc(var(--warranty-percent) * 1%),#e7edf0 0); }
.warranty-dial::before { content:"";position:absolute;inset:10px;border-radius:50%;background:#fff; }
.warranty-dial>span { position:absolute;inset:0;display:grid;place-content:center;text-align:center; }
.warranty-dial strong { font-size:20px;line-height:1; }
.warranty-dial small { margin-top:4px;color:var(--ui-muted);font-size:8px; }
.warranty-dial.urgent,.warranty-dial.expired { --dial-color:var(--ui-danger); }
.warranty-dial.none { --dial-color:#a5b4bb; }
.warranty-dial.large { width:128px; }
.warranty-dial.large::before { inset:12px; }
.warranty-dial.large strong { font-size:26px; }
.asset-card-open { margin-top:7px;padding-top:12px;border-top:1px solid #e4ecef;color:var(--ui-blue);font-size:11px;font-weight:800; }
.asset-entry-card { width:min(860px,calc(100vw - 32px)); }
.segmented-control { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px; }
.segmented-control label { display:block; }
.segmented-control input { position:absolute;opacity:0;pointer-events:none; }
.segmented-control span { display:block;padding:11px;border:1px solid var(--ui-line);border-radius:11px;background:#fff;text-align:center;cursor:pointer; }
.segmented-control input:checked+span { border-color:#55b7d2;background:#e8f6fa;color:var(--ui-blue);font-weight:850; }
.clipboard-upload-zone { padding:17px;border:2px dashed #bbd6df;border-radius:15px;background:#f7fbfc; }
.clipboard-upload-zone.has-clipboard-file { border-color:#36ad87;background:#effaf6; }
.clipboard-upload-zone>[data-clipboard-upload-status] { color:var(--ui-success);font-size:11px;font-weight:800; }
.asset-detail-hero { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;margin-bottom:16px;padding:28px;border-radius:var(--ui-radius-lg);background:linear-gradient(135deg,#082f47,#0b5d74);color:#fff; }
.asset-detail-hero h1 { margin:7px 0;font-size:clamp(28px,4vw,44px); }
.asset-detail-hero p { margin:0;color:#c5dbe4; }
.asset-hero-warranty { display:flex;align-items:center;gap:18px;padding:14px 18px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(255,255,255,.1); }
.asset-hero-warranty>div:last-child { display:grid;gap:4px; }
.asset-hero-warranty>div:last-child>span { color:#90d7e7;font-size:9px;font-weight:850;letter-spacing:.1em; }
.asset-hero-warranty>div:last-child>strong { font-size:18px; }
.asset-hero-warranty>div:last-child>small { color:#c9dce4; }

/* Planner i servis */
.completed-items-toggle { width:max-content;margin:12px 0 2px; }
.task-quick-actions form { display:contents; }
.quick-action.todo { min-width:58px;background:#e8f5f8;color:var(--ui-blue); }
.todo-task-link { display:grid;gap:2px;color:var(--ui-navy); }
.todo-task-link small { color:var(--ui-blue);font-size:8px !important;font-weight:850;letter-spacing:.06em; }
.project-search-bar { align-items:center; }
.project-sort-select { min-width:220px;display:grid;grid-template-columns:auto minmax(150px,1fr);align-items:center;gap:8px;color:var(--ui-muted);font-size:10px;font-weight:850; }
.project-sort-select select { min-height:44px;padding:0 11px;border:1px solid var(--ui-line);border-radius:11px;background:#fff;color:var(--ui-navy); }
.service-attachment-panel { margin:18px 0; }
.service-module-body .service-table-wrap { width:100%;max-width:100%;overflow-x:hidden !important; }
.service-module-body .service-table { width:100%;min-width:0 !important;table-layout:fixed; }
.service-module-body .service-table th { padding:11px 10px;font-size:9px; }
.service-module-body .service-table td { min-width:0;padding:13px 10px;font-size:11px;overflow-wrap:anywhere; }
.service-module-body .service-table td strong { font-size:12px; }
.service-module-body .service-table td small { font-size:9px;line-height:1.35; }
.service-module-body .service-table code { max-width:100%;display:inline-block;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap; }
.service-module-body .service-table .service-due-badge { padding:6px 7px;font-size:8px;white-space:normal;text-align:center; }

@media (max-width:1180px) {
  .reminder-filter-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .asset-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reminder-list-card { grid-template-columns:48px minmax(220px,1fr) minmax(130px,.5fr) 18px; }
  .reminder-list-card .reminder-list-meta:nth-of-type(3) { display:none; }
}
@media (max-width:900px) {
  .reminder-detail-grid,.asset-detail-grid { grid-template-columns:1fr; }
  .reminder-detail-hero,.asset-detail-hero { grid-template-columns:1fr; }
  .asset-hero-warranty { width:max-content;max-width:100%; }
  .service-module-body .service-table-wrap { overflow:visible !important; }
}
@media (max-width:760px) {
  .reminder-stats,.asset-stats { grid-template-columns:1fr; }
  .reminder-list-card { grid-template-columns:44px minmax(0,1fr) 16px;gap:10px;padding:15px; }
  .reminder-list-card .reminder-list-meta { grid-column:2; }
  .reminder-list-card .reminder-list-meta:nth-of-type(3) { display:grid; }
  .reminder-template-grid,.asset-card-grid { grid-template-columns:1fr; }
  .reminder-offset-picker>div,.reminder-recurrence>div { grid-template-columns:1fr; }
  .asset-card-content { grid-template-columns:minmax(0,1fr) 96px; }
  .warranty-dial { width:92px; }
  .asset-hero-warranty { display:grid;grid-template-columns:auto minmax(0,1fr); }
  .project-search-bar { grid-template-columns:1fr !important; }
  .project-sort-select { width:100%;grid-template-columns:1fr; }
}

/* ===== v4.9.css ===== */
/*
 * Tehnodent Office v4.9
 *
 * Koristi iskljucivo dizajn tokene iz app.css (:root) da bi novi ekrani
 * imali iste boje, razmake, radijuse i senke kao Planner/Projekti.
 * Tipografija je namerno krupnija jer deo tima slabije vidi.
 */
/* ---------------------------------------------------------------
   Prekidac prikaza (kartice / lista / tabela / ikonice)
   --------------------------------------------------------------- */
.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.view-switch a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blue-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.view-switch a:hover {
  background: rgba(255, 255, 255, 0.75);
}

.view-switch a.active {
  background: var(--surface);
  color: var(--navy);
  box-shadow: 0 4px 12px rgba(19, 57, 82, 0.12);
}

.view-switch .app-icon {
  width: 19px;
  height: 19px;
  flex: none;
}

.asset-results-tools,
.office-section-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.office-section-tools {
  justify-content: flex-end;
}

/* ---------------------------------------------------------------
   Osnovna sredstva - prikaz LISTA
   --------------------------------------------------------------- */
.asset-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.asset-list-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1.4fr) minmax(0, 1.6fr) auto 22px;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.asset-list-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(19, 57, 82, 0.12);
}

.asset-list-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.asset-list-icon .app-icon {
  width: 26px;
  height: 26px;
}

.asset-list-main {
  min-width: 0;
}

.asset-list-main strong {
  display: block;
  font-size: 1.12rem;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.asset-list-main small {
  display: block;
  margin-top: 3px;
  font-size: 0.95rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.asset-list-facts {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.asset-list-facts span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asset-list-facts small {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
}

.asset-list-facts b {
  font-size: 1rem;
  color: var(--ink);
}

.asset-list-arrow {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--muted);
  text-align: right;
}

/* ---------------------------------------------------------------
   Osnovna sredstva - prikaz TABELA
   --------------------------------------------------------------- */
.asset-table-panel {
  padding: 8px;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
}

table.asset-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

table.asset-table th,
table.asset-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

table.asset-table thead th {
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--canvas);
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}

table.asset-table thead th:first-child {
  border-top-left-radius: 12px;
}

table.asset-table thead th:last-child {
  border-top-right-radius: 12px;
}

table.asset-table tbody tr:last-child th,
table.asset-table tbody tr:last-child td {
  border-bottom: none;
}

table.asset-table tbody tr:hover {
  background: var(--blue-soft);
}

table.asset-table tbody th[scope="row"] {
  font-weight: 700;
}

table.asset-table tbody th[scope="row"] a {
  color: var(--navy);
  text-decoration: none;
}

table.asset-table tbody th[scope="row"] a:hover {
  text-decoration: underline;
}

.asset-table-open {
  width: 44px;
  text-align: center;
}

.asset-table-open a {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--blue-dark);
  text-decoration: none;
}

.asset-table-open a:hover {
  background: var(--surface);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------
   Office pocetna - prikazi modula
   --------------------------------------------------------------- */
.office-module-grid.view-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 18px;
}

.office-module-grid.view-icons .office-module-card {
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 16px;
  min-height: 0;
}

.office-module-grid.view-icons .office-module-card p,
.office-module-grid.view-icons .office-module-card .office-module-action {
  display: none;
}

.office-module-grid.view-icons .office-module-icon {
  width: 68px;
  height: 68px;
  border-radius: 20px;
}

.office-module-grid.view-icons .office-module-icon .app-icon {
  width: 34px;
  height: 34px;
}

.office-module-grid.view-icons .office-module-card h3 {
  font-size: 1.06rem;
  margin: 0;
}

.office-module-grid.view-icons .office-module-status {
  position: static;
  order: 3;
  font-size: 0.72rem;
  padding: 4px 12px;
}

.office-module-grid.view-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.office-module-grid.view-list .office-module-card {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  grid-template-areas: "icon title status" "icon text action";
  align-items: center;
  gap: 6px 18px;
  padding: 18px 22px;
  min-height: 0;
}

.office-module-grid.view-list .office-module-icon {
  grid-area: icon;
  width: 60px;
  height: 60px;
}

.office-module-grid.view-list .office-module-card h3 {
  grid-area: title;
  margin: 0;
  font-size: 1.18rem;
}

.office-module-grid.view-list .office-module-card p {
  grid-area: text;
  margin: 0;
  font-size: 0.98rem;
}

.office-module-grid.view-list .office-module-status {
  grid-area: status;
  position: static;
  justify-self: end;
}

.office-module-grid.view-list .office-module-action {
  grid-area: action;
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Kalendar - brzo biranje godine
   --------------------------------------------------------------- */
.eu-date-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--navy);
  transition: background 0.15s ease;
}

.eu-date-title:hover {
  background: var(--blue-soft);
}

.eu-date-title strong {
  font-size: 1.12rem;
  font-weight: 800;
}

.eu-date-title i {
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--blue-dark);
  transition: transform 0.18s ease;
}

.eu-date-popover.year-open .eu-date-title i {
  transform: rotate(180deg);
}

.eu-date-yearwheel {
  max-height: 268px;
  overflow-y: auto;
  scroll-behavior: smooth;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 4px;
  scrollbar-width: thin;
}

.eu-date-yearwheel button {
  padding: 12px 4px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  transition: background 0.12s ease, color 0.12s ease;
}

.eu-date-yearwheel button:hover {
  background: var(--blue-soft);
}

.eu-date-yearwheel button.selected {
  background: var(--blue);
  color: #fff;
}

/* Dok je izbor godine otvoren, dani i nazivi dana se sklanjaju. */
.eu-date-popover.year-open .eu-date-days,
.eu-date-popover.year-open .eu-date-week {
  display: none;
}

/* ---------------------------------------------------------------
   Prilozi - slike se otvaraju, ne skidaju
   --------------------------------------------------------------- */
.attachment-thumb {
  display: block;
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--canvas);
}

.attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.attachment-list article:hover .attachment-thumb {
  border-color: var(--blue);
}

/* ---------------------------------------------------------------
   Mobilni prikaz
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .asset-list-row {
    grid-template-columns: 48px minmax(0, 1fr) 22px;
    grid-template-areas: "icon main arrow" "facts facts facts" "badge badge badge";
    gap: 12px;
  }

  .asset-list-icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
  }

  .asset-list-main {
    grid-area: main;
  }

  .asset-list-arrow {
    grid-area: arrow;
  }

  .asset-list-facts {
    grid-area: facts;
    gap: 18px;
  }

  .asset-list-row .service-due-badge {
    grid-area: badge;
    justify-self: start;
  }

  .office-module-grid.view-list .office-module-card {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas: "icon title" "icon status" "text text" "action action";
    gap: 6px 14px;
  }

  .office-module-grid.view-list .office-module-icon {
    width: 52px;
    height: 52px;
  }

  .office-module-grid.view-list .office-module-status,
  .office-module-grid.view-list .office-module-action {
    justify-self: start;
  }

  .asset-results-tools,
  .office-section-tools {
    width: 100%;
    justify-content: space-between;
  }

  .view-switch a span {
    display: none;
  }

  .view-switch a {
    padding: 10px 14px;
  }
}

@media (max-width: 560px) {
  .eu-date-yearwheel {
    grid-template-columns: repeat(3, 1fr);
    max-height: 232px;
  }
}

/* ===== v5.1.css ===== */
/*
 * Tehnodent Office v5.1
 *
 * Zapisnik, widgeti radnog prostora i ujednačavanje modula.
 * Sve boje, razmaci i radijusi dolaze iz tokena definisanih u app.css.
 */
/* ==================================================================
   1. ZAJEDNIČKI RITAM MODULA
   Heroji, naslovi i filteri su ranije imali različite veličine po
   modulima. Ovde se izjednačavaju da Projekti, Podsetnici, Osnovna
   sredstva, Servis i Zapisnik izgledaju kao jedan sistem.
   ================================================================== */
.module-hero,
.asset-hero,
.auto-hero,
.notes-hero {
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 38px);
  margin-bottom: 22px;
}

.module-hero h1,
.asset-hero h1,
.auto-hero h1 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.14;
  margin: 6px 0 10px;
}

.module-hero p,
.asset-hero p,
.auto-hero p {
  font-size: 1.05rem;
  max-width: 62ch;
}

.asset-results-heading,
.auto-results-heading,
.notes-sidebar-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 26px 0 16px;
}

.asset-results-heading h2,
.auto-results-heading h2 {
  font-size: 1.5rem;
  margin: 4px 0 2px;
}

/* Jedinstven razmak između sekcija u svim modulima. */
.module-workspace-content > section + section,
.module-workspace-content > div + section,
.module-workspace-content > section + div {
  margin-top: 22px;
}

/* ==================================================================
   2. RADNI PROSTOR — WIDGETI
   ================================================================== */
.workspace-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 26px 0 16px;
}

.workspace-bar h2 {
  font-size: 1.45rem;
  margin: 4px 0 4px;
}

.workspace-bar p {
  color: var(--muted);
  font-size: 0.98rem;
  margin: 0;
}

.workspace-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.widget-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(210px, auto);
  gap: 18px;
  align-items: stretch;
}

.widget-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

/* Varijante veličine — "uži i viši", "širi i niži"… */
.widget-block.size-sm   { grid-column: span 1; grid-row: span 1; }
.widget-block.size-tall { grid-column: span 1; grid-row: span 2; }
.widget-block.size-wide { grid-column: span 2; grid-row: span 1; }
.widget-block.size-lg   { grid-column: span 2; grid-row: span 2; }

.widget-block.dragging {
  opacity: 0.6;
  transform: scale(0.985);
  box-shadow: 0 22px 48px rgba(19, 57, 82, 0.22);
}

.widget-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--canvas), var(--surface));
}

.widget-head h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.02rem;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-grip {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--muted);
  cursor: grab;
  border-radius: 8px;
  touch-action: none;
}

.widget-grip:active {
  cursor: grabbing;
  background: var(--blue-soft);
}

.widget-grip .app-icon {
  width: 18px;
  height: 18px;
}

.widget-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.widget-icon .app-icon {
  width: 18px;
  height: 18px;
}

.widget-menu summary {
  width: 30px;
  height: 30px;
}

.widget-menu button.active {
  color: var(--blue-dark);
  font-weight: 700;
}

.widget-body {
  flex: 1;
  min-height: 0;
  padding: 14px 16px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.widget-more {
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blue-dark);
  text-decoration: none;
}

.widget-more:hover { text-decoration: underline; }

/* --- sadržaj pojedinih widgeta --- */
.widget-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.widget-stat-grid a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: var(--canvas);
}

.widget-stat-grid a:hover { border-color: var(--blue); }
.widget-stat-grid small { display: block; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
.widget-stat-grid strong { font-size: 1.5rem; color: var(--navy); }

.widget-todo-create {
  display: flex;
  gap: 8px;
  align-items: center;
}

.widget-todo-create input[type="text"],
.widget-todo-create .daily-todo-title-input {
  flex: 1;
  min-width: 0;
}

.widget-todo-list,
.widget-task-list,
.widget-feed,
.widget-issue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.widget-todo-list article {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.widget-todo-list strong { display: block; font-size: 0.98rem; color: var(--ink); }
.widget-todo-list small { font-size: 0.82rem; color: var(--muted); }
.widget-todo-list small.overdue { color: var(--danger); font-weight: 700; }

.widget-task-list a,
.widget-feed a,
.widget-issue-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

.widget-task-list a:hover,
.widget-feed a:hover,
.widget-issue-list a:hover { border-color: var(--blue); background: var(--blue-soft); }

.widget-task-copy,
.widget-feed a > span:last-child,
.widget-issue-list a > span:last-child { min-width: 0; flex: 1; }

.widget-task-copy strong,
.widget-feed strong,
.widget-issue-list strong {
  display: block;
  font-size: 0.98rem;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-task-copy small,
.widget-feed small,
.widget-issue-list small {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-task-list a.overdue strong { color: var(--danger); }
.widget-flag { color: var(--danger); font-size: 1rem; }

.widget-feed-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--line);
}

.widget-feed a.unread .widget-feed-dot { background: var(--blue); }
.widget-feed-dot.danger { background: var(--danger); }

.widget-shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.widget-shortcuts a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
  color: var(--navy);
  text-align: center;
  font-size: 0.9rem;
}

.widget-shortcuts a:hover { border-color: var(--blue); background: var(--blue-soft); }
.widget-shortcuts span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-dark); }

.widget-calendar { display: flex; flex-direction: column; gap: 10px; }

.widget-calendar-day {
  display: flex;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.widget-calendar-day.today { border-color: var(--blue); background: var(--blue-soft); }

.widget-calendar-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 4px 6px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.widget-calendar-date b { font-size: 1.15rem; color: var(--navy); line-height: 1; }
.widget-calendar-date small { font-size: 0.66rem; letter-spacing: 0.06em; color: var(--muted); }
.widget-calendar-day > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.widget-calendar-day a { font-size: 0.92rem; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-calendar-day a:hover { text-decoration: underline; }

/* --- izbor widgeta --- */
.widget-picker-card { max-width: 760px; }

.widget-picker-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: 4px;
}

.widget-picker-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 6px 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.widget-picker-item .widget-icon { width: 44px; height: 44px; grid-row: span 2; }
.widget-picker-item strong { display: block; font-size: 1.02rem; color: var(--navy); }
.widget-picker-item small { color: var(--muted); font-size: 0.9rem; }

.widget-picker-sizes {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.widget-picker-sizes form { display: contents; }

/* ==================================================================
   3. ZAPISNIK
   ================================================================== */
.notes-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.notes-sidebar {
  position: sticky;
  top: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notes-sidebar-head { margin: 0; align-items: center; }
.notes-sidebar-head h2 { font-size: 1.25rem; margin: 2px 0 0; }
.notes-new-form button { white-space: nowrap; }

.notes-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
}

.notes-search input { border: none; background: transparent; width: 100%; font-size: 0.98rem; }
.notes-search input:focus { outline: none; }
.notes-search .app-icon { width: 18px; height: 18px; color: var(--muted); }

.notes-page-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
}

.notes-page-item {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: background 0.14s ease, border-color 0.14s ease;
}

.notes-page-item:hover { background: var(--canvas); }
.notes-page-item.active { background: var(--blue-soft); border-color: var(--blue); }
.notes-page-item.dragging { opacity: 0.55; }

.notes-page-grip {
  display: grid;
  place-items: center;
  width: 22px;
  color: var(--muted);
  cursor: grab;
  flex: none;
}

.notes-page-grip .app-icon { width: 15px; height: 15px; }

.notes-page-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 2px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.notes-page-swatch {
  width: 22px;
  height: 28px;
  flex: none;
  border-radius: 5px;
  background: var(--page-color, #fff);
  border: 1px solid var(--line);
  box-shadow: inset -3px 0 0 rgba(19, 57, 82, 0.06);
}

.notes-page-copy { min-width: 0; }
.notes-page-copy strong { display: block; font-size: 0.98rem; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-page-copy small { display: block; font-size: 0.8rem; color: var(--muted); }
.notes-page-empty { padding: 18px 10px; color: var(--muted); font-size: 0.95rem; }
.notes-reorder-hint { margin: 0; font-size: 0.82rem; color: var(--muted); }

.notes-canvas-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.notes-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.notes-toolbar-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notes-rename-form { display: flex; align-items: center; gap: 8px; }
.notes-rename-form input {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navy);
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--canvas);
  min-width: 200px;
}
.notes-rename-form input:focus { border-color: var(--blue); outline: none; background: var(--surface); }

.notes-save-state { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.notes-save-state[data-state="ok"] { color: var(--success); }
.notes-save-state[data-state="pending"] { color: var(--warning); }
.notes-save-state[data-state="error"] { color: var(--danger); }

.notes-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.notes-tool-group { display: inline-flex; gap: 4px; padding: 4px; background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; }

.notes-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--blue-dark);
}

.notes-tool:hover { background: rgba(255, 255, 255, 0.8); }
.notes-tool.active { background: var(--surface); color: var(--navy); box-shadow: 0 3px 10px rgba(19, 57, 82, 0.12); }
.notes-tool .app-icon { width: 18px; height: 18px; }
.notes-tool span:only-child { font-size: 1.1rem; line-height: 1; }

.notes-color-group { display: inline-flex; gap: 6px; }

.notes-ink {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--ink);
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 2px #fff;
}

.notes-ink.active { border-color: var(--navy); transform: scale(1.1); }

.notes-size { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); font-weight: 700; }
.notes-size input { width: 96px; }

.notes-canvas-wrap {
  position: relative;
  background: var(--page-color, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.notes-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: crosshair;
}

.notes-canvas-wrap canvas.erasing { cursor: cell; }

/* Podloge stranice — crtaju se ispod poteza. */
.notes-canvas-wrap.lined::before,
.notes-canvas-wrap.grid::before,
.notes-canvas-wrap.dots::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.notes-canvas-wrap.lined::before {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 37px,
    rgba(19, 57, 82, 0.12) 37px,
    rgba(19, 57, 82, 0.12) 38px
  );
}

.notes-canvas-wrap.grid::before {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(19,57,82,0.1) 31px, rgba(19,57,82,0.1) 32px),
    repeating-linear-gradient(to right, transparent 0, transparent 31px, rgba(19,57,82,0.1) 31px, rgba(19,57,82,0.1) 32px);
}

.notes-canvas-wrap.dots::before {
  background-image: radial-gradient(circle, rgba(19,57,82,0.18) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
}

.notes-pencil-hint { margin: 0; font-size: 0.88rem; color: var(--muted); }
.notes-empty { text-align: center; }

.notes-color-choice { display: flex; gap: 10px; flex-wrap: wrap; }
.notes-color-choice label { cursor: pointer; }
.notes-color-choice input { position: absolute; opacity: 0; pointer-events: none; }
.notes-color-choice span {
  display: block;
  width: 44px;
  height: 54px;
  border-radius: 8px;
  background: var(--page-color);
  border: 2px solid var(--line);
}
.notes-color-choice input:checked + span { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

/* ==================================================================
   4. MOBILNI I TABLET PRIKAZ
   ================================================================== */
@media (max-width: 1180px) {
  .widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .widget-block.size-wide,
  .widget-block.size-lg { grid-column: span 2; }
}

@media (max-width: 980px) {
  .notes-shell { grid-template-columns: 1fr; }
  .notes-sidebar { position: static; max-height: none; }
  .notes-page-list { max-height: 320px; }
  .notes-tools { margin-left: 0; width: 100%; }
}

@media (max-width: 760px) {
  .widget-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .widget-block.size-sm,
  .widget-block.size-tall,
  .widget-block.size-wide,
  .widget-block.size-lg { grid-column: span 1; grid-row: span 1; }
  .widget-body { max-height: 420px; }

  .workspace-bar-actions { width: 100%; }
  .workspace-bar-actions .button { flex: 1; justify-content: center; }

  .notes-toolbar { gap: 10px; }
  .notes-rename-form input { min-width: 0; width: 100%; }
  .notes-tool span:not(:only-child) { display: none; }
  .notes-tool { padding: 10px 12px; }
  .notes-size { width: 100%; }
  .notes-size input { flex: 1; width: auto; }
  .widget-picker-item { grid-template-columns: 40px minmax(0, 1fr); }
}

/* v5.2 — prekidač "Samo olovka" u Zapisniku */
.notes-pen-only {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue-dark);
  cursor: pointer;
  white-space: nowrap;
}

.notes-pen-only input { width: 17px; height: 17px; cursor: pointer; }

.notes-canvas-area.pen-detected .notes-pen-only {
  border-color: var(--success);
  color: var(--success);
  background: var(--success-soft);
}

/* ===== v5.2.css ===== */
/*
 * Tehnodent Office v5.2
 *
 * 1. Sistemske ispravke prelamanja i prelivanja (tekst beži, box ide ispod boxa)
 * 2. Zapisnik: postavljene datoteke, pun ekran, pinovanje
 * 3. Widgeti na Office početnoj
 */
/* ==================================================================
   1. SISTEMSKE ISPRAVKE PRELAMANJA
   Najčešći uzrok "teksta koji beži" je duga reč bez razmaka (naziv
   datoteke, email, serijski broj, URL) u grid/flex ćeliji. Grid stavke
   podrazumevano imaju min-width:auto i zato ne mogu da se skupe, pa
   guraju susedni sadržaj van okvira.
   ================================================================== */

/* Grid i flex deca smeju da se skupe ispod svog sadržaja. */
.form-grid > *,
.today-stats > *,
.widget-grid > *,
.asset-card-grid > *,
.office-module-grid > *,
.module-hero > *,
.panel-heading > *,
.auto-document-list article > *,
.widget-stat-grid > *,
.notes-page-item > * {
  min-width: 0;
}

/* Duge reči se prelamaju umesto da izlaze iz okvira. */
.panel-heading h2,
.panel-heading p,
.widget-head h3,
.widget-task-copy strong,
.widget-feed strong,
.asset-card h3,
.asset-card p,
.asset-list-main strong,
.asset-list-main small,
.notes-page-copy strong,
.office-module-card h3,
.office-module-card p,
.daily-todo-copy strong,
.today-task a strong,
.auto-document-list strong,
.auto-document-list small,
.service-detail-head h1,
.module-hero h1,
.module-hero p,
.empty-state h3,
.empty-state p {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Tabele: ćelije se prelamaju, a ne razvlače tabelu preko ekrana. */
table.data-table td,
table.data-table th,
table.asset-table td,
table.asset-table th {
  overflow-wrap: anywhere;
}

/* Dugmad u redovima ne smeju da se lome na dva reda usred reči. */
.button,
.notes-tool,
.view-switch a {
  white-space: nowrap;
}

/* Zaglavlja panela: naslov i akcija se prelamaju u dva reda na uskom ekranu
   umesto da akcija ispadne iz kutije. */
.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.panel-heading > div {
  flex: 1 1 240px;
}

/* Redovi sa akcijama: nikad horizontalni scroll, uvek prelom. */
.module-hero-actions,
.service-detail-actions,
.reminder-detail-actions,
.auto-record-actions,
.form-actions,
.asset-results-tools,
.office-section-tools,
.workspace-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Meniji sa tri tačke ne smeju da izađu iz ekrana na desnoj ivici. */
.actions-menu > div {
  max-width: min(280px, calc(100vw - 32px));
}

.actions-menu button,
.actions-menu a {
  overflow-wrap: anywhere;
  text-align: left;
}

/* Slike se nikada ne prelivaju preko kontejnera. */
.panel img,
.widget-body img,
.modal-card img {
  max-width: 100%;
  height: auto;
}

/* Modali na niskim ekranima dobijaju svoj scroll umesto da seku sadržaj. */
.modal-card {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

/* ==================================================================
   2. ZAPISNIK — postavljene datoteke, pun ekran, pin
   ================================================================== */
.notes-page-pin {
  font-size: 0.85rem;
  line-height: 1;
  flex: none;
}

.notes-canvas-wrap.has-background-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--page-image);
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.notes-canvas-wrap canvas {
  position: relative;
  z-index: 1;
}

.notes-items-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.notes-item {
  position: absolute;
  pointer-events: auto;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(19, 57, 82, 0.16);
  overflow: visible;
}

.notes-item:hover,
.notes-item.is-active {
  border-color: var(--blue);
}

.notes-item-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.notes-item.is-image .notes-item-body img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
}

.notes-item-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  width: 100%;
  min-width: 0;
}

.notes-item-file strong {
  font-size: 0.95rem;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notes-item-file .app-icon {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--blue-dark);
}

.notes-item-tools {
  position: absolute;
  top: -14px;
  right: -6px;
  display: none;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 3;
}

.notes-item:hover .notes-item-tools,
.notes-item.is-active .notes-item-tools {
  display: flex;
}

.notes-item-tools form {
  display: contents;
}

.notes-item-tools button,
.notes-item-tools a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--blue-dark);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  text-decoration: none;
}

.notes-item-tools button:hover,
.notes-item-tools a:hover {
  background: var(--blue-soft);
}

.notes-item-move {
  cursor: grab;
  touch-action: none;
}

.notes-item-move:active {
  cursor: grabbing;
}

.notes-item-resize {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid #fff;
  cursor: nwse-resize;
  display: none;
  touch-action: none;
}

.notes-item:hover .notes-item-resize,
.notes-item.is-active .notes-item-resize {
  display: block;
}

/* Pun ekran: alatna traka ostaje zakačena na vrhu, kako je traženo. */
.notes-canvas-area.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--canvas);
  padding: 14px;
  overflow-y: auto;
  gap: 12px;
}

.notes-canvas-area.is-fullscreen .notes-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
}

.notes-canvas-area.is-fullscreen .notes-canvas-wrap {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* ==================================================================
   3. WIDGETI NA OFFICE POČETNOJ
   ================================================================== */
.office-workspace-bar {
  margin-top: 34px;
}

.office-module-grid + .office-workspace-bar {
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

/* ==================================================================
   4. MOBILNI PRIKAZ — sprečavanje horizontalnog pomeranja
   ================================================================== */
@media (max-width: 760px) {
  .panel-heading > div {
    flex: 1 1 100%;
  }

  .module-hero-actions .button,
  .workspace-bar-actions .button,
  .form-actions .button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .notes-item-tools {
    top: -16px;
    right: -4px;
  }

  .notes-item-tools button,
  .notes-item-tools a {
    width: 32px;
    height: 32px;
  }

  .notes-item-resize {
    width: 22px;
    height: 22px;
  }

  .notes-canvas-area.is-fullscreen {
    padding: 8px;
  }
}

/*
 * v5.2.1 — uzrok nevidljivih prozora na užim ekranima.
 *
 * v4.7.css postavlja `overflow-x: clip` na kontejner sadržaja do 680px.
 * `clip` odseca i potomke sa `position: fixed`, pa su prozori bili odsečeni.
 * `hidden` jednako sprečava horizontalno pomeranje, ali pušta `fixed` sadržaj.
 * Prozori se uz to i premeštaju u <body> pri otvaranju, pa su zaštićeni dvaput.
 */
@media (max-width: 680px) {
  .page-content,
  .module-workspace-content {
    overflow-x: hidden;
  }
}

/* ===== v5.3.css ===== */
/*
 * Tehnodent Office v5.3
 */
/* ==================================================================
   1. FILTERI U SERVISNIM PODSETNICIMA — panel je bežao iza liste
   Uzrok: service.css u @media (min-width: 1041px) postavlja
   `overflow: hidden` na .service-register-heading, a filter panel je
   `position: absolute` unutar njega. Roditelj ga je odsecao, pa je
   izgledalo kao da ulazi iza tabele. Na užim ekranima je radilo jer
   je tamo overflow već `visible`.
   ================================================================== */
@media (min-width: 1041px) {
  .service-module-body .service-register-heading {
    overflow: visible;
  }
}

/* Panel mora biti iznad tabele i imati punu podlogu. */
.service-register-heading .service-filter-disclosure > .service-filters,
.module-filter-disclosure > .module-filter-form {
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 22px 55px rgba(9, 51, 73, 0.18);
}

/* Zaglavlje ne sme da preklopi panel svojim slojem. */
.service-module-body .service-register-heading {
  position: relative;
  z-index: 20;
}

.service-module-body .service-register .service-table-wrap,
.service-module-body .service-register table {
  position: relative;
  z-index: 1;
}

/* ==================================================================
   2. IZBOR WIDGETA PREKO CELOG EKRANA
   ================================================================== */
.widget-picker-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px clamp(16px, 4vw, 48px) 30px;
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.widget-picker-sheet.is-open { opacity: 1; transform: none; }

.wps-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  color: #fff;
  flex: none;
}

.wps-head h2 { margin: 6px 0 4px; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; }
.wps-head p { margin: 0; color: rgba(255, 255, 255, 0.76); font-size: 1rem; }
.eyebrow.light { color: var(--blue); }

.wps-close {
  width: 46px; height: 46px; flex: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.wps-close:hover { background: rgba(255, 255, 255, 0.2); }

.wps-track {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 10px;
  scrollbar-width: thin;
}

.wps-card {
  scroll-snap-align: center;
  flex: 0 0 min(330px, 82vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border-radius: 22px;
  box-shadow: 0 26px 60px rgba(4, 26, 40, 0.4);
  overflow-y: auto;
}

.wps-preview {
  display: grid;
  place-items: center;
  min-height: 168px;
  padding: 14px;
  border-radius: 16px;
  background: var(--canvas);
  border: 1px solid var(--line);
}

.wps-info { text-align: center; }
.wps-icon {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 8px;
  border-radius: 13px; background: var(--blue-soft); color: var(--blue-dark);
}
.wps-info h3 { margin: 0 0 4px; font-size: 1.12rem; color: var(--navy); }
.wps-info p { margin: 0; font-size: 0.92rem; color: var(--muted); }

.wps-sizes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.wps-size {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--ink);
  text-align: left;
}
.wps-size:hover { border-color: var(--blue); }
.wps-size.active { border-color: var(--blue); background: var(--blue-soft); color: var(--navy); }

.wps-size-shape { flex: none; background: var(--blue-dark); border-radius: 3px; opacity: 0.75; }
.wps-size-shape.shape-sm { width: 12px; height: 12px; }
.wps-size-shape.shape-tall { width: 10px; height: 18px; }
.wps-size-shape.shape-wide { width: 20px; height: 11px; }
.wps-size-shape.shape-lg { width: 18px; height: 18px; }

.wps-add { margin-top: auto; }

.wps-dots { display: flex; justify-content: center; gap: 7px; flex: none; }

/* --- maketa widgeta u pregledu --- */
.wp-frame {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: max-width 0.2s ease, min-height 0.2s ease;
}
.wp-frame.size-sm   { max-width: 148px; min-height: 118px; }
.wp-frame.size-tall { max-width: 132px; min-height: 176px; }
.wp-frame.size-wide { max-width: 268px; min-height: 112px; }
.wp-frame.size-lg   { max-width: 250px; min-height: 168px; }

.wp-head { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.wp-dot { width: 12px; height: 12px; border-radius: 4px; background: var(--blue-soft); border: 1px solid var(--blue); flex: none; }
.wp-bar { height: 6px; width: 54%; border-radius: 99px; background: var(--line); }
.wp-body { display: flex; flex-direction: column; gap: 6px; padding: 9px; }
.wp-row { display: flex; align-items: center; gap: 6px; }
.wp-check { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--blue); flex: none; }
.wp-text { font-size: 0.56rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-line { height: 6px; border-radius: 99px; background: var(--line); }
.wp-line.long { width: 78%; }
.wp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.wp-stats span { display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 7px; background: var(--canvas); }
.wp-stats b { font-size: 0.72rem; color: var(--navy); }
.wp-stats i { height: 4px; width: 60%; border-radius: 99px; background: var(--line); }
.wp-cal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-bottom: 4px; }
.wp-cal span { aspect-ratio: 1; border-radius: 3px; background: var(--canvas); }
.wp-cal span.on { background: var(--blue); }
.wp-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.wp-tiles span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 3px; border-radius: 7px; background: var(--canvas); }
.wp-tiles i { width: 12px; height: 12px; border-radius: 4px; background: var(--blue-soft); }
.wp-tiles b { font-size: 0.5rem; color: var(--muted); }

@media (max-width: 760px) {
  .widget-picker-sheet { padding: 18px 14px 22px; }
  .wps-card { flex-basis: 84vw; }
  .wps-head h2 { font-size: 1.5rem; }
}

/* ==================================================================
   3. JEDNAK IZGLED MENIJA I IKONICA U SVIM MODULIMA
   Do sada je svaki modul imao svoj gradijent menija (archive.css,
   auto.css, v4.7.css i v4.8.css su davali četiri različite nijanse),
   pa je prelazak iz modula u modul izgledao kao druga aplikacija.
   Ovde se sve svodi na jedan izvor istine.
   ================================================================== */
.sidebar,
.service-sidebar,
.module-workspace-sidebar,
.archive-module-body .module-workspace-sidebar,
.auto-module-body .module-workspace-sidebar,
.fixed-assets-module-body .module-workspace-sidebar,
.notes-module-body .module-workspace-sidebar,
.service-module-body .service-sidebar {
  background: linear-gradient(180deg, var(--navy), #0a5267);
}

/* Ikonice u meniju: ista boja i veličina svuda. */
.sidebar nav a .app-icon,
.module-workspace-sidebar nav a .app-icon,
.service-sidebar nav a .app-icon {
  width: 21px;
  height: 21px;
  color: currentColor;
  opacity: 0.92;
}

.sidebar nav a.active .app-icon,
.module-workspace-sidebar nav a.active .app-icon,
.service-sidebar nav a.active .app-icon {
  opacity: 1;
}

/* Ikonice u sadržaju modula: ista podloga i boja. */
.today-stat-icon.blue,
.widget-icon,
.asset-card-icon,
.asset-list-icon,
.wps-icon,
.notes-item-file .app-icon {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

/* ==================================================================
   4. RAZMACI U PODSETNICIMA
   Redovi u „Sledeći podsetnici“ i „Servisi i registracije“ bili su
   zbijeni, pa je lista delovala nepravilno. Klase su preuzete iz
   auto-dashboard.php: .auto-alert-list i .auto-mini-vehicles.
   ================================================================== */
.auto-alert-list > a,
.auto-alert-list > article,
.auto-mini-vehicles > a,
.auto-mini-vehicles > article {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.auto-alert-list > a:last-child,
.auto-alert-list > article:last-child,
.auto-mini-vehicles > a:last-child,
.auto-mini-vehicles > article:last-child {
  border-bottom: none;
}

.auto-alert-list > a:hover,
.auto-mini-vehicles > a:hover {
  background: var(--blue-soft);
}

.auto-alert-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.auto-alert-icon .app-icon { width: 20px; height: 20px; }

/* Naziv i podnaslov dobijaju prostor i prelamaju se umesto da beže. */
.auto-alert-list > a > div,
.auto-mini-vehicles > a > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.auto-alert-list strong,
.auto-mini-vehicles strong {
  font-size: 1rem;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.auto-alert-list small,
.auto-mini-vehicles small {
  font-size: 0.86rem;
  color: var(--muted);
}

.auto-alert-list .service-due-badge,
.auto-mini-vehicles .service-due-badge {
  margin-left: auto;
  flex: none;
}

.auto-alert-list .today-stat-arrow,
.auto-mini-vehicles .today-stat-arrow {
  flex: none;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
}

/* Zaglavlje panela dobija vazduh, isto kao u ostalim modulima. */
.auto-dashboard-grid .panel-heading,
.reminder-dashboard-grid .panel-heading {
  padding: 20px 18px 14px;
  gap: 14px;
}

.auto-dashboard-grid,
.reminder-dashboard-grid {
  gap: 20px;
}

@media (max-width: 900px) {
  .auto-dashboard-grid,
  .reminder-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Ikonica u „Servisi i registracije“ je običan <span> bez klase, pa mora
   posebno da se fiksira da se ne skupi kad naziv vozila bude duži. */
.auto-mini-vehicles > a > span:first-child {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.auto-mini-vehicles > a > span:first-child .app-icon { width: 20px; height: 20px; }

/* Desna oznaka („Proveri rok“) ne sme da se prelomi na dva reda. */
.auto-mini-vehicles > a > b {
  margin-left: auto;
  flex: none;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--blue-dark);
}

/* ==================================================================
   5. VREME ZADATKA (kalendar sa satnicom)
   ================================================================== */
.task-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.task-time-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

.task-time-row input[type="time"] {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
  color: var(--navy);
  background: var(--surface);
}

.task-time-row input[type="time"]:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.task-time-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
  color: var(--muted);
}

/* Projekti traju danima, pa im vreme nije potrebno. */
.project-form .task-time-row,
.project-form .task-time-hint { display: none; }

/* ==================================================================
   6. KALENDAR — SATNICA PO UZORU NA OUTLOOK
   ================================================================== */
.calendar-timegrid { display: block; overflow: hidden; }

.tg-head {
  display: grid;
  grid-template-columns: 68px repeat(var(--tg-days, 7), minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 3;
}
.calendar-timegrid.is-day .tg-head,
.calendar-timegrid.is-day .tg-allday,
.calendar-timegrid.is-day .tg-body { --tg-days: 1; }

.tg-day-head {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px;
  border-left: 1px solid var(--line);
}
.tg-day-head small { font-size: 0.68rem; letter-spacing: 0.08em; font-weight: 700; color: var(--muted); }
.tg-day-head b { font-size: 1.25rem; color: var(--navy); line-height: 1; }
.tg-day-head.is-today b {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--blue); color: #fff;
}

.tg-allday {
  display: grid;
  grid-template-columns: 68px repeat(var(--tg-days, 7), minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  min-height: 40px;
}
.tg-allday.is-empty { min-height: 30px; }
.tg-allday > span {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 6px 8px;
  font-size: 0.7rem; font-weight: 700; color: var(--muted);
}
.tg-allday-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 5px 4px;
  border-left: 1px solid var(--line);
  min-width: 0;
}

.tg-chip {
  display: block;
  padding: 4px 8px;
  border-radius: 6px;
  border-left: 3px solid var(--event-color, var(--blue));
  background: color-mix(in srgb, var(--event-color, #00a1d5) 14%, #fff);
  color: var(--navy);
  font-size: 0.76rem; font-weight: 600;
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tg-chip:hover { filter: brightness(0.96); }
.tg-chip.is-done { opacity: 0.55; text-decoration: line-through; }

.tg-body {
  display: grid;
  grid-template-columns: 68px repeat(var(--tg-days, 7), minmax(0, 1fr));
  max-height: 62vh;
  overflow-y: auto;
  position: relative;
}

.tg-hours { display: flex; flex-direction: column; }
.tg-hours span {
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 0 8px;
  font-size: 0.72rem; color: var(--muted);
  transform: translateY(-7px);
}

.tg-col { position: relative; border-left: 1px solid var(--line); min-width: 0; }
.tg-col.is-today { background: color-mix(in srgb, var(--blue-soft) 45%, #fff); }
.tg-col > i { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }

.tg-event {
  position: absolute;
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 7px;
  border-radius: 7px;
  border-left: 3px solid var(--event-color, var(--blue));
  background: color-mix(in srgb, var(--event-color, #00a1d5) 16%, #fff);
  color: var(--navy);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(19, 57, 82, 0.1);
}
.tg-event:hover { filter: brightness(0.97); z-index: 2; }
.tg-event small { font-size: 0.66rem; color: var(--muted); font-weight: 700; }
.tg-event strong {
  font-size: 0.8rem; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tg-event.is-done { opacity: 0.55; }
.tg-event.is-done strong { text-decoration: line-through; }

.tg-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 4; }
.tg-now::before {
  content: ""; position: absolute; left: -5px; top: -4px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--danger);
}

@media (max-width: 900px) {
  .tg-head, .tg-allday, .tg-body { grid-template-columns: 48px repeat(var(--tg-days, 7), minmax(78px, 1fr)); }
  .calendar-timegrid { overflow-x: auto; }
  .tg-hours span { font-size: 0.62rem; padding: 0 4px; }
  .tg-day-head b { font-size: 1.05rem; }
}

/* ===== v5.4.css ===== */
/*
 * Tehnodent Office v5.4
 */
/* ==================================================================
   1. VOĐA JE VEĆ ZADUŽEN — njegov blok se posivi
   ================================================================== */
.member-picker label.is-leader {
  opacity: 0.62;
  background: var(--canvas);
  border-color: var(--line);
  cursor: default;
  position: relative;
}

.member-picker label.is-leader input[type="checkbox"] {
  cursor: default;
}

.member-leader-tag {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==================================================================
   2. TO DO WIDGET — dugme „Dodaj“ je bilo odsečeno
   Panel je pisan za široku kolonu na stranici „Danas“; u uskom widgetu
   se raspored lomio. U widgetu se sve slaže jedno ispod drugog.
   ================================================================== */
.widget-todo-panel .daily-todo-create {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.widget-todo-panel .daily-todo-create-copy,
.widget-todo-panel .daily-todo-title-input {
  flex: 1 1 100%;
  min-width: 0;
}

.widget-todo-panel .daily-todo-create .button {
  flex: 1 1 auto;
  justify-content: center;
  white-space: nowrap;
}

.widget-todo-panel .daily-todo-create > *:not(.daily-todo-create-copy):not(.button) {
  flex: none;
}

/* Redovi liste ne smeju da izlaze iz uskog widgeta. */
.widget-todo-panel .daily-todo-row,
.widget-todo-panel .daily-todo-item {
  flex-wrap: wrap;
  gap: 8px;
}

.widget-todo-panel .daily-todo-copy,
.widget-todo-panel .todo-task-link {
  min-width: 0;
  flex: 1 1 auto;
}

.widget-todo-panel .daily-todo-copy strong,
.widget-todo-panel .todo-task-link strong {
  overflow-wrap: anywhere;
}

.widget-todo-panel .actions-menu > div {
  max-width: min(240px, calc(100vw - 32px));
}

/* Sve unutar widgeta poštuje širinu kolone. */
.widget-body > * {
  max-width: 100%;
  min-width: 0;
}

.widget-body form,
.widget-body .panel {
  box-shadow: none;
  border: none;
  padding: 0;
  background: transparent;
}

/* ==================================================================
   3. MENI WIDGETA — vizuelni oblici umesto golog teksta
   ================================================================== */
.widget-menu button.widget-size-option {
  display: flex;
  align-items: center;
  gap: 10px;
}

.widget-menu .wps-size-shape {
  flex: none;
  background: var(--blue-dark);
  border-radius: 3px;
  opacity: 0.7;
}

.widget-menu button.widget-size-option.active .wps-size-shape {
  opacity: 1;
  background: var(--blue);
}

/* ==================================================================
   4. POMERANJE BLOKOVA — mekši pokret
   Blokovi klize na novo mesto umesto da skoče, a blok koji se prevlači
   se blago podigne i zarotira, kao list papira.
   ================================================================== */
.widget-block {
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.24s ease,
    opacity 0.24s ease;
  will-change: transform;
}

.widget-block.dragging {
  opacity: 0.9;
  transform: scale(1.03) rotate(-0.8deg);
  box-shadow: 0 30px 60px rgba(19, 57, 82, 0.28);
  z-index: 30;
  cursor: grabbing;
}

.widget-grid.is-reordering .widget-block:not(.dragging) {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mesto na koje će blok pasti. */
.widget-block.drop-target {
  outline: 2px dashed var(--blue);
  outline-offset: 4px;
}

@keyframes widget-settle {
  0%   { transform: scale(1.02); }
  60%  { transform: scale(0.995); }
  100% { transform: scale(1); }
}

.widget-block.just-moved {
  animation: widget-settle 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==================================================================
   5. WIDGETI — življi i sa više odziva
   ================================================================== */
.widget-block:hover {
  box-shadow: 0 18px 40px rgba(19, 57, 82, 0.13);
}

.widget-block:hover .widget-icon {
  transform: scale(1.06);
}

.widget-icon {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}

.widget-grip {
  opacity: 0.45;
  transition: opacity 0.18s ease, background 0.18s ease;
}

.widget-block:hover .widget-grip { opacity: 1; }

/* Redovi u widgetu se blago pomere pri prelasku mišem. */
.widget-task-list a,
.widget-feed a,
.widget-issue-list a,
.widget-stat-grid a,
.widget-shortcuts a {
  transition:
    transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.16s ease,
    background 0.16s ease;
}

.widget-task-list a:hover,
.widget-feed a:hover,
.widget-issue-list a:hover {
  transform: translateX(3px);
}

.widget-stat-grid a:hover,
.widget-shortcuts a:hover {
  transform: translateY(-2px);
}

/* Sadržaj widgeta se pojavljuje umesto da bljesne. */
@keyframes widget-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.widget-body > * {
  animation: widget-fade-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .widget-block,
  .widget-body > *,
  .widget-task-list a,
  .widget-feed a { transition: none; animation: none; }
}

/* ==================================================================
   6. IZBOR WIDGETA — dve faze, strelice, tačkice
   ================================================================== */
.wps-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.wps-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(10, 40, 61, 0.72);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.wps-arrow:hover { background: var(--blue); transform: translateY(-50%) scale(1.07); }
.wps-arrow.prev { left: -6px; }
.wps-arrow.next { right: -6px; }

.wps-card {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.wps-face {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 18px;
  height: 100%;
}

.wps-face-front {
  align-items: center;
  text-align: center;
  justify-content: center;
}

.wps-icon.big {
  width: 66px;
  height: 66px;
  border-radius: 20px;
}

.wps-icon.big .app-icon { width: 32px; height: 32px; }

.wps-face-front h3 { margin: 0; font-size: 1.24rem; color: var(--navy); }
.wps-face-front p { margin: 0; font-size: 0.95rem; color: var(--muted); }
.wps-face-front .button { margin-top: auto; }

.wps-back-link {
  align-self: flex-start;
  border: none;
  background: transparent;
  color: var(--blue-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.wps-back-link:hover { text-decoration: underline; }

/* Prelaz između kartice i izbora izgleda. */
@keyframes wps-in {
  from { opacity: 0; transform: translateX(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes wps-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(-14px) scale(0.985); }
}

.wps-face.is-entering { animation: wps-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both; }
.wps-face.is-leaving  { animation: wps-out 0.15s ease both; }

/* Maketa se meko preoblikuje pri promeni veličine. */
.wp-frame {
  transition:
    max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    min-height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.wp-frame.is-morphing { box-shadow: 0 0 0 3px var(--blue-soft); }

/* Tačkice su sada dugmad. */
.wps-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}

.wps-dots button.on { background: #fff; transform: scale(1.3); }

@media (max-width: 760px) {
  .wps-arrow { display: none; }
}

/* ===== v5.5.css ===== */
/*
 * Tehnodent Office v5.5 — Zapisnik
 *
 * Radna površina zauzima ceo prostor, alatka pluta na vrhu, a list papira
 * je široko postavljen i raste nadole. Namenjeno iPadu i Apple Pencil-u.
 */
/* ==================================================================
   RASPORED
   ================================================================== */
.nb {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 0;
  height: calc(100vh - 96px);
  min-height: 520px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* --- bočni spisak --- */
.nb-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--canvas);
  border-right: 1px solid var(--line);
  min-height: 0;
}

.nb-side-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nb-side-top h2 { margin: 2px 0 0; font-size: 1.05rem; color: var(--navy); }

.nb-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.nb-search input { border: none; background: transparent; width: 100%; font-size: 0.95rem; min-width: 0; }
.nb-search input:focus { outline: none; }
.nb-search .app-icon { width: 17px; height: 17px; color: var(--muted); flex: none; }

.nb-pages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.nb-page a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nb-page a:hover { background: var(--surface); }
.nb-page.active a { background: var(--blue-soft); border-color: var(--blue); }
.nb-page.dragging { opacity: 0.5; }

/* Sličica papira sa svojom podlogom. */
.nb-thumb {
  width: 34px;
  height: 44px;
  flex: none;
  border-radius: 5px;
  border: 1px solid var(--line);
  background-color: var(--pg, #fff);
  box-shadow: inset -3px 0 0 rgba(19, 57, 82, 0.05);
}
.nb-thumb.bg-lined { background-image: repeating-linear-gradient(to bottom, transparent 0 6px, rgba(19,57,82,.18) 6px 7px); }
.nb-thumb.bg-grid  { background-image: repeating-linear-gradient(to bottom, transparent 0 6px, rgba(19,57,82,.14) 6px 7px), repeating-linear-gradient(to right, transparent 0 6px, rgba(19,57,82,.14) 6px 7px); }
.nb-thumb.bg-dots  { background-image: radial-gradient(circle, rgba(19,57,82,.22) .8px, transparent .9px); background-size: 7px 7px; }

.nb-page-copy { min-width: 0; flex: 1; }
.nb-page-copy strong { display: block; font-size: 0.95rem; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-page-copy small { display: block; font-size: 0.78rem; color: var(--muted); }
.nb-pin { flex: none; font-size: 0.8rem; }
.nb-empty-side { padding: 16px 8px; color: var(--muted); font-size: 0.92rem; }
.nb-hint { margin: 0; font-size: 0.78rem; color: var(--muted); }

/* ==================================================================
   RADNA POVRŠINA
   ================================================================== */
.nb-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #eef3f7;
}

/* --- plutajuća alatka --- */
.nb-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(19, 57, 82, 0.06);
  z-index: 5;
  flex: none;
}

.nb-bar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

.nb-rename input {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--canvas);
  min-width: 140px;
  max-width: 240px;
}
.nb-rename input:focus { border-color: var(--blue); outline: none; background: var(--surface); }

.nb-state { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.nb-state[data-state="ok"] { color: var(--success); }
.nb-state[data-state="pending"] { color: var(--warning); }
.nb-state[data-state="error"] { color: var(--danger); }

.nb-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }

.nb-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.nb-tool {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  color: var(--blue-dark);
  font: inherit;
  font-size: 1.05rem;
  transition: background 0.15s ease, transform 0.15s ease;
}
.nb-tool:hover { background: rgba(255,255,255,0.85); }
.nb-tool.active { background: var(--surface); color: var(--navy); box-shadow: 0 3px 9px rgba(19,57,82,.14); transform: translateY(-1px); }
.nb-tool .app-icon { width: 19px; height: 19px; }

.nb-inks { gap: 5px; padding: 5px 7px; }
.nb-ink {
  width: 26px; height: 26px; padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--ink);
  box-shadow: inset 0 0 0 2px #fff;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.nb-ink:hover { transform: scale(1.1); }
.nb-ink.active { border-color: var(--navy); transform: scale(1.16); }

.nb-width {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: none; border-radius: 999px;
  background: transparent; cursor: pointer;
}
.nb-width:hover { background: rgba(255,255,255,0.85); }
.nb-width.active { background: var(--surface); box-shadow: 0 3px 9px rgba(19,57,82,.14); }
.nb-width i { display: block; width: 18px; height: var(--w); border-radius: 99px; background: var(--navy); }

.nb-zoom { padding: 3px 6px; gap: 6px; }
.nb-zoom b { font-size: 0.8rem; color: var(--muted); min-width: 42px; text-align: center; }

/* --- platno --- */
.nb-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 22px 22px 60px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overscroll-behavior: contain;
}

.nb-sheet {
  position: relative;
  width: 1400px;
  max-width: none;
  background-color: var(--pg, #fff);
  border-radius: 6px;
  box-shadow: 0 10px 34px rgba(19, 57, 82, 0.16);
  flex: none;
}

.nb-sheet canvas {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  touch-action: pan-y;
  cursor: crosshair;
  border-radius: 6px;
}
.nb-sheet canvas.erasing { cursor: cell; }

/* Podloge se crtaju ispod poteza. */
.nb-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 6px;
}
.nb-sheet.bg-lined::before { background-image: repeating-linear-gradient(to bottom, transparent 0 37px, rgba(19,57,82,.13) 37px 38px); }
.nb-sheet.bg-grid::before  { background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(19,57,82,.1) 31px 32px), repeating-linear-gradient(to right, transparent 0 31px, rgba(19,57,82,.1) 31px 32px); }
.nb-sheet.bg-dots::before  { background-image: radial-gradient(circle, rgba(19,57,82,.2) 1.2px, transparent 1.3px); background-size: 26px 26px; }
.nb-sheet.bg-blank::before { background: none; }

.nb-sheet.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pg-image);
  background-size: cover;
  background-position: center top;
  opacity: 0.5;
  pointer-events: none;
  border-radius: 6px;
}

/* --- postavljene datoteke --- */
.nb-items { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.nb-item {
  position: absolute;
  pointer-events: auto;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(19, 57, 82, 0.16);
}
.nb-item:hover, .nb-item.is-active { border-color: var(--blue); }
.nb-item-body { width: 100%; height: 100%; overflow: hidden; border-radius: 8px; display: grid; place-items: center; }
.nb-item.is-image img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; }
.nb-item-file { display: flex; align-items: center; gap: 9px; padding: 10px 12px; width: 100%; min-width: 0; }
.nb-item-file strong { font-size: 0.92rem; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-item-file .app-icon { width: 24px; height: 24px; flex: none; color: var(--blue-dark); }

.nb-item-tools {
  position: absolute;
  top: -15px; right: -5px;
  display: none; gap: 3px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  z-index: 3;
}
.nb-item:hover .nb-item-tools, .nb-item.is-active .nb-item-tools { display: flex; }
.nb-item-tools form { display: contents; }
.nb-item-tools button, .nb-item-tools a {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: transparent; color: var(--blue-dark);
  cursor: pointer; font-size: 0.95rem; line-height: 1; text-decoration: none;
}
.nb-item-tools button:hover, .nb-item-tools a:hover { background: var(--blue-soft); }
.nb-item-move { cursor: grab; touch-action: none; }
.nb-item-resize {
  position: absolute; right: -8px; bottom: -8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--blue); border: 2px solid #fff;
  cursor: nwse-resize; display: none; touch-action: none;
}
.nb-item:hover .nb-item-resize, .nb-item.is-active .nb-item-resize { display: block; }

/* --- oznaka olovke --- */
.nb-pen-badge {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(11, 51, 77, 0.92);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 8;
  pointer-events: none;
}

/* --- ceo ekran --- */
.nb-main.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #eef3f7;
}
.nb-main.is-fullscreen .nb-bar { position: sticky; top: 0; }

/* ==================================================================
   IZBOR PODLOGE
   ================================================================== */
.nb-bg-choice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nb-bg-choice label { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.nb-bg-choice input { position: absolute; opacity: 0; pointer-events: none; }
.nb-bg-preview {
  width: 100%; aspect-ratio: 3 / 4;
  border-radius: 8px;
  border: 2px solid var(--line);
  background-color: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nb-bg-preview.bg-lined { background-image: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(19,57,82,.2) 8px 9px); }
.nb-bg-preview.bg-grid  { background-image: repeating-linear-gradient(to bottom, transparent 0 8px, rgba(19,57,82,.16) 8px 9px), repeating-linear-gradient(to right, transparent 0 8px, rgba(19,57,82,.16) 8px 9px); }
.nb-bg-preview.bg-dots  { background-image: radial-gradient(circle, rgba(19,57,82,.25) 1px, transparent 1.1px); background-size: 9px 9px; }
.nb-bg-choice input:checked + .nb-bg-preview { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.nb-bg-choice b { font-size: 0.8rem; color: var(--muted); font-weight: 700; }

.nb-color-choice { display: flex; gap: 10px; flex-wrap: wrap; }
.nb-color-choice label { cursor: pointer; }
.nb-color-choice input { position: absolute; opacity: 0; pointer-events: none; }
.nb-color-choice span {
  display: block; width: 40px; height: 50px;
  border-radius: 7px; background: var(--pg);
  border: 2px solid var(--line);
}
.nb-color-choice input:checked + span { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

.nb-empty {
  margin: auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 40px 20px;
}
.nb-empty > span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 22px; background: var(--blue-soft); color: var(--blue-dark); }
.nb-empty > span .app-icon { width: 34px; height: 34px; }
.nb-empty h3 { margin: 0; font-size: 1.3rem; color: var(--navy); }
.nb-empty p { margin: 0; color: var(--muted); }

/* ==================================================================
   iPAD I TELEFON
   ================================================================== */
@media (max-width: 1100px) {
  .nb { grid-template-columns: 220px minmax(0, 1fr); }
  .nb-rename input { max-width: 160px; }
}

@media (max-width: 820px) {
  .nb {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .nb-side { border-right: none; border-bottom: 1px solid var(--line); }
  .nb-pages { max-height: 240px; }
  .nb-main { min-height: 70vh; }
  .nb-tools { margin-left: 0; width: 100%; }
  .nb-scroll { padding: 12px 10px 40px; }
  .nb-rename input { max-width: none; width: 100%; }
  .nb-bar-left { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-tool, .nb-ink, .nb-page a { transition: none; }
}

/* ===== v5.6.css ===== */
/*
 * Tehnodent Office v5.6
 */
/* ==================================================================
   1. PREGLED PODSETNIKA — isti ritam kao Servisni podsetnici
   Blok „Servisi i registracije“ je bio previsok jer je zauzimao celu
   kolonu bez obzira na sadržaj. Sada se prilagođava sadržaju.
   ================================================================== */
.reminder-dashboard-grid.is-compact {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.reminder-dashboard-grid.is-compact > .panel {
  align-self: start;
}

/* Blok vozila više ne razvlači kolonu. */
.reminder-dashboard-grid.is-compact .auto-mini-vehicles {
  max-height: none;
}

.reminder-dashboard-grid.is-compact .auto-mini-vehicles:empty {
  display: none;
}

/* ==================================================================
   2. RAZMACI UNUTAR BLOKOVA PODSETNIKA
   Redovi sa podacima bili su zbijeni uz ivicu, a naslovi grupa previše
   odvojeni od vrednosti. Ovde se ritam izjednačava sa ostatkom sistema.
   ================================================================== */
.reminder-detail-grid .panel,
.reminder-dashboard-grid .panel {
  padding: 0;
  overflow: hidden;
}

.reminder-detail-grid .panel-heading,
.reminder-dashboard-grid .panel-heading {
  padding: 20px 22px 16px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.reminder-detail-grid .panel-heading h2,
.reminder-dashboard-grid .panel-heading h2 {
  margin: 4px 0 2px;
  font-size: 1.25rem;
}

.reminder-detail-grid .panel-heading p,
.reminder-dashboard-grid .panel-heading p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--muted);
}

/* Parovi naziv/vrednost dobijaju vazduh i jasnu podelu. */
.reminder-detail-grid dl,
.reminder-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

.reminder-detail-grid dl > div,
.reminder-facts > div {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.reminder-detail-grid dl > div:nth-child(odd),
.reminder-facts > div:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.reminder-detail-grid dl > div:nth-last-child(-n + 2),
.reminder-facts > div:nth-last-child(-n + 2) {
  border-bottom: none;
}

.reminder-detail-grid dt,
.reminder-facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 6px;
}

.reminder-detail-grid dd,
.reminder-facts dd {
  margin: 0;
  font-size: 1.02rem;
  color: var(--navy);
  overflow-wrap: anywhere;
}

/* Spisak primalaca i istorije. */
.reminder-detail-grid .panel > div:not(.panel-heading) > article,
.reminder-detail-grid .panel > div:not(.panel-heading) > a {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
}

.reminder-detail-grid .panel > div:not(.panel-heading) > article:last-child,
.reminder-detail-grid .panel > div:not(.panel-heading) > a:last-child {
  border-bottom: none;
}

.reminder-detail-grid .empty-state {
  padding: 30px 22px;
}

@media (max-width: 900px) {
  .reminder-dashboard-grid.is-compact {
    grid-template-columns: 1fr;
  }
  .reminder-detail-grid dl,
  .reminder-facts {
    grid-template-columns: 1fr;
  }
  .reminder-detail-grid dl > div:nth-child(odd),
  .reminder-facts > div:nth-child(odd) {
    border-right: none;
  }
}

/* ==================================================================
   3. OSNOVNA SREDSTVA — krug garancije
   Ispravka: v5.6 je uvela svoju promenljivu i pozadinu na unutrašnji
   <span>, čime je prekrila prsten iz v4.8. Prsten se vratio; menja se
   samo boja, prema stanju garancije.
   ================================================================== */
.warranty-dial { --dial-color: var(--blue); }
.warranty-dial.ok      { --dial-color: var(--success); }
.warranty-dial.warning { --dial-color: var(--warning); }
.warranty-dial.danger,
.warranty-dial.urgent,
.warranty-dial.expired { --dial-color: var(--danger); }
.warranty-dial.muted   { --dial-color: var(--muted); }

.warranty-dial strong { color: var(--navy); }
.warranty-dial small { color: var(--muted); }

/* ==================================================================
   4. NALEPNICA SA QR KODOM
   ================================================================== */
.asset-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 20px;
  align-items: center;
  padding: 22px;
  margin: 4px 0 18px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.asset-label-brand {
  display: block;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--blue-dark);
  margin-bottom: 6px;
}

.asset-label-copy strong {
  display: block;
  font-size: 1.32rem;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}

.asset-label-copy dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
}

.asset-label-copy dl > div { min-width: 0; }

.asset-label-copy dt {
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}

.asset-label-copy dd {
  margin: 2px 0 0;
  font-size: 0.98rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.asset-label-qr {
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 8px;
}

.asset-label-qr img,
.asset-label-qr canvas,
.asset-label-qr table { width: 190px !important; height: 190px !important; }

@media (max-width: 620px) {
  .asset-label { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .asset-label-copy dl { justify-items: center; }
}

/* Štampa: samo nalepnica na papiru. */
@media print {
  body.printing-label > *:not(.modal) { display: none !important; }
  body.printing-label .modal { position: static; opacity: 1; background: none; padding: 0; }
  body.printing-label .modal-backdrop,
  body.printing-label .modal-close,
  body.printing-label .modal-heading,
  body.printing-label .form-actions { display: none !important; }
  body.printing-label .modal-card { box-shadow: none; max-height: none; overflow: visible; padding: 0; }
  body.printing-label .asset-label { border-width: 1px; margin: 0; page-break-inside: avoid; }
}

/* ===== v5.7.css ===== */
/*
 * Tehnodent Office v5.7
 */
/* ==================================================================
   1. IKONICE MODULA — kvadrat, tačkica u uglu, ime na prelaz mišem
   ================================================================== */
.office-module-grid.view-icons {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 16px;
}

.office-module-grid.view-icons .office-module-card {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  gap: 0;
  min-height: 0;
  border-radius: 20px;
  overflow: visible;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}

.office-module-grid.view-icons .office-module-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(19, 57, 82, 0.16);
}

/* Naziv, opis, tekstualni status i strelica se ne prikazuju. */
.office-module-grid.view-icons .office-module-card h3,
.office-module-grid.view-icons .office-module-card p,
.office-module-grid.view-icons .office-module-action,
.office-module-grid.view-icons .office-module-status {
  display: none;
}

.office-module-grid.view-icons .office-module-icon {
  width: 56px;
  height: 56px;
  border-radius: 17px;
  margin: 0;
}

.office-module-grid.view-icons .office-module-icon .app-icon {
  width: 28px;
  height: 28px;
}

/* Tačkica u uglu: zelena kad je modul dostupan, crvena kad nije. */
.office-module-dot {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.office-module-grid.view-icons .office-module-dot { display: block; }
.office-module-dot.on  { background: var(--success); }
.office-module-dot.off { background: var(--danger); }

/* Ime se pojavljuje na prelaz mišem, iznad kartice. */
.office-module-grid.view-icons .office-module-card::after {
  content: attr(title);
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translate(-50%, 6px);
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 6;
}

.office-module-grid.view-icons .office-module-card:hover::after {
  opacity: 1;
  transform: translate(-50%, 12px);
}

@media (hover: none) {
  /* Na dodirnim uređajima nema prelaza mišem, pa naziv ostaje ispod. */
  .office-module-grid.view-icons .office-module-card::after {
    position: static;
    transform: none;
    opacity: 1;
    background: transparent;
    color: var(--navy);
    font-size: 0.8rem;
    padding: 0;
    white-space: normal;
    text-align: center;
  }
  .office-module-grid.view-icons .office-module-card {
    aspect-ratio: auto;
    padding: 16px 8px 12px;
    gap: 8px;
    grid-template-rows: auto auto;
  }
}

/* ==================================================================
   2. IZBOR WIDGETA — male kartice, sve na jednom ekranu
   ================================================================== */
.wps-catalog {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  align-content: start;
  padding: 4px 2px 8px;
}

.wps-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  box-shadow: 0 10px 26px rgba(4, 26, 40, 0.22);
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s ease;
}

.wps-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(4, 26, 40, 0.32);
  border-color: var(--blue);
}

.wps-tile-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  margin-bottom: 4px;
}

.wps-tile-icon .app-icon { width: 21px; height: 21px; }
.wps-tile strong { font-size: 1.04rem; color: var(--navy); }
.wps-tile small { font-size: 0.88rem; color: var(--muted); line-height: 1.35; }

.wps-tile-cta {
  margin-top: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--blue-dark);
}

/* Više nema listanja ni tačkica. */
.wps-stage, .wps-track, .wps-dots, .wps-arrow { display: none !important; }

/* --- popup sa varijantama --- */
.wps-size-card { max-width: 520px; }

.wps-variants {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 16px;
}

.wps-variant {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.wps-variant:hover { border-color: var(--blue); transform: translateY(-2px); }
.wps-variant.active { border-color: var(--blue); background: var(--blue-soft); }
.wps-variant .wps-size-shape { margin-bottom: 4px; }
.wps-variant b { font-size: 1rem; color: var(--navy); }
.wps-variant small { font-size: 0.82rem; color: var(--muted); line-height: 1.3; }

@media (max-width: 560px) {
  .wps-variants { grid-template-columns: 1fr; }
  .wps-catalog { grid-template-columns: 1fr; }
}

/* ==================================================================
   3. VOĐA UNUTAR ČLANOVA PROJEKTA
   Vođa je bio odvojen na vrhu forme, daleko od ljudi na koje se odnosi.
   Sada stoji u istom okviru, iznad spiska članova.
   ================================================================== */
.project-leader-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.project-leader-field select { width: 100%; }

.field-split {
  display: block;
  margin: 4px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}

/* ==================================================================
   4. BRZO DUGME ZA BRISANJE
   Brisanje je do sada bilo zakopano u meniju sa tri tačkice, a kod
   zadataka i projekata ga uopšte nije bilo. Sada stoji vidljivo pored
   ostalih akcija, uz obaveznu potvrdu.
   ================================================================== */
.quick-delete { display: contents; }

.button.danger {
  background: var(--danger-soft);
  color: var(--danger);
  border: 1px solid rgba(219, 61, 85, 0.28);
}

.button.danger:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.button.icon-only {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: none;
}

.button.icon-only .app-icon { width: 19px; height: 19px; }

/* U redu akcija dugme za brisanje ide desno, odvojeno od ostalih. */
.service-detail-actions .quick-delete,
.reminder-detail-actions .quick-delete,
.auto-record-actions .quick-delete,
.module-hero-actions .quick-delete {
  margin-left: auto;
}

/* ==================================================================
   5. ROKOVI I BRZI PRISTUP U PODSETNICIMA
   ================================================================== */
.reminder-more {
  display: block;
  padding: 14px 18px;
  text-align: center;
  font-weight: 700;
  color: var(--blue-dark);
  text-decoration: none;
  border-top: 1px solid var(--line);
}

.reminder-more:hover { background: var(--blue-soft); }

.reminder-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.reminder-quick a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  color: var(--navy);
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.16s ease;
}

.reminder-quick a:hover { transform: translateY(-2px); border-color: var(--blue); }

.reminder-quick span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.reminder-quick span .app-icon { width: 20px; height: 20px; }
.reminder-quick b { font-size: 0.96rem; font-weight: 700; }

/* ==================================================================
   6. MENI STRANICE U ZAPISNIKU — vidljivo dugme umesto tri tačkice
   ================================================================== */
.nb-menu-trigger {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nb-menu-trigger:hover { background: var(--surface); border-color: var(--blue); }
.nb-menu-trigger .app-icon { width: 18px; height: 18px; }
.nb-menu-trigger i { font-style: normal; font-size: 0.9rem; }
.nb-menu[open] .nb-menu-trigger { background: var(--surface); border-color: var(--blue); }

/* Stavke menija dobijaju vazduh i jasnije ikonice. */
.nb-menu > div {
  min-width: 250px;
  padding: 8px;
}

.nb-menu > div button,
.nb-menu > div form button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 0.96rem;
  transition: background 0.14s ease;
}

.nb-menu > div button:hover { background: var(--blue-soft); }
.nb-menu > div .app-icon { width: 19px; height: 19px; color: var(--blue-dark); flex: none; }

/* Brisanje stranice je vizuelno odvojeno. */
.nb-menu > div form:last-child button {
  color: var(--danger);
  border-top: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  margin-top: 4px;
}

.nb-menu > div form:last-child .app-icon { color: var(--danger); }

/* ==================================================================
   7. WIDGETI — ispravke uočene na prikazu
   ================================================================== */

/* „Brojevi dana“ je izlazio iz okvira i pravio vodoravno pomeranje. */
.widget-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
}

.widget-block.size-wide .widget-stat-grid,
.widget-block.size-lg .widget-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.widget-block.size-sm .widget-stat-grid,
.widget-block.size-tall .widget-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.widget-stat-grid a {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px;
  min-width: 0;
}

.widget-stat-grid small {
  font-size: 0.6rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.widget-stat-grid strong { font-size: 1.35rem; }
.widget-stat-grid .today-stat-icon { width: 30px; height: 30px; }

/* Widget nikada ne sme da izazove vodoravno pomeranje. */
.widget-body { overflow-x: hidden; }

/* To Do: dugme „Dodaj“ je bilo previsoko i preširoko za usku kolonu. */
.widget-todo-panel .daily-todo-create .button {
  flex: 0 1 auto;
  min-height: 42px;
  padding: 10px 16px;
  font-size: 0.95rem;
}

.widget-todo-panel .daily-todo-create {
  align-items: stretch;
}

.widget-todo-panel .daily-todo-create > *:not(.button) {
  flex: 1 1 auto;
}

/* Kalendar: redovi su bili previsoki, pa je stalo malo dana. */
.widget-calendar-day {
  padding: 8px 10px;
  gap: 10px;
}

.widget-calendar-date {
  min-width: 40px;
  padding: 3px 5px;
}

.widget-calendar-date b { font-size: 1rem; }
.widget-calendar-date small { font-size: 0.6rem; }
.widget-calendar-day a { font-size: 0.88rem; }

/* Meni widgeta ne sme da izađe iz ekrana ni da bude preuzak. */
.widget-menu > div {
  min-width: 230px;
  max-width: min(280px, calc(100vw - 24px));
}

/* ===== v5.9.css ===== */
/*
 * Tehnodent Office v5.9
 */
/* ==================================================================
   1. IKONICA ZA PRIKAZ LOZINKE — na svakom polju
   ================================================================== */
.password-field {
  position: relative;
  display: block;
  width: 100%;
}

.password-field input {
  width: 100%;
  padding-right: 46px;
}

.password-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.password-eye:hover { background: var(--blue-soft); color: var(--blue-dark); }
.password-eye.is-on { color: var(--blue); }
.password-eye svg { width: 19px; height: 19px; }

/* Kada je lozinka prikazana, precrtano oko. */
.password-eye.is-on::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 2px;
  background: currentColor;
  transform: rotate(-45deg);
  border-radius: 2px;
}

.settings-note .panel-heading { padding: 20px 22px; }

/* ==================================================================
   2. OTKRIVANJE LOZINKE GREBANJEM
   ================================================================== */
.scratch {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 86px;
  margin: 6px 0 18px;
  border-radius: 14px;
  border: 2px dashed var(--line);
  background: var(--canvas);
  overflow: hidden;
  user-select: none;
}

.scratch-value {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
  word-break: break-all;
  padding: 16px 18px;
  text-align: center;
}

.scratch-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  transition: opacity 0.35s ease;
}

.scratch-cover:active { cursor: grabbing; }

.scratch-hint {
  position: absolute;
  pointer-events: none;
  font-size: 0.9rem;
  font-weight: 700;
  color: #4a5f6e;
  letter-spacing: 0.04em;
  transition: opacity 0.25s ease;
}

.scratch-hint.is-hidden { opacity: 0; }

.scratch.is-revealed {
  border-style: solid;
  border-color: var(--success);
  background: var(--success-soft);
}

.scratch.is-revealed .scratch-cover {
  opacity: 0;
  pointer-events: none;
}

/* ==================================================================
   3. QR NALEPNICA — 51 × 25 mm, sa plavim okvirom
   ================================================================== */
.asset-label {
  /* Stvarne dimenzije nalepnice; štampa izlazi tačno u toj meri. */
  width: 51mm;
  height: 25mm;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19mm;
  gap: 2.5mm;
  align-items: center;
  padding: 2.5mm 3mm;
  margin: 10px auto 20px;
  border: 0.6mm solid var(--blue);
  border-radius: 2mm;
  background: #fff;
  box-shadow: 0 8px 24px rgba(19, 57, 82, 0.12);
  overflow: hidden;
}

/* Plava traka uz levu ivicu, da nalepnica ima boju. */
.asset-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1.6mm;
  background: linear-gradient(180deg, var(--blue), var(--navy));
}

.asset-label { position: relative; }
.asset-label-copy { padding-left: 2mm; min-width: 0; }

.asset-label-brand {
  display: block;
  font-size: 1.7mm;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--blue-dark);
  margin-bottom: 0.8mm;
}

.asset-label-copy strong {
  display: block;
  font-size: 2.9mm;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 1.2mm;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.asset-label-copy dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6mm 1.5mm;
  margin: 0;
}

.asset-label-copy dt {
  font-size: 1.4mm;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}

.asset-label-copy dd {
  margin: 0.2mm 0 0;
  font-size: 1.9mm;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-label-qr {
  width: 19mm;
  height: 19mm;
  display: grid;
  place-items: center;
  padding: 0.6mm;
  border-radius: 1mm;
  background: #fff;
  border: 0.3mm solid var(--blue-soft);
}

.asset-label-qr img,
.asset-label-qr canvas,
.asset-label-qr table {
  width: 17.5mm !important;
  height: 17.5mm !important;
}

/* Prikaz na ekranu: uvećan da se vidi šta se štampa. */
.modal .asset-label {
  transform: scale(2.2);
  transform-origin: center;
  margin: 26mm auto 28mm;
}

@media (max-width: 620px) {
  .modal .asset-label { transform: scale(1.6); margin: 16mm auto 18mm; }
}

/* Štampa: tačna mera, bez uvećanja i bez senke. */
@media print {
  @page { size: 51mm 25mm; margin: 0; }
  body.printing-label .asset-label {
    transform: none;
    margin: 0;
    box-shadow: none;
    width: 51mm;
    height: 25mm;
    page-break-inside: avoid;
  }
}

/* ===== v6.0.css ===== */
/*
 * Tehnodent Office v6.0
 */
/* ==================================================================
   1. PROZOR SA VARIJANTAMA WIDGETA IZNAD IZBORA
   Izbor je na sloju 200, običan prozor na 100 — otvarao se iza njega,
   pa je izgledalo kao da se ništa ne dešava dok se izbor ne zatvori.
   ================================================================== */
.modal.above-picker {
  z-index: 320;
}

/* ==================================================================
   2. BLOK U ZADATKU — ceo je klikljiv, strelica skroz desno
   ================================================================== */
[data-task-block] .panel-heading.is-clickable {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.16s ease;
}

[data-task-block] .panel-heading.is-clickable:hover {
  background: var(--blue-soft);
}

[data-task-block] .panel-heading.is-clickable:active {
  background: color-mix(in srgb, var(--blue-soft) 70%, var(--blue) 30%);
}

/* Prvi element (naslov i opis) guta slobodan prostor, ostalo ide desno. */
[data-task-block] .panel-heading.is-clickable > div:first-child {
  flex: 1;
  min-width: 0;
}

[data-task-block] .panel-heading.is-clickable > *:not(:first-child) {
  flex: none;
}

/* Strelica i oznake su poslednje u redu, uz desnu ivicu. */
[data-task-block] [data-task-block-toggle] {
  margin-left: 4px;
  order: 99;
}

[data-task-block] .panel-heading.is-clickable:hover [data-task-block-toggle] {
  background: var(--surface);
  border-color: var(--blue);
}

/* ==================================================================
   3. PREGLED KORISNIKA — kartice
   ================================================================== */
.us-tabs { margin-top: 18px; }

.us-tabbar {
  display: flex;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: var(--canvas);
  border: 1px solid var(--line);
  margin-bottom: 14px;
}

.us-tabbar button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.us-tabbar button:hover { color: var(--navy); }

.us-tabbar button.active {
  background: var(--surface);
  color: var(--navy);
  box-shadow: 0 3px 10px rgba(19, 57, 82, 0.12);
}

.us-tabbar b {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 0.74rem;
}

.us-panel { display: none; max-height: 320px; overflow-y: auto; }
.us-panel.active { display: block; }

.us-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
}

.us-row:last-child { border-bottom: none; }
.us-row > div { min-width: 0; flex: 1; }
.us-row strong { display: block; font-size: 0.95rem; color: var(--navy); overflow-wrap: anywhere; }
.us-row small { display: block; margin-top: 3px; font-size: 0.82rem; color: var(--muted); }

.us-dot {
  width: 9px; height: 9px; margin-top: 6px; flex: none;
  border-radius: 50%; background: var(--blue);
}

.us-icon {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 10px; background: var(--blue-soft); color: var(--blue-dark);
}

.us-icon .app-icon { width: 17px; height: 17px; }
.us-empty { padding: 26px 4px; text-align: center; color: var(--muted); margin: 0; }

.us-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.us-actions .button { flex: 1 1 auto; justify-content: center; }

/* ==================================================================
   4. KONTROLA MODULA — pregledniji spisak
   Kartice su bile iste veličine bez obzira na stanje, pa se nije videlo
   šta je otvoreno a šta zatvoreno.
   ================================================================== */
.module-control-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.module-control-grid > article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--success);
  border-radius: 14px;
  background: var(--surface);
}

.module-control-grid > article.is-closed {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.module-control-grid h3 { margin: 0; font-size: 1.02rem; color: var(--navy); }
.module-control-grid code { font-size: 0.78rem; color: var(--muted); }
.module-control-grid input[type="text"] { width: 100%; }
.module-control-grid .button { white-space: nowrap; }

@media (max-width: 820px) {
  .module-control-grid > article { grid-template-columns: 1fr; gap: 10px; }
}

/* Kartica korisnika u Administraciji otvara puni pregled. */
.team-card.is-openable {
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s ease;
}

.team-card.is-openable:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(19, 57, 82, 0.14);
}

/* ===== v6.1.css ===== */
/*
 * Tehnodent Office v6.1
 */
/* ==================================================================
   1. STRANICA KORISNIKA
   Zamenjuje mali prozor u kom su se elementi preklapali.
   ================================================================== */
.up-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px 26px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy), #0a5267);
  color: #fff;
}

.up-identity { display: flex; align-items: center; gap: 18px; min-width: 0; }

.up-avatar {
  width: 70px;
  height: 70px;
  flex: none;
  border-radius: 22px;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.28);
}

.up-avatar.initials {
  display: grid;
  place-items: center;
  background: var(--c, #00a1d5);
  color: #fff;
  font-size: 1.9rem;
  font-weight: 800;
}

.up-hero h1 { margin: 4px 0 2px; font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; }
.up-hero p { margin: 0; color: rgba(255, 255, 255, 0.78); }
.up-hero .eyebrow { color: var(--blue); }
.up-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.up-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.up-stats article {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.up-stats article.warn { border-color: var(--warning); background: var(--warning-soft); }
.up-stats strong { display: block; font-size: 2rem; line-height: 1; color: var(--navy); }
.up-stats small { display: block; margin-top: 6px; color: var(--muted); font-size: 0.88rem; }

.up-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}

.up-facts > div { padding: 16px 20px; border-right: 1px solid var(--line); min-width: 0; }
.up-facts > div:last-child { border-right: none; }
.up-facts dt { font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.up-facts dd { margin: 5px 0 0; font-size: 1.02rem; color: var(--navy); overflow-wrap: anywhere; }

.up-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px;
}

.up-panel { padding: 0; overflow: hidden; }

.up-panel .panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.up-panel .panel-heading h2 { margin: 3px 0 0; font-size: 1.12rem; }

.up-panel .panel-heading b {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 0.82rem;
}

.up-list { max-height: 380px; overflow-y: auto; }

.up-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
}

.up-row:last-child { border-bottom: none; }
.up-row > div { min-width: 0; flex: 1; }
.up-row strong { display: block; font-size: 0.95rem; color: var(--navy); font-weight: 600; overflow-wrap: anywhere; }
.up-row small { display: block; margin-top: 4px; font-size: 0.83rem; color: var(--muted); }
.up-row small a { color: var(--blue-dark); }

.up-dot { width: 9px; height: 9px; margin-top: 6px; flex: none; border-radius: 50%; background: var(--blue); }
.up-dot.muted { background: var(--line); }

.up-icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 11px; background: var(--blue-soft); color: var(--blue-dark);
}

.up-icon .app-icon { width: 18px; height: 18px; }
.up-empty { padding: 30px 20px; text-align: center; color: var(--muted); margin: 0; }

@media (max-width: 700px) {
  .up-facts > div { border-right: none; border-bottom: 1px solid var(--line); }
  .up-facts > div:last-child { border-bottom: none; }
  .up-hero-actions .button { flex: 1 1 auto; justify-content: center; }
}

/* ===== v6.3.css ===== */
/*
 * Tehnodent Office v6.3 — nalepnica sa QR kodom
 *
 * Ranije su četiri polja stajala u dve kolone unutar ~28 mm širine, pa je
 * tekst bio zbijen i sitan za štampu. Sada su podaci svedeni na ono što se
 * stvarno traži na nalepnici, sa više vazduha i debljim slovima.
 */
.asset-label {
  grid-template-columns: minmax(0, 1fr) 18mm;
  gap: 3mm;
  padding: 2.6mm 3mm 2.6mm 4mm;
  align-items: center;
}

.asset-label-copy {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1mm;
  min-width: 0;
}

/* --- naziv firme --- */
.asset-label-brand {
  font-size: 1.6mm;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--blue-dark);
  line-height: 1;
  margin: 0;
}

/* --- naziv sredstva --- */
.asset-label-name {
  font-size: 2.9mm;
  font-weight: 800;
  line-height: 1.15;
  color: #0b334d;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* --- inventarni broj: najkrupniji podatak --- */
.asset-label-ib {
  display: flex;
  align-items: baseline;
  gap: 1.6mm;
  margin-top: 0.4mm;
}

.asset-label-ib i {
  font-style: normal;
  font-size: 1.5mm;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #7b8f9c;
}

.asset-label-ib b {
  font-size: 4.2mm;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #0b334d;
}

/* --- serijski broj i lokacija --- */
.asset-label-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8mm 3mm;
  margin-top: 0.3mm;
}

.asset-label-meta > span {
  display: flex;
  align-items: baseline;
  gap: 1.1mm;
  min-width: 0;
}

.asset-label-meta i {
  font-style: normal;
  font-size: 1.4mm;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #7b8f9c;
  flex: none;
}

.asset-label-meta b {
  font-size: 2.1mm;
  font-weight: 700;
  color: #17354d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- QR --- */
.asset-label-qr {
  width: 18mm;
  height: 18mm;
  padding: 0.4mm;
  border-width: 0.25mm;
}

.asset-label-qr img,
.asset-label-qr canvas,
.asset-label-qr table {
  width: 17.2mm !important;
  height: 17.2mm !important;
}

/* ==================================================================
   ŠTAMPA — slova su još deblja, boje pune crne radi kontrasta
   ================================================================== */
@media print {
  body.printing-label .asset-label-brand { color: #0b334d; }

  body.printing-label .asset-label-name,
  body.printing-label .asset-label-ib b {
    color: #000;
    font-weight: 900;
    -webkit-text-stroke: 0.02mm currentColor;
  }

  body.printing-label .asset-label-meta b {
    color: #000;
    font-weight: 800;
  }

  body.printing-label .asset-label-ib i,
  body.printing-label .asset-label-meta i {
    color: #4a5f6e;
    font-weight: 900;
  }

  /* Boje se štampaju kako su prikazane, bez svetljenja. */
  body.printing-label .asset-label,
  body.printing-label .asset-label * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===== v6.4.css ===== */
/*
 * Tehnodent Office v6.4
 *
 * 1.  Traka sa modulima na dnu Office-a (kao red ikonica na Macbook-u)
 * 2.  Kantica: jedan izgled i jedno ponašanje u celom sistemu
 * 3.  Tri tačkice i strelica na filterima
 * 4.  QR nalepnica: bez plave trake, podaci više, dugmad odmaknuta
 * 5.  Osnovna sredstva: Dokumentacija i box Podaci
 * 6.  Grupe podsetnika: vidljiva dugmad i prozor za uređivanje
 * 7.  Birač datuma
 * 8.  To Do lista
 * 9.  Pregled korisnika u pravougaoniku
 *
 * Lanac stilova se nastavlja na v6.3 — poslednji sloj koji stvarno postoji.
 */
/* ==================================================================
   1. TRAKA SA MODULIMA NA DNU
   ================================================================== */
.office-dock {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  max-width: min(940px, calc(100vw - 24px));
  pointer-events: none;
}

.office-dock-inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 18px 44px rgba(9, 45, 68, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  pointer-events: auto;
  /*
   * Bez overflow-a. Čim se jednoj osi zada `auto`, druga prestaje da bude
   * `visible` — pa bi naziv iznad ikonice i uvećanje na prelaz mišem bili
   * odsečeni. Ako ikada bude previše modula, traka se prelama u dva reda.
   */
  flex-wrap: wrap;
  row-gap: 8px;
}

.office-dock-inner::-webkit-scrollbar {
  display: none;
}

.office-dock-item {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center bottom;
}

.office-dock-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: linear-gradient(160deg, #ffffff, #e8f4fa);
  color: var(--blue-dark);
  border: 1px solid rgba(11, 51, 77, 0.08);
  box-shadow: 0 4px 12px rgba(11, 51, 77, 0.12);
}

.office-dock-icon .app-icon {
  width: 25px;
  height: 25px;
}

/* Naziv iskoči iznad trake, kao na Macbook-u. */
.office-dock-label {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 11px;
  border-radius: 9px;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.office-dock-item:hover,
.office-dock-item:focus-visible {
  transform: translateY(-10px) scale(1.18);
  outline: none;
}

/* Susedi se blago uvećaju, pa pokret izgleda mekano. */
.office-dock-item:hover + .office-dock-item,
.office-dock-item:has(+ .office-dock-item:hover) {
  transform: translateY(-4px) scale(1.07);
}

.office-dock-item:hover .office-dock-label,
.office-dock-item:focus-visible .office-dock-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.office-dock-item:hover .office-dock-icon {
  box-shadow: 0 10px 22px rgba(11, 51, 77, 0.24);
}

.office-dock-item.maintenance .office-dock-icon {
  background: linear-gradient(160deg, #fff, #fdeef0);
  color: var(--danger);
}

.office-dock-divider {
  flex: none;
  width: 1px;
  height: 34px;
  margin: 0 6px 8px;
  background: rgba(11, 51, 77, 0.14);
}

/* Prostor da poslednji red sadržaja ne završi ispod trake. */
.office-dock-spacer {
  height: 96px;
}

@media (max-width: 720px) {
  .office-dock {
    bottom: 10px;
    max-width: calc(100vw - 16px);
  }
  .office-dock-inner {
    /*
     * Na uskom ekranu traka klizi vodoravno. Na dodir nema prelaza mišem,
     * pa odsecanje naziva iznad ikonice ništa ne odnosi.
     */
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    padding: 7px 9px;
    border-radius: 18px;
    scrollbar-width: none;
  }
  .office-dock-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .office-dock-icon .app-icon {
    width: 22px;
    height: 22px;
  }
  /* Na dodir nema prelaza mišem, pa uvećanje samo smeta. */
  .office-dock-item:hover,
  .office-dock-item:focus-visible,
  .office-dock-item:hover + .office-dock-item,
  .office-dock-item:has(+ .office-dock-item:hover) {
    transform: none;
  }
  .office-dock-spacer {
    height: 78px;
  }
}

@media print {
  .office-dock,
  .office-dock-spacer {
    display: none !important;
  }
}

/* ==================================================================
   2. KANTICA — jedan izgled svuda
   ==================================================================
   Svaka ikonica kantice nosi klasu .icon-trash (v6.4, icon_svg), pa se
   izgled propisuje na jednom mestu umesto na svakom dugmetu posebno.
   ================================================================== */
.icon-trash {
  color: var(--danger);
}

button:has(> .icon-trash),
button:has(.icon-trash),
a:has(> .icon-trash) {
  color: var(--danger);
}

.icon-button:has(.icon-trash) {
  border-color: #f4ccd3;
  background: var(--danger-soft);
  color: var(--danger);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.icon-button:has(.icon-trash):hover {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
  transform: translateY(-1px);
}

.icon-button:has(.icon-trash):hover .icon-trash {
  color: #fff;
}

.icon-button:has(.icon-trash):focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

/* U padajućim menijima kantica ostaje red teksta, ali crven. */
.actions-menu > div button:has(.icon-trash),
.actions-menu > div form button:has(.icon-trash) {
  color: var(--danger);
}

.actions-menu > div button:has(.icon-trash):hover,
.actions-menu > div form button:has(.icon-trash):hover {
  background: var(--danger-soft);
}

/* Dugme koje nosi i tekst uz kanticu (na primer „Obriši završene“). */
.button.ghost:has(.icon-trash) {
  border-color: #f2ccd3;
  color: var(--danger);
}

.button.ghost:has(.icon-trash):hover {
  border-color: var(--danger);
  background: var(--danger-soft);
}

/* ==================================================================
   3. TRI TAČKICE I STRELICA NA FILTERIMA
   ================================================================== */
.todo-calendar-menu > summary svg,
.actions-menu > summary svg {
  width: 22px;
  height: 22px;
}

.actions-menu > summary {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--ink);
  transition: background 0.14s ease, color 0.14s ease;
}

.actions-menu > summary:hover,
.actions-menu[open] > summary {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.icon-more {
  width: 22px;
  height: 22px;
}

/* Strelica na dugmetu „Filteri“ je sada crtež, a ne znak iz fonta. */
.disclosure-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 0;
}

.disclosure-caret .app-icon {
  width: 16px;
  height: 16px;
  color: var(--blue-dark);
  transition: transform 0.18s ease;
}

.module-filter-disclosure > summary i,
.service-filter-disclosure > summary i {
  font-size: 0;
}

.module-filter-disclosure[open] > summary .disclosure-caret .app-icon,
.service-filter-disclosure[open] > summary .disclosure-caret .app-icon,
.nb-menu-trigger[aria-expanded="true"] .disclosure-caret .app-icon,
details[open] > .nb-menu-trigger .disclosure-caret .app-icon {
  transform: rotate(180deg);
}

/* Rotaciju je ranije radio roditelj nad <i>; sada je nosi crtež. */
.module-filter-disclosure[open] > summary i,
.service-filter-disclosure[open] > summary i {
  transform: none;
}

/* ==================================================================
   4. QR NALEPNICA
   ================================================================== */

/* Plava traka uz levu ivicu je uklonjena — trošila je širinu. */
.asset-label::before {
  content: none;
}

.asset-label {
  grid-template-columns: minmax(0, 1fr) 18mm;
  gap: 2.6mm;
  padding: 2.4mm 2.8mm;
  align-items: center;
}

.asset-label-copy {
  padding-left: 0;
  gap: 0.9mm;
}

/* Podaci stoje uz naziv, a ne pri dnu nalepnice. */
.asset-label-ib {
  margin-top: 0.2mm;
}

.asset-label-meta {
  margin-top: 0.1mm;
  align-items: center;
}

.asset-label-meta > span {
  align-items: center;
}

/* Umesto natpisa „Lok“ stoji oznaka mesta. */
.asset-label-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  line-height: 0;
}

.asset-label-pin .app-icon {
  width: 2.2mm;
  height: 2.2mm;
  color: #7b8f9c;
  stroke-width: 2.2;
}

/* Dugmad ispod nalepnice: odmaknuta od ivica i međusobno razmaknuta. */
.modal-card .asset-label-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  padding: 4px 6px 8px;
}

.modal-card .asset-label-actions .button {
  flex: 0 1 auto;
  min-height: 44px;
  padding-inline: 18px;
}

@media (max-width: 560px) {
  .modal-card .asset-label-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .modal-card .asset-label-actions .button {
    width: 100%;
  }
}

@media print {
  body.printing-label .asset-label-pin .app-icon {
    color: #000;
    stroke-width: 2.6;
  }
}

/* ==================================================================
   5. OSNOVNA SREDSTVA — DOKUMENTACIJA I BOX PODACI
   ==================================================================
   Red dokumentacije je imao treću kolonu široku 38px, a u njoj obrazac sa
   dugmetom koje je šire od toga — zato je kantica izlazila iz okvira. Sada
   je kolona po meri dugmeta, a red ima i svoju unutrašnju marginu.
   ================================================================== */
.auto-document-list article,
.auto-document-list.attachment-list article {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  border-radius: 12px;
  transition: background 0.14s ease;
}

.auto-document-list article:hover {
  background: #f7fbfc;
}

.auto-document-list article:last-child {
  border-bottom: 0;
}

.auto-document-list article > form {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.auto-document-list article > form .icon-button {
  flex: none;
  width: 38px;
  height: 38px;
}

.auto-document-list article > span {
  width: 40px;
  height: 40px;
}

.auto-document-list .attachment-thumb {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
}

.auto-document-list small {
  font-size: 11px;
  line-height: 1.5;
}

/* Lista dokumenata ne sme da dodiruje ivicu panela. */
.asset-detail-grid .panel > .auto-document-list {
  margin-top: 6px;
}

/* Box „Podaci“: tekst odmaknut od ivica i uokviren, kao u Servisu. */
.auto-spec-panel dl {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.auto-spec-panel dl div {
  gap: 20px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.auto-spec-panel dl div:last-child {
  border-bottom: 0;
}

.auto-spec-panel dl div:nth-child(odd) {
  background: #fafcfd;
}

.auto-spec-panel dt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.auto-spec-panel dd {
  font-size: 13px;
}

/* Isti razmak i u „Evidencija sredstva“. */
.asset-detail-grid .service-data-list > div {
  padding: 15px 18px;
}

.asset-detail-grid .auto-notes {
  padding: 15px 18px;
}

/* ==================================================================
   6. GRUPE PODSETNIKA
   ================================================================== */
.reminder-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.group-new-button {
  min-height: 42px;
  padding-inline: 18px;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(0, 161, 213, 0.24);
}

.group-manage-button {
  min-height: 42px;
}

.group-manage-card {
  width: min(620px, 100%);
}

.group-manage-list {
  display: grid;
  gap: 8px;
  max-height: 52vh;
  margin: 6px 0 4px;
  overflow-y: auto;
}

/*
 * Jedan red = jedna grupa. Sistemska grupa nema dugme za uklanjanje, pa na
 * njegovom mestu stoji prazno polje iste širine — inače bi se redovi
 * razišli po širini.
 */
.group-manage-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.group-manage-delete-placeholder {
  display: block;
  width: 38px;
}

.group-manage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.group-manage-row input[type="color"] {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}

.group-manage-row input[name="name"] {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
}

.group-manage-tag {
  flex: none;
  padding: 4px 8px;
  border-radius: 99px;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.group-manage-delete {
  display: flex;
  justify-content: flex-end;
}

.group-manage-empty {
  grid-column: 1 / -1;
  margin: 12px 0;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 560px) {
  .group-manage-row {
    flex-wrap: wrap;
  }
  .group-manage-row input[name="name"] {
    flex: 1 1 100%;
    order: 3;
  }
}

/* ==================================================================
   7. BIRAČ DATUMA
   ==================================================================
   Naziv meseca sa godinom se prelamao u dva reda i naletao na strelice,
   a godine su bile poređane unazad. Sada je zaglavlje u jednom redu, a
   godine idu rastuće u četiri kolone.
   ================================================================== */
.eu-date-head {
  gap: 6px;
  margin-bottom: 10px;
}

.eu-date-title {
  flex: 1;
  min-width: 0;
  justify-content: center;
  padding: 6px 8px;
  white-space: nowrap;
}

.eu-date-title strong {
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eu-date-title i {
  flex: none;
  font-size: 0.85rem;
}

.eu-date-head button[data-eu-date-prev],
.eu-date-head button[data-eu-date-next] {
  flex: none;
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
}

.eu-date-yearwheel {
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  max-height: 252px;
  padding: 6px 2px;
}

.eu-date-yearwheel button {
  padding: 10px 2px;
  font-size: 0.92rem;
}

.eu-date-yearwheel button.current {
  box-shadow: inset 0 0 0 1px var(--blue);
}

.eu-date-yearwheel button.selected.current {
  box-shadow: none;
}

/* Dok je izbor godine otvoren, podnožje ostaje na istom mestu. */
.eu-date-popover.year-open .eu-date-footer {
  margin-top: 8px;
}

.eu-date-footer button {
  padding: 8px 10px;
  border-radius: 8px;
}

.eu-date-footer button:hover {
  background: var(--blue-soft);
}

/* Datum u uskim menijima (rok obaveze) ne sme da se razvuče. */
.todo-calendar-menu > div .eu-date-input {
  min-height: 40px;
  margin-bottom: 6px;
  font-size: 12px;
}

/* ==================================================================
   8. TO DO LISTA
   ================================================================== */
.todo-board-heading {
  align-items: center;
}

.todo-board-progress {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.todo-board-progress small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.todo-progress-dial {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: conic-gradient(
    var(--blue) var(--todo-progress, 0%),
    #e6eff4 var(--todo-progress, 0%)
  );
}

.todo-progress-dial strong {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--navy);
  font-size: 13px;
  font-weight: 850;
}

/* --- filteri --- */
.todo-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 4px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.todo-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.todo-filter b {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--canvas);
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.todo-filter:hover {
  border-color: var(--blue);
  color: var(--blue-dark);
}

.todo-filter.active {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

.todo-filter.active b {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.todo-filter.alarm:not(.active) {
  border-color: #f3ccd3;
  background: var(--danger-soft);
  color: var(--danger);
}

.todo-filter.alarm:not(.active) b {
  background: #fff;
  color: var(--danger);
}

.todo-filter-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 190px;
  min-width: 160px;
}

.todo-filter-search .app-icon {
  position: absolute;
  left: 11px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  pointer-events: none;
}

.todo-filter-search input {
  width: 100%;
  min-height: 36px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.todo-filter-search input:focus-visible {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 161, 213, 0.12);
}

/* --- prioritet pri unosu --- */
.daily-todo-priority-pick select {
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

/* --- grupne radnje --- */
.todo-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.todo-bulk-bar .button {
  min-height: 38px;
}

/* --- unos: naslov | prioritet | rok | dugme --- */
.dashboard-todo-panel .daily-todo-create {
  grid-template-columns: minmax(0, 1fr) auto 52px auto !important;
}

/* --- red obaveze ---
 * Red je dobio dva nova elementa (ručku za prevlačenje i tačkicu
 * prioriteta), pa mreža mora da ima šest kolona umesto četiri. Raniji
 * slojevi ovu osobinu postavljaju sa !important, zato i ovde.
 */
.dashboard-todo-panel .daily-todo-list article.todo-row {
  grid-template-columns: 22px 34px minmax(0, 1fr) 14px 42px 42px !important;
  gap: 10px !important;
  align-items: center;
  border-radius: 12px;
  transition: background 0.14s ease, box-shadow 0.14s ease;
}

.daily-todo-list .todo-row .daily-todo-copy {
  align-self: center;
}

.daily-todo-list .todo-row:hover {
  background: #f8fbfc;
}

.todo-grip {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  align-self: center;
  color: #b6c6cf;
  cursor: grab;
  touch-action: none;
}

.todo-grip .app-icon {
  width: 17px;
  height: 17px;
}

.todo-row:hover .todo-grip {
  color: var(--blue-dark);
}

.todo-row.dragging {
  background: var(--blue-soft);
  box-shadow: 0 10px 26px rgba(12, 50, 72, 0.16);
  opacity: 0.95;
}

.todo-priority-dot {
  flex: none;
  align-self: center;
  justify-self: center;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c9d7de;
}

.todo-priority-dot.high {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.todo-priority-dot.low {
  background: #b9c8d1;
}

.todo-priority-dot.normal {
  background: var(--blue);
}

.actions-menu > div .todo-priority-dot {
  width: 8px;
  height: 8px;
  box-shadow: none;
}

.todo-row.priority-high .daily-todo-copy > strong,
.todo-row.priority-high .todo-task-link strong {
  color: var(--navy);
}

.todo-row.priority-high::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--danger);
}

.daily-todo-list .todo-row {
  position: relative;
}

.todo-row.done {
  opacity: 0.62;
}

/* Napomena uz obavezu. */
.todo-note {
  display: block;
  margin-top: 5px;
  padding: 8px 10px;
  border-left: 2px solid var(--blue-soft);
  border-radius: 0 8px 8px 0;
  background: #f6fafc;
  color: #4d6b7c;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.todo-search-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.todo-search-empty .app-icon {
  width: 22px;
  height: 22px;
  color: var(--muted);
}

/* Uzak ekran: prioritet ide u svoj red, ostalo ostaje u jednom. */
@media (max-width: 720px) {
  .dashboard-todo-panel .daily-todo-create {
    grid-template-columns: minmax(0, 1fr) 48px 48px !important;
  }
  .daily-todo-priority-pick {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .daily-todo-priority-pick select {
    width: 100%;
  }
  .dashboard-todo-panel .daily-todo-list article.todo-row {
    grid-template-columns: 20px 31px minmax(0, 1fr) 12px 38px 38px !important;
    gap: 7px !important;
  }
  .todo-filter-bar {
    gap: 6px;
  }
  .todo-filter-search {
    flex: 1 1 100%;
  }
}

/* ==================================================================
   9. PREGLED KORISNIKA — PRAVOUGAONIK SA DVE KOLONE
   ==================================================================
   Kartice i dugmad su bili ugnežđeni u spisak aktivnosti (v6.0), pa su se
   preklapali. Sada su dve nezavisne kolone u širem prozoru.
   ================================================================== */
.user-summary-card {
  width: min(1060px, 100%);
  max-height: 88vh;
  overflow-y: auto;
}

.user-summary-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 22px;
  padding: 22px 27px 26px;
}

.user-summary-left,
.user-summary-right {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

.user-summary-body .user-summary-login,
.user-summary-body .user-summary-stats,
.user-summary-body .user-summary-details,
.user-summary-body .user-summary-recent {
  margin: 0;
}

.user-summary-body .user-summary-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.user-summary-body .user-summary-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.user-summary-body .user-summary-details > div {
  padding: 11px 14px;
}

.user-summary-body .us-tabs {
  margin-top: 0;
}

.user-summary-body .us-panel {
  max-height: 260px;
}

.us-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.us-actions .button {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.user-summary-body .user-summary-activity-list {
  display: grid;
  gap: 2px;
}

@media (max-width: 900px) {
  .user-summary-body {
    grid-template-columns: 1fr;
    padding: 18px 18px 22px;
  }
  .user-summary-body .user-summary-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .user-summary-profile {
    padding: 22px 56px 20px 18px;
  }
  .us-actions {
    grid-template-columns: 1fr;
  }
}

/* ===== v6.5.css ===== */
/*
 * Tehnodent Office v6.5
 *
 * 1. Office bez sekcije Moduli i bez navigacije u zaglavlju
 * 2. Traka na dnu: veća, razmaknuta, sa semaforom po modulu
 * 3. Prozor koji objašnjava zašto modul ne radi
 * 4. Kontrola modula sa tri stanja
 * 5. Prozori se slažu jedan preko drugog
 * 6. Potvrda pri izmeni podataka
 * 7. To Do lista — razmaci
 * 8. Izbor widgeta po ugledu na iPhone
 * 9. Dugme za dodavanje koraka u To Do listu
 *
 * Lanac se nastavlja na v6.4.
 */
/* ==================================================================
   1. OFFICE POČETNA
   ================================================================== */

/* Sekcija „Moduli“ je uklonjena — moduli su u traci na dnu. */
.office-section-heading,
.office-module-grid {
  display: none;
}

/* Zaglavlje bez navigacije: logo levo, korisnik desno. */
.office-header {
  justify-content: space-between;
}

.office-nav {
  display: none;
}

/* ==================================================================
   2. TRAKA SA MODULIMA — veća i razmaknutija
   ================================================================== */
.office-dock {
  bottom: 22px;
  max-width: min(1100px, calc(100vw - 28px));
}

.office-dock-inner {
  gap: 14px;
  padding: 12px 18px;
  border-radius: 26px;
  row-gap: 12px;
}

.office-dock-icon {
  width: 62px;
  height: 62px;
  border-radius: 19px;
}

.office-dock-icon .app-icon {
  width: 30px;
  height: 30px;
}

.office-dock-label {
  bottom: calc(100% + 15px);
  padding: 7px 13px;
  font-size: 12px;
}

.office-dock-divider {
  height: 42px;
  margin: 0 8px 10px;
}

.office-dock-spacer {
  height: 118px;
}

/* --- semafor u gornjem desnom uglu ikonice --- */
.office-dock-status {
  position: absolute;
  z-index: 2;
  top: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  border: 2.5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(11, 51, 77, 0.28);
}

.office-dock-status.open {
  background: var(--success);
}

.office-dock-status.warning {
  background: var(--warning);
}

.office-dock-status.closed {
  background: var(--danger);
}

/* Zatvoren modul je vidljivo prigušen, ali se i dalje može kliknuti. */
.office-dock-item.level-closed .office-dock-icon {
  background: linear-gradient(160deg, #fff, #f3f6f8);
  color: #8aa0ad;
}

.office-dock-item.level-warning .office-dock-icon {
  background: linear-gradient(160deg, #fff, #fff5e6);
  color: #b3771a;
}

@media (max-width: 720px) {
  .office-dock {
    bottom: 12px;
  }
  .office-dock-inner {
    gap: 10px;
    padding: 9px 12px;
    border-radius: 20px;
  }
  .office-dock-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }
  .office-dock-icon .app-icon {
    width: 25px;
    height: 25px;
  }
  .office-dock-spacer {
    height: 96px;
  }
}

/*
 * Dok je bilo koji prozor otvoren, traka se sklanja.
 *
 * Traka je fiksirana za donju ivicu, pa je pri visokom prozoru virila preko
 * njegovog dna. Prozor sada dobija viši sloj (JS), a traka se u međuvremenu
 * ukloni da ne odvlači pažnju.
 */
body.modal-open .office-dock {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* ==================================================================
   3. PROZOR: ZAŠTO MODUL NE RADI
   ================================================================== */
.module-gate-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.module-gate-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--danger-soft);
  color: var(--danger);
}

.module-gate-modal.level-warning .module-gate-icon {
  background: var(--warning-soft);
  color: var(--warning);
}

.module-gate-icon .app-icon {
  width: 27px;
  height: 27px;
}

.module-gate-card h2 {
  margin: 0;
  color: var(--navy);
  font-size: 21px;
}

.module-gate-card > p {
  margin: 0;
  max-width: 42ch;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.module-gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.module-gate-actions .button {
  min-height: 44px;
  padding-inline: 20px;
}

/* ==================================================================
   4. KONTROLA MODULA — semafor
   ================================================================== */
.module-maintenance-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.module-maintenance-card.level-open {
  border-left-color: var(--success);
}

.module-maintenance-card.level-warning {
  border-left-color: var(--warning);
}

.module-maintenance-card.level-closed {
  border-left-color: var(--danger);
}

.module-maintenance-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.module-maintenance-head strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
}

.module-maintenance-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.module-status-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--line);
}

.module-status-dot.open {
  background: var(--success);
}

.module-status-dot.warning {
  background: var(--warning);
}

.module-status-dot.closed {
  background: var(--danger);
}

.module-status-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
}

.module-status-option {
  position: relative;
  display: block;
  padding: 9px 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--canvas);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.module-status-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.module-status-option b {
  display: block;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.module-status-option i {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.35;
}

.module-status-option:has(input:checked) {
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(19, 57, 82, 0.1);
}

.module-status-option.open:has(input:checked) {
  border-color: var(--success);
}

.module-status-option.warning:has(input:checked) {
  border-color: var(--warning);
}

.module-status-option.closed:has(input:checked) {
  border-color: var(--danger);
}

.module-status-option:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.module-maintenance-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.module-maintenance-card input[type="text"],
.module-maintenance-card input:not([type]),
.module-maintenance-card textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  resize: vertical;
}

@media (max-width: 620px) {
  .module-status-picker {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   5. PROZORI SE SLAŽU JEDAN PREKO DRUGOG
   ==================================================================
   Sloj postavlja JS (stek otvorenih prozora). Ovde je samo izgled onog
   koji je ostao ispod: zamuti se i malo smanji, kao na telefonu.
   ================================================================== */
.modal.modal-behind .modal-card {
  filter: blur(2.5px) saturate(0.85);
  transform: scale(0.975);
  transition: filter 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.modal.modal-behind .modal-backdrop {
  opacity: 0.5;
}

/* ==================================================================
   6. POTVRDA PRI IZMENI PODATAKA
   ================================================================== */
.confirm-modal.tone-save .confirm-dialog-icon {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.confirm-modal.tone-save .confirm-eyebrow {
  color: var(--blue-dark);
}

.confirm-dialog-icon svg[hidden] {
  display: none !important;
}

/* ==================================================================
   7. TO DO LISTA — RAZMACI
   ==================================================================
   Red je bio nabijen: oznake jedna uz drugu, tekst uz ivicu, a traka sa
   grupnim radnjama zalepljena za obrazac za unos.
   ================================================================== */
.dashboard-todo-panel .daily-todo-list article.todo-row {
  gap: 14px !important;
  padding: 16px 6px !important;
  min-height: 84px !important;
}

.daily-todo-list .todo-row .daily-todo-copy {
  gap: 7px;
}

.daily-todo-copy small {
  padding: 5px 9px;
  line-height: 1.35;
}

/* Oznake (putanja, rok, prioritet) idu u red sa razmakom, pa se prelamaju. */
.todo-row .daily-todo-copy > small,
.todo-row .todo-task-link small {
  margin-top: 1px;
}

.todo-row .todo-task-link {
  display: grid;
  gap: 6px;
}

.todo-row .todo-task-link strong,
.todo-row > .daily-todo-copy > strong {
  font-size: 15px;
  line-height: 1.4;
}

.todo-note {
  margin-top: 8px;
  padding: 10px 12px;
}

.todo-attachment-chips {
  margin-top: 6px;
  gap: 7px;
}

.todo-filter-bar {
  gap: 9px;
  margin: 6px 0 18px;
  padding-bottom: 18px;
}

.todo-filter {
  min-height: 38px;
  padding: 0 15px;
}

.todo-bulk-bar {
  gap: 12px;
  margin: 4px 0 16px;
}

.dashboard-todo-panel .daily-todo-create {
  gap: 14px !important;
  padding: 22px 26px !important;
}

.dashboard-todo-panel .daily-todo-list {
  padding-bottom: 8px;
}

.completed-todo-group {
  margin-top: 22px;
}

@media (max-width: 720px) {
  .dashboard-todo-panel .daily-todo-list article.todo-row {
    gap: 9px !important;
    padding: 14px 2px !important;
  }
  .dashboard-todo-panel .daily-todo-create {
    padding: 16px 14px 18px !important;
  }
}

/* ==================================================================
   8. IZBOR WIDGETA — iPhone maniru
   ================================================================== */
.wps-head p {
  max-width: 56ch;
}

.wps-layout {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 4px 4px 28px;
}

/* --- spisak levo --- */
.wps-list {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: min(62vh, 560px);
  padding: 8px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  overflow-y: auto;
  scrollbar-width: thin;
}

.wps-list-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #eaf5fa;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wps-list-item:hover {
  background: rgba(255, 255, 255, 0.14);
}

.wps-list-item.active {
  border-color: rgba(255, 255, 255, 0.5);
  background: #fff;
  color: var(--navy);
}

.wps-list-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  color: #d8eef8;
}

.wps-list-item.active .wps-list-icon {
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.wps-list-icon .app-icon {
  width: 22px;
  height: 22px;
}

.wps-list-copy {
  min-width: 0;
}

.wps-list-copy strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

.wps-list-copy small {
  display: block;
  margin-top: 3px;
  color: rgba(232, 245, 250, 0.72);
  font-size: 11px;
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wps-list-item.active .wps-list-copy small {
  color: var(--muted);
}

.wps-list-check {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}

.wps-list-item.active .wps-list-check {
  position: relative;
  border-color: var(--blue);
  background: var(--blue);
}

.wps-list-item.active .wps-list-check::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 6px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- pozornica desno --- */
.wps-view {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.wps-view-canvas {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 28px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 161, 213, 0.16), transparent 62%),
    rgba(255, 255, 255, 0.07);
}

.wps-shot {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
}

.wps-shot[hidden] {
  display: none;
}

.wps-shot-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #eaf5fa;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wps-shot-icon .app-icon {
  width: 17px;
  height: 17px;
}

/* Pregled se pri promeni veličine prekraja mekano. */
.wps-shot .wp-frame {
  transition: width 0.2s ease, height 0.2s ease, aspect-ratio 0.2s ease;
}

.wps-view-foot {
  display: grid;
  gap: 16px;
  padding: 20px 22px 22px;
  border-radius: 22px;
  background: #fff;
}

.wps-view-meta strong {
  display: block;
  color: var(--navy);
  font-size: 17px;
}

.wps-view-meta small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.wps-sizes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
}

.wps-size {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
}

.wps-size:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.wps-size.active {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.wps-size b {
  font-size: 12px;
  font-weight: 800;
}

.wps-size small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

.wps-add {
  margin: 0;
}

.wps-add-button {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  font-size: 15px;
}

@media (max-width: 940px) {
  .wps-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .wps-list {
    max-height: 260px;
  }
  .wps-view-canvas {
    min-height: 220px;
    padding: 18px;
  }
}

/* ==================================================================
   9. DUGME ZA DODAVANJE KORAKA U TO DO LISTU
   ==================================================================
   Dugme je nosilo klasu za koju nije postojao nijedan stil, pa se crtalo
   kao golo dugme pregledača, i koristilo je ikonicu koja ne postoji
   ("check"), pa je padalo na podrazumevanu — kvadrat sa kvačicom.
   ================================================================== */
.checklist-to-todo {
  display: flex;
  margin: 0;
}

.checklist-to-todo-button {
  border-color: #bfe3f0;
  background: var(--blue-soft);
  color: var(--blue-dark);
}

.checklist-to-todo-button:hover {
  border-color: var(--blue);
  background: #d8f0f9;
}

/* ===== v6.6.css ===== */
/*
 * Tehnodent Office v6.6
 *
 *  1. Traka na dnu: „Svi moduli“ levo, odvojeno linijom + prevlačenje ikonica
 *  2. Veliki prikaz svih modula (Launchpad)
 *  3. Podešavanja i Administracija bez trake, sa putem nazad
 *  4. Objava administratora pri prijavi
 *  5. Kontrola modula: prvo modul, pa opcije
 *  6. Administracija kao komandna tabla
 *  7. Zajednički izgled stranica sa detaljima
 *  8. Traka radnji sa dva dugmeta i menijem „Još“
 *  9. Jedan birač prikaza spiska (kartice / lista / tabela)
 * 10. Servisna evidencija: kartice i lista
 * 11. Panel sa filterima se otvara ispod svog dugmeta
 * 12. Pretraga bez duplirane ikonice
 * 13. Izbor widgeta: veći tekst i veće stavke
 * 14. Blokovi sa brojevima manji na telefonu
 * 15. Filter po vođi projekta
 *
 * Lanac se nastavlja na v6.5.
 */
/* ==================================================================
   1. TRAKA NA DNU: „SVI MODULI“ I PREVLAČENJE
   ================================================================== */

/*
 * Ikonice modula stoje u svom omotaču, pa prevlačenje pomera samo njih —
 * „Svi moduli“, Administracija i Podešavanja ostaju na svojim mestima.
 */
.office-dock-modules {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: inherit;
}
.office-dock-inner > .office-dock-modules {
  gap: 14px;
}

/* Dugme „Svi moduli“ je dugme, a ne link — mora da izgleda isto kao ikonice. */
button.office-dock-item {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.office-dock-launcher .office-dock-icon {
  background: linear-gradient(160deg, #10506f, #0b334d);
  color: #fff;
}
.office-dock-launcher:hover .office-dock-icon,
.office-dock-launcher:focus-visible .office-dock-icon {
  background: linear-gradient(160deg, #1a6c90, #0d3f5e);
}

/* Dok se ikonica prevlači, ona bledi, a mesto na koje pada se vidi. */
.office-dock-item.dock-dragging {
  opacity: .35;
}
.office-dock-item.dock-drop-before {
  box-shadow: inset 3px 0 0 var(--ui-blue, #00a1d5);
}
.office-dock-item.dock-drop-after {
  box-shadow: inset -3px 0 0 var(--ui-blue, #00a1d5);
}
.office-dock-modules.dock-reordering .office-dock-item {
  transition: opacity .14s ease, box-shadow .14s ease;
}

/* ==================================================================
   2. SVI MODULI — VELIKI PRIKAZ
   ================================================================== */

.module-launchpad {
  position: fixed;
  z-index: 260;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px 16px 0;
  background: rgba(6, 30, 45, .55);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .2s ease;
}
.module-launchpad.is-open {
  opacity: 1;
}
.module-launchpad[hidden] {
  display: none !important;
}
.module-launchpad-sheet {
  width: min(1080px, 100%);
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: 26px 26px 0 0;
  background: #f4f9fb;
  box-shadow: 0 -26px 70px rgba(6, 33, 50, .38);
  transform: translateY(22px);
  transition: transform .24s ease;
  overflow: hidden;
}
.module-launchpad.is-open .module-launchpad-sheet {
  transform: translateY(0);
}
.module-launchpad-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px clamp(18px, 3vw, 30px) 20px;
  background: linear-gradient(150deg, #0f4f6e, #0a2f47);
  color: #fff;
}
.module-launchpad-head h2 {
  margin: 6px 0 4px;
  font-size: 24px;
  font-weight: 800;
}
.module-launchpad-head p {
  margin: 0;
  color: #b9d8e5;
  font-size: 13px;
}
.module-launchpad-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.module-launchpad-close:hover {
  background: rgba(255, 255, 255, .28);
}

.module-launchpad-grid {
  /*
   * Dve kolone na širokom ekranu, ne tri: cilj ovog prikaza je da se vidi
   * VIŠE nego u traci, pa naslov modula ne sme da se prelama, a opis mora da
   * stane u dva reda.
   */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 14px;
  padding: clamp(16px, 2.4vw, 24px);
  overflow-y: auto;
}
.module-launchpad-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 15px;
  padding: 17px 18px;
  border: 1px solid var(--ui-line, #dce8ee);
  border-left: 4px solid #7fc9a6;
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(11, 51, 77, .05);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.module-launchpad-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(11, 51, 77, .1);
}
.module-launchpad-card.level-warning {
  border-left-color: #e8a33d;
}
.module-launchpad-card.level-closed {
  border-left-color: #d9534f;
}
.module-launchpad-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #eaf5f9;
  color: #10506f;
}
.module-launchpad-icon .app-icon {
  width: 27px;
  height: 27px;
}
.module-launchpad-copy strong {
  display: block;
  color: #0f3a52;
  font-size: 17px;
  font-weight: 800;
}
.module-launchpad-copy p {
  margin: 4px 0 0;
  color: #6b8795;
  font-size: 12.5px;
  line-height: 1.45;
}
.module-launchpad-parts {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.module-launchpad-part {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 99px;
  background: #f1f7fa;
  color: #5b7886;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}
.module-launchpad-part b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ba776;
}
.module-launchpad-part.level-warning b {
  background: #e8a33d;
}
.module-launchpad-part.level-closed b {
  background: #d9534f;
}
.module-launchpad-state {
  display: grid;
  justify-items: center;
  gap: 5px;
}
.module-launchpad-state small {
  color: #6b8795;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
}
.module-launchpad-arrow {
  color: #9db6c2;
  font-size: 22px;
}

.module-launchpad-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px clamp(18px, 3vw, 30px);
  border-top: 1px solid var(--ui-line, #dce8ee);
  background: #fff;
  color: #6b8795;
  font-size: 12px;
}
.module-launchpad-foot-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.module-launchpad-foot-actions form {
  margin: 0;
}

@media (max-width: 700px) {
  .module-launchpad {
    padding: 0;
  }
  .module-launchpad-sheet {
    max-height: 100dvh;
    border-radius: 0;
  }
  .module-launchpad-grid {
    grid-template-columns: 1fr;
  }
  .module-launchpad-card {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px;
  }
  .module-launchpad-icon {
    width: 48px;
    height: 48px;
  }
  .module-launchpad-arrow {
    display: none;
  }
  .module-launchpad-foot {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .module-launchpad-foot-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .module-launchpad-foot-actions .button {
    width: 100%;
  }
}

/* ==================================================================
   3. STRANICE BEZ TRAKE: PUT NAZAD
   ================================================================== */

/*
 * v6.5 je uklonila navigaciju iz zaglavlja i ostavila traku kao jedini put
 * između delova sistema. Kad se traka skloni sa Podešavanja i Administracije,
 * tim stranicama treba sopstveni izlaz — inače se iz njih ne može izaći.
 */
.office-return-bar {
  margin-bottom: 18px;
}
.office-return-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--ui-line, #dce8ee);
  border-radius: 99px;
  background: #fff;
  color: #10506f;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 5px 16px rgba(16, 57, 79, .05);
  transition: transform .15s ease, border-color .15s ease;
}
.office-return-link:hover {
  transform: translateX(-2px);
  border-color: #a9d7e3;
}
.office-return-arrow {
  font-size: 17px;
}
/* Bez trake na dnu nema ni potrebe za prostorom koji je traka zauzimala. */
.office-content-no-dock {
  padding-bottom: clamp(24px, 4vw, 40px);
}

/* ==================================================================
   4. OBJAVA ADMINISTRATORA
   ================================================================== */

.announcement-modal .announcement-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.announcement-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: #eaf5f9;
  color: #10506f;
}
.announcement-icon .app-icon {
  width: 29px;
  height: 29px;
}
.announcement-modal.level-warning .announcement-icon {
  background: #fdf2e0;
  color: #a96b13;
}
.announcement-modal.level-critical .announcement-icon {
  background: #fdeceb;
  color: #b3433f;
}
.announcement-card h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}
.announcement-body {
  color: #4e6b7a;
  font-size: 14px;
  line-height: 1.6;
  text-align: left;
  width: 100%;
  max-height: 46vh;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f5fafc;
  overflow-y: auto;
}
.announcement-meta {
  margin: 0;
  color: #8aa2ae;
  font-size: 11.5px;
}
.announcement-actions {
  width: 100%;
  margin: 4px 0 0;
}
.announcement-actions .button {
  width: 100%;
}

/* ==================================================================
   5. KONTROLA MODULA: PRVO MODUL, PA OPCIJE
   ================================================================== */

.module-controls-panel {
  margin-bottom: 22px;
}
.module-controls-layout {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(0, 1.6fr);
  gap: 18px;
  padding: clamp(16px, 2.2vw, 22px);
}
.module-controls-picker {
  display: grid;
  align-content: start;
  gap: 8px;
}
.module-controls-pick {
  min-width: 0;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--ui-line, #dce8ee);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.module-controls-pick:hover {
  border-color: #a9d7e3;
}
.module-controls-pick.active {
  border-color: #10506f;
  background: #f1f8fb;
  box-shadow: inset 3px 0 0 #10506f;
}
.module-controls-pick-copy strong {
  display: block;
  color: #0f3a52;
  font-size: 14px;
  font-weight: 800;
}
.module-controls-pick-copy small {
  color: #6b8795;
  font-size: 11.5px;
}
.module-controls-pick-parts {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: #eaf5f9;
  color: #10506f;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.module-controls-detail {
  min-width: 0;
}
.module-controls-form {
  display: grid;
  gap: 15px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--ui-line, #dce8ee);
  border-radius: 18px;
  background: #fbfdfe;
}
.module-controls-form[hidden] {
  display: none !important;
}
.module-controls-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.module-controls-form-head h3 {
  margin: 5px 0 4px;
  font-size: 18px;
  font-weight: 800;
}
.module-controls-form-head p {
  margin: 0;
  color: #6b8795;
  font-size: 12.5px;
  line-height: 1.5;
}
.module-controls-form-head code {
  padding: 2px 7px;
  border-radius: 7px;
  background: #eef5f8;
  font-size: 11.5px;
}
.module-controls-form > label {
  display: grid;
  gap: 7px;
  color: #496879;
  font-size: 11.5px;
  font-weight: 800;
}
.module-controls-form input,
.module-controls-form textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid var(--ui-line, #dce8ee);
  border-radius: 12px;
  background: #fff;
  color: #0f3a52;
  font: inherit;
  font-weight: 500;
}
.module-controls-form-actions {
  display: flex;
  justify-content: flex-end;
}
.module-status-dot.large {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

@media (max-width: 900px) {
  .module-controls-layout {
    grid-template-columns: 1fr;
  }
  .module-controls-picker {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* ==================================================================
   6. ADMINISTRACIJA KAO KOMANDNA TABLA
   ================================================================== */

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.admin-panel {
  min-width: 0;
}
.admin-panel > .panel-heading {
  padding: 18px clamp(16px, 2.2vw, 22px) 14px;
}

.admin-login-list,
.admin-workload-list,
.admin-announcement-list {
  display: grid;
  gap: 8px;
  padding: 0 clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px);
}
.admin-login-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid #edf4f7;
  border-radius: 13px;
  background: #fbfdfe;
}
.admin-login-main strong {
  display: block;
  color: #0f3a52;
  font-size: 14px;
  font-weight: 800;
}
.admin-login-main small {
  color: #7b929d;
  font-size: 11.5px;
}
.admin-login-when {
  display: grid;
  justify-items: end;
  gap: 1px;
  text-align: right;
}
.admin-login-when b {
  color: #10506f;
  font-size: 13px;
  font-weight: 800;
}
.admin-login-when b.muted {
  color: #9db6c2;
}
.admin-login-when small {
  color: #8aa2ae;
  font-size: 10.5px;
}
.admin-login-warning {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: #fdeceb;
  color: #b3433f;
  font-size: 11.5px;
  font-weight: 800;
}

.admin-workload-row {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid #edf4f7;
  border-radius: 13px;
  background: #fbfdfe;
}
.admin-workload-person {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-workload-person strong {
  display: block;
  color: #0f3a52;
  font-size: 14px;
  font-weight: 800;
}
.admin-workload-person small {
  color: #7b929d;
  font-size: 11.5px;
}
.admin-workload-tasks {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  list-style: none;
}
.admin-workload-tasks a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 11px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: background .15s ease;
}
.admin-workload-tasks a:hover {
  background: #f1f8fb;
}
.admin-workload-tasks b {
  display: block;
  color: #123f57;
  font-size: 13px;
  font-weight: 700;
}
.admin-workload-tasks small {
  display: block;
  color: #7b929d;
  font-size: 11px;
}
.admin-workload-tasks a > span.priority-pill {
  grid-row: 1 / 3;
}
.admin-workload-more {
  padding-left: 10px;
  color: #8aa2ae;
  font-size: 11.5px;
  font-weight: 700;
}

.admin-announcements {
  margin-bottom: 22px;
}
.admin-announcement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #edf4f7;
  border-left: 4px solid #7fb2c9;
  border-radius: 13px;
  background: #fbfdfe;
}
.admin-announcement-row.level-warning {
  border-left-color: #e8a33d;
}
.admin-announcement-row.level-critical {
  border-left-color: #d9534f;
}
.admin-announcement-row.inactive {
  border-left-color: #c3d3db;
  opacity: .62;
}
.admin-announcement-main strong {
  display: block;
  color: #0f3a52;
  font-size: 14.5px;
  font-weight: 800;
}
.admin-announcement-main p {
  margin: 4px 0;
  color: #5b7886;
  font-size: 12.5px;
  line-height: 1.5;
}
.admin-announcement-main small {
  color: #8aa2ae;
  font-size: 11px;
}
.admin-announcement-state {
  color: #6b8795;
  font-size: 11.5px;
  font-weight: 800;
}
.admin-announcement-row form {
  margin: 0;
}

.admin-team-section {
  margin-top: 8px;
}
.admin-team-heading {
  padding: 0 0 14px;
}

@media (max-width: 980px) {
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .admin-login-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .admin-announcement-row {
    grid-template-columns: 1fr;
  }
  .admin-announcement-row .button {
    width: 100%;
  }
}

/* ==================================================================
   7. ZAJEDNIČKI IZGLED STRANICA SA DETALJIMA
   ================================================================== */

.record-detail-back {
  margin-bottom: 14px;
}
.record-detail-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #10506f;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.record-detail-back a:hover {
  text-decoration: underline;
}

.record-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  margin-bottom: 16px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 22px;
  background: linear-gradient(145deg, #0f4f6e, #0a2f47);
  color: #fff;
}
.record-detail-hero-copy h1 {
  margin: 8px 0 6px;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  line-height: 1.15;
}
.record-detail-hero-copy p {
  margin: 0;
  color: #bdd9e6;
  font-size: 14px;
}
.record-detail-hero-copy p strong {
  color: #fff;
}
.record-detail-hero-aside {
  display: flex;
  align-items: center;
  gap: 18px;
}
.record-detail-figure {
  display: grid;
  gap: 3px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .12);
  text-align: right;
}
.record-detail-figure > span {
  color: #a8cbdb;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
}
.record-detail-figure > strong {
  font-size: 20px;
  font-weight: 800;
}
.record-detail-figure > small {
  font-size: 11.5px;
  font-weight: 700;
}

.record-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .record-detail-hero {
    grid-template-columns: 1fr;
  }
  .record-detail-hero-aside {
    justify-content: flex-start;
  }
  .record-detail-figure {
    text-align: left;
  }
  .record-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   8. TRAKA RADNJI: DVA DUGMETA I MENI „JOŠ“
   ================================================================== */

.record-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.record-action-bar-primary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.record-action-bar-primary form,
.record-action-more-menu form {
  margin: 0;
}
.record-action-more {
  position: relative;
  margin-left: auto;
}
.record-action-more-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.record-action-more-button .disclosure-caret {
  display: inline-flex;
  font-style: normal;
  transition: transform .18s ease;
}
.record-action-more-button[aria-expanded="true"] .disclosure-caret {
  transform: rotate(180deg);
}
.record-action-more-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  min-width: 246px;
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--ui-line, #dce8ee);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 48px rgba(9, 51, 73, .16);
}
.record-action-more-menu[hidden] {
  display: none !important;
}
.record-action-more-menu .button {
  width: 100%;
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .record-action-bar,
  .record-action-bar-primary {
    display: grid;
    grid-template-columns: 1fr;
  }
  .record-action-bar-primary .button,
  .record-action-bar-primary form,
  .record-action-bar-primary form .button {
    width: 100%;
  }
  .record-action-more {
    margin-left: 0;
  }
  .record-action-more-button {
    width: 100%;
    justify-content: center;
  }
  .record-action-more-menu {
    right: auto;
    left: 0;
    width: 100%;
    min-width: 0;
  }
}

/* ==================================================================
   9. JEDAN BIRAČ PRIKAZA SPISKA
   ================================================================== */

.listing-view-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ui-line, #dce8ee);
  border-radius: 13px;
  background: #f3f8fa;
}
.listing-view-switch a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 10px;
  color: #5b7886;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.listing-view-switch a .app-icon {
  width: 17px;
  height: 17px;
}
.listing-view-switch a:hover {
  color: #10506f;
}
.listing-view-switch a.active {
  background: #fff;
  color: #0f3a52;
  box-shadow: 0 3px 10px rgba(11, 51, 77, .08);
}

@media (max-width: 640px) {
  .listing-view-switch {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .listing-view-switch a {
    justify-content: center;
    padding: 0 6px;
  }
  .listing-view-switch a span {
    display: none;
  }
}

/* ==================================================================
   10. SERVISNA EVIDENCIJA: KARTICE I LISTA
   ================================================================== */

.service-register-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.service-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  padding: 0 clamp(14px, 2vw, 22px) clamp(16px, 2.2vw, 22px);
}
.service-record-card {
  min-width: 0;
  display: grid;
  gap: 11px;
  padding: 17px;
  border-radius: 18px;
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}
.service-record-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(11, 51, 77, .1);
}
.service-record-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.service-record-card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #eaf5f9;
  color: #10506f;
}
.service-record-card h3 {
  margin: 0;
  color: #0f3a52;
  font-size: 17px;
  font-weight: 800;
}
.service-record-card > p {
  margin: 0;
  color: #6b8795;
  font-size: 12.5px;
}
.service-record-card-data {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 13px;
  border-radius: 13px;
  background: #f6fbfc;
}
.service-record-card-data dt {
  color: #7b929d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.service-record-card-data dd {
  margin: 2px 0 0;
  color: #123f57;
  font-size: 13px;
  font-weight: 700;
}
.service-record-card-data code {
  font-size: 12px;
}
.service-record-card-open {
  color: #10506f;
  font-size: 12.5px;
  font-weight: 800;
}

.service-record-list {
  display: grid;
  gap: 9px;
  padding: 0 clamp(14px, 2vw, 22px) clamp(16px, 2.2vw, 22px);
}
.service-record-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1.1fr) minmax(0, 1.5fr) auto 14px;
  align-items: center;
  gap: 15px;
  padding: 13px 16px;
  border-radius: 15px;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.service-record-row:hover {
  transform: translateY(-1px);
  border-color: #a9d7e3;
}
.service-record-row-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #eaf5f9;
  color: #10506f;
}
.service-record-row-main strong {
  display: block;
  color: #0f3a52;
  font-size: 14.5px;
  font-weight: 800;
}
.service-record-row-main small {
  color: #7b929d;
  font-size: 11.5px;
}
.service-record-row-facts {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.service-record-row-facts small {
  display: block;
  color: #8aa2ae;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
}
.service-record-row-facts b {
  display: block;
  color: #123f57;
  font-size: 12.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.service-record-row-arrow {
  color: #9db6c2;
  font-size: 20px;
}

@media (max-width: 900px) {
  .service-card-grid {
    grid-template-columns: 1fr;
  }
  .service-record-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 11px;
  }
  .service-record-row-icon {
    width: 40px;
    height: 40px;
  }
  .service-record-row-facts {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 4px;
  }
  .service-record-row-arrow {
    display: none;
  }
}

/* ==================================================================
   11. PANEL SA FILTERIMA SE OTVARA ISPOD SVOG DUGMETA
   ================================================================== */

/*
 * Šta je bilo pogrešno:
 *
 * `v4.7.css` je panel sa filterima postavljala kao `position: absolute` sa
 * `right: 0` i širinom do 760px, i to unutar `.service-register-heading` —
 * dakle u odnosu na uzano dugme u zaglavlju. Panel se onda otvarao pomeren u
 * stranu, delom van svog panela. Uz to je `service.css` na širokom ekranu
 * krila samo dugme (`summary { display: none }`), pa se panel sa filterima
 * uopšte nije mogao zatvoriti.
 *
 * Kako je sada: dugme je uvek vidljivo, panel stoji u normalnom toku odmah
 * ispod dugmeta i preko cele širine spiska. Nema lebdenja, nema pomeranja.
 */
.service-filter-row {
  padding: 0 clamp(14px, 2vw, 22px) 16px;
}
.service-filter-row .service-filter-disclosure {
  position: relative;
  margin: 0;
}
.service-filter-row .service-filter-disclosure > summary {
  display: inline-flex !important;
  width: max-content;
  min-height: 46px;
}
.service-filter-row .service-filter-disclosure > .service-filters {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 100%;
  margin: 10px 0 0 !important;
  border: 1px solid var(--ui-line, #dce8ee);
  box-shadow: none !important;
}
.service-filter-row .service-filter-disclosure:not([open]) > .service-filters {
  display: none !important;
}

/* Panel sa filterima osnovnih sredstava stoji u toku, kao i ovaj. */
.asset-filter-disclosure > .module-filter-form {
  width: 100% !important;
}

@media (max-width: 640px) {
  .service-filter-row .service-filter-disclosure > summary {
    width: 100%;
    justify-content: center;
  }
}

/* ==================================================================
   12. PRETRAGA BEZ DUPLIRANE IKONICE
   ================================================================== */

/*
 * Polja za pretragu su bila `type="search"`, pa je pregledač uz našu ikonicu
 * lupe iscrtavao i svoju oznaku (i dugme za brisanje na WebKitu) — izgledalo
 * je kao duplirana ikonica iza polja. U HTML-u su sada obična tekstualna
 * polja; ovde se, za svaki slučaj, sklanja i svaka pregledačeva dekoracija,
 * pa se problem ne može vratiti ni ako neko polje ostane `type="search"`.
 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  appearance: none;
  display: none;
}
.topbar-search input,
.service-search input,
.todo-filter-search input,
.filter-search input,
.search-box input {
  appearance: none;
}

/* ==================================================================
   13. IZBOR WIDGETA: VEĆI TEKST I VEĆE STAVKE
   ================================================================== */

.wps-head h2 {
  font-size: 27px;
}
.wps-head p {
  font-size: 14.5px;
  line-height: 1.55;
}
.wps-list-item {
  min-height: 74px;
  gap: 15px;
  padding: 15px 17px;
}
.wps-list-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
}
.wps-list-icon .app-icon {
  width: 23px;
  height: 23px;
}
.wps-list-copy strong {
  font-size: 16px;
}
.wps-list-copy small {
  font-size: 12.5px;
  line-height: 1.45;
}
.wps-view-meta strong {
  font-size: 19px;
}
.wps-view-meta small {
  font-size: 13px;
}
.wps-size {
  padding: 13px 15px;
}
.wps-size b {
  font-size: 14px;
}
.wps-size small {
  font-size: 11.5px;
}
.wps-add-button {
  min-height: 52px;
  font-size: 15px;
}

@media (max-width: 700px) {
  .wps-head h2 {
    font-size: 23px;
  }
  .wps-list-item {
    min-height: 66px;
    padding: 13px 14px;
  }
  .wps-list-copy strong {
    font-size: 15px;
  }
}

/* ==================================================================
   14. BLOKOVI SA BROJEVIMA MANJI NA TELEFONU
   ================================================================== */

/*
 * Četiri bloka sa brojevima su na telefonu zauzimala više od polovine prve
 * strane ekrana — kod osnovnih sredstava su išli u JEDNU kolonu (v4.8), pa su
 * bila četiri visoka reda, sa brojem od 31px i opisom koji se ionako ponavlja
 * u naslovu iznad.
 *
 * Ostaju sva četiri i ostaju čitljiva: dva po dva, niži blok, manji broj, bez
 * opisa i strelice. Pravila moraju da ciljaju `> a`, jer app.css tu ima
 * rulove više specifičnosti (`.today-stats > a strong`) koji bi inače pobedili.
 */
.today-stats.stats-compact > a {
  min-height: 0;
  gap: 10px;
  padding: 13px 14px;
}
.today-stats.stats-compact .today-stat-icon {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}
.today-stats.stats-compact > a strong {
  font-size: 24px;
}
.today-stats.stats-compact > a p {
  display: none;
}

@media (max-width: 760px) {
  /* Nikad jedna kolona: dva po dva je i kraće i čitljivije. */
  .today-stats,
  .asset-stats,
  .reminder-stats,
  .service-list-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .today-stats > a {
    min-height: 0;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border-radius: 13px;
  }
  .today-stat-icon {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    border-radius: 10px;
    font-size: 11px;
  }
  .today-stat-icon .app-icon {
    width: 16px;
    height: 16px;
  }
  .today-stats > a strong {
    font-size: 21px;
    line-height: 1.05;
  }
  .today-stats > a small {
    font-size: 8.5px;
    letter-spacing: .02em;
  }
  .today-stats > a p,
  .today-stat-arrow {
    display: none;
  }

  /*
   * Servisni sažetak ima svoj raspored (ikonica preko tri reda) i svoju
   * najmanju visinu, koju `service.css` na telefonu diže na 158px — zato se
   * `min-height` ovde mora izričito vratiti na nulu.
   */
  .service-list-summary > a {
    min-height: 0;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 10px;
    padding: 11px 12px;
    border-radius: 13px;
  }
  .service-list-summary .service-stat-icon {
    grid-row: 1 / 3;
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .service-list-summary small {
    grid-column: 2;
    font-size: 8.5px;
  }
  .service-list-summary strong {
    grid-column: 2;
    font-size: 21px;
    line-height: 1.05;
  }
  .service-list-summary p {
    display: none;
  }
}

/* ==================================================================
   15. FILTER PO VOĐI PROJEKTA
   ================================================================== */

.project-leader-filter {
  min-width: 0;
  display: grid;
  gap: 6px;
  color: #496879;
  font-size: 11px;
  font-weight: 800;
}
.project-leader-filter select {
  min-width: 170px;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--ui-line, #dce8ee);
  border-radius: 12px;
  background: #fff;
  color: #0f3a52;
  font: inherit;
  font-weight: 600;
}

@media (max-width: 860px) {
  .project-leader-filter,
  .project-leader-filter select {
    width: 100%;
    min-width: 0;
  }
}

/* ==================================================================
   16. TRAKA RADNJI — PODEŠAVANJE
   ================================================================== */

.settings-actionbar {
  margin-top: 18px;
}
.settings-actionbar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0 clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 22px);
}
.settings-actionbar-form {
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 17px;
  border: 1px solid var(--ui-line, #dce8ee);
  border-radius: 16px;
  background: #fbfdfe;
}
.settings-actionbar-form h3 {
  margin: 0;
  color: #0f3a52;
  font-size: 16px;
  font-weight: 800;
}
.settings-actionbar-hint {
  margin: 0;
  color: #7b929d;
  font-size: 12px;
}
.settings-actionbar-options {
  display: grid;
  gap: 8px;
}
.settings-actionbar-form .form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-actionbar-count {
  color: #8aa2ae;
  font-size: 11.5px;
  font-weight: 800;
}
.settings-actionbar-count.over {
  color: #b3433f;
}

@media (max-width: 860px) {
  .settings-actionbar-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================================================================
   17. KORAK KOJI JE VEĆ U TO DO LISTI
   ================================================================== */

/*
 * Dugme „Dodaj u To Do“ je izgledalo isto i pre i posle dodavanja, a radilo je
 * punim osvežavanjem stranice — ekran bi skočio na vrh, sekcija sa koracima se
 * zatvorila, i činilo se da dugme ne radi. Sada korak koji je već u listi nosi
 * zelenu kvačicu i vodi na To Do listu.
 */
.checklist-in-todo {
  border-color: #a9dcc4;
  background: #edfaf3;
  color: #217a51;
  text-decoration: none;
}
.checklist-in-todo:hover {
  border-color: #6cc59a;
  background: #dff5e9;
}

/* ===== v6.8.css ===== */
/*
 * Tehnodent Office v6.8
 *
 *  1. Traka sa modulima: isključivo jedan red
 *  2. Prevlačenje ikonica: kopija koja prati prst
 *  3. Jedinstveno dugme za filtere u celom sistemu
 *  4. Izbor widgeta: fiksna visina i prevlačenje kroz veličine
 *  5. Poruka zatvorenog modula: veće rastojanje
 *  6. QR nalepnica: bez plave linije, i štampa na jednoj strani
 *
 * Sloj se, kao i v6.7, učitava kao zaseban <link> i NE produžava @import
 * lanac — tako ide paralelno sa ostalima umesto da doda još jedno čekanje u
 * nizu od sedamnaest fajlova koji se već učitavaju jedan za drugim.
 *
 * Redosled u zaglavlju je: app.css → v6.6.css → v6.8.css → v6.7.css.
 * v6.7 namerno ostaje poslednji, jer gasi zamućenja na dodirnim uređajima i
 * to pravilo mora da nadjača sve što dolazi pre njega.
 */

/* ==================================================================
   1. TRAKA SA MODULIMA — JEDAN RED, BEZ IZUZETAKA
   ================================================================== */

/*
 * Do v6.8 je traka imala `flex-wrap: wrap`, pa se pri sedam modula na užem
 * ekranu ikonica za Podešavanja prelomila u drugi red i stajala sama ispod
 * ostalih. Sada red ne sme da se prelomi; ako modula ima previše za širinu
 * ekrana, traka se pomera postrance, a klizač se ne vidi.
 */
.office-dock-inner {
  flex-wrap: nowrap !important;
  row-gap: 0 !important;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /*
   * Bez ovoga bi poslednja ikonica dodirivala ivicu trake kada se klizne
   * do kraja.
   */
  scroll-padding-inline: 12px;
}

.office-dock-inner::-webkit-scrollbar {
  display: none;
}

/*
 * Bez ovoga se red lepo NE prelama, ali se ikonice preklapaju: v6.6 je grupi
 * modula dao `min-width: 0`, pa se ona skupljala ispod svog sadržaja, a
 * Administracija i Podešavanja su nalazile preko poslednjih modula. Grupa
 * sada zadržava svoju pravu širinu, a klizi cela traka.
 */
.office-dock-modules {
  flex-wrap: nowrap !important;
  flex: 0 0 auto;
  min-width: max-content !important;
}

.office-dock-inner > * {
  flex: none;
}

/*
 * Kada traka klizi, desna ivica se blago gubi — tako se vidi da ima još
 * ikonica, bez klizača koji bi zauzeo mesto.
 */
@media (max-width: 560px) {
  .office-dock-inner {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
  }
}

/*
 * Na uskom ekranu ikonice se malo skupe pre nego što traka počne da klizi —
 * sedam modula tako i dalje staje odjednom na većini telefona.
 */
@media (max-width: 560px) {
  .office-dock-inner > .office-dock-modules {
    gap: 8px;
  }

  .office-dock-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
}

/* ==================================================================
   2. PREVLAČENJE IKONICA — KOPIJA KOJA PRATI PRST
   ================================================================== */

/*
 * Ikonica koja se vuče ostaje na svom mestu i bledi, a preko ekrana se kreće
 * njena kopija. Tako se stalno vidi i odakle je krenula i gde će pasti.
 */
.dock-drag-ghost {
  position: fixed;
  z-index: 400;
  margin: 0;
  pointer-events: none;
  transform-origin: center center;
  filter: drop-shadow(0 14px 26px rgba(9, 45, 68, .3));
}

.dock-drag-ghost .office-dock-icon {
  transform: scale(1.12);
}

/*
 * Ista stvar i u stilovima: ikonica se ne sme birati ni vući kao slika ili
 * link dok se premešta.
 */
.office-dock-modules .office-dock-item {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.office-dock-modules .office-dock-item img,
.office-dock-modules .office-dock-item svg {
  pointer-events: none;
}

.office-dock-item.dock-dragging {
  opacity: .28;
}

/*
 * Ivice koje su pokazivale gde stavka pada više ne trebaju: ostale ikonice
 * se sada stvarno razmiču, pa se mesto vidi samo po sebi.
 */
.office-dock-item.dock-drop-before,
.office-dock-item.dock-drop-after {
  box-shadow: none;
}

.office-dock-modules.dock-reordering .office-dock-item {
  /* Tokom premeštanja ikonica ne sme da se uvećava na prelaz mišem. */
  transition: opacity .14s ease;
}

.office-dock-modules.dock-reordering .office-dock-item:hover {
  transform: none;
}

/* ==================================================================
   3. JEDNO DUGME ZA FILTERE, ISTO SVUDA
   ================================================================== */

/*
 * Filteri su do sada izgledali drugačije u svakom modulu: u Zadacima prozor
 * preko celog ekrana, u Arhivi stalno otvoren red polja, u Podsetnicima i
 * Servisu panel sa natpisom „Pretraga i filteri". Sada svuda stoji isto
 * dugme, otvara isti panel, i zatvara se klikom bilo gde van njega.
 */
.module-filter-disclosure {
  position: relative;
}

.module-filter-disclosure > summary,
.module-filter-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  height: 42px;
  border: 1px solid var(--line, #dfe9ef);
  border-radius: 12px;
  background: #fff;
  color: var(--ink, #0b334d);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}

.module-filter-disclosure > summary::-webkit-details-marker {
  display: none;
}

.module-filter-disclosure > summary:hover {
  border-color: #b9d5e4;
  background: #f5fbfe;
}

.module-filter-disclosure[open] > summary {
  border-color: var(--ui-blue, #00a1d5);
  box-shadow: 0 0 0 3px rgba(0, 161, 213, .14);
}

.module-filter-disclosure > summary svg {
  width: 18px;
  height: 18px;
}

/* Broj uključenih filtera — isti oblik svuda. */
.module-filter-disclosure > summary b {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ui-blue, #00a1d5);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.module-filter-disclosure > summary .disclosure-caret {
  display: grid;
  place-items: center;
  margin-inline-start: 2px;
  color: #6c8598;
  transition: transform .18s ease;
}

.module-filter-disclosure > summary .disclosure-caret svg {
  width: 15px;
  height: 15px;
}

.module-filter-disclosure[open] > summary .disclosure-caret {
  transform: rotate(180deg);
}

/*
 * Panel visi ispod svog dugmeta i ne gura sadržaj ispod sebe. Zato je
 * `absolute` — tako spisak iza njega ne poskakuje pri svakom otvaranju.
 */
.module-filter-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: min(420px, 92vw);
  padding: 18px;
  border: 1px solid var(--line, #dfe9ef);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(9, 45, 68, .16);
  animation: filter-panel-in .16s ease both;
}

@keyframes filter-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Panel koji bi iscurio preko desne ivice otvara se ulevo. */
.module-filter-disclosure.align-end .module-filter-panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

/*
 * Polja se sama slažu u onoliko kolona koliko stane. Tako isti panel radi i
 * u Zadacima, gde polja ima šest, i u Arhivi, gde ih ima tri.
 */
.module-filter-panel > form,
.module-filter-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px 14px;
  align-items: end;
}

/* Potvrdno polje i dugmad idu preko cele širine, ispod ostalih polja. */
.module-filter-form .check-filter,
.module-filter-panel .check-filter,
.module-filter-actions,
.module-filter-panel .archive-filter-row {
  grid-column: 1 / -1;
}

.module-filter-panel .check-filter {
  display: flex;
  align-items: center;
  gap: 9px;
}

.module-filter-panel label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #4a6178;
}

.module-filter-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 4px;
}

.module-filter-actions .button {
  flex: 0 0 auto;
}

/* Na telefonu panel zauzima punu širinu i staje ispod dugmeta. */
@media (max-width: 640px) {
  .module-filter-disclosure {
    width: 100%;
  }

  .module-filter-disclosure > summary {
    width: 100%;
    justify-content: center;
  }

  .module-filter-panel {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 10px;
    box-shadow: none;
  }
}

/* ==================================================================
   4. IZBOR WIDGETA — FIKSNA VISINA, PREVLAČENJE KROZ VELIČINE
   ================================================================== */

/*
 * Prigovor je bio da prozor „beži ka dole": bio je viši od ekrana, pa se
 * dugme „Dodaj na radni prostor" tražilo skrolovanjem. Sada je ceo prozor
 * visine ekrana i ništa iz njega ne izlazi — kliza jedino spisak levo.
 *
 * VAŽNO: v5.7 je ugasio raniju, napuštenu verziju ovog prikaza pravilom
 *   .wps-stage, .wps-track, .wps-dots, .wps-arrow { display: none !important; }
 * Imena klasa su ista, pa se to pravilo mora izričito poništiti — inače traka,
 * tačkice i strelice postoje u HTML-u, a na ekranu ih nema. `!important` ovde
 * nije nemar nego jedini način da se nadjača starije `!important`.
 */
.wps-stage { display: grid !important; }
.wps-deck { display: block !important; }
.wps-track { display: flex !important; }
.wps-dots { display: flex !important; }
.wps-arrow { display: grid !important; }

.widget-picker-sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.widget-picker-sheet .wps-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  align-items: stretch;
  gap: 24px;
  overflow: hidden;
}

.widget-picker-sheet .wps-list {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-inline-end: 6px;
}

.widget-picker-sheet .wps-view {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 14px;
}

.wps-templates {
  display: none !important;
}

/* --- pozornica sa strelicama --- */

.wps-stage {
  min-height: 0;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
}

.wps-arrow {
  /*
   * v5.4 je strelice postavljao `position: absolute`. Takav element ne
   * učestvuje u rasporedu mreže, pa je pregled padao u prvu, usku kolonu i
   * dobijao 44 piksela širine. Zato se položaj izričito vraća u tok.
   */
  position: static !important;
  transform: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background .14s ease, transform .14s ease, opacity .14s ease;
}

.wps-arrow:hover {
  background: rgba(255, 255, 255, .24);
}

.wps-arrow:hover,
.wps-arrow:hover:not(:active) {
  transform: none;
}

.wps-arrow:active {
  transform: scale(.92);
}

.wps-arrow .app-icon,
.wps-arrow svg {
  width: 20px;
  height: 20px;
}

/* Ista ikonica, samo okrenuta — levo i desno. */
.wps-arrow[data-wps-step="-1"] svg { transform: rotate(90deg); }
.wps-arrow[data-wps-step="1"] svg { transform: rotate(-90deg); }

/* --- traka kroz koju se prevlači --- */

.wps-deck {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 161, 213, .16), transparent 62%),
    rgba(255, 255, 255, .07);
  /*
   * Vodoravno prevlačenje pripada nama; uspravno skrolovanje ostaje
   * pregledaču, da se stranica iza i dalje ponaša normalno na telefonu.
   */
  touch-action: pan-y;
  cursor: grab;
}

.wps-deck:active {
  cursor: grabbing;
}

.wps-track {
  height: 100%;
  align-items: stretch;
  will-change: transform;
}

.wps-slide {
  flex: 0 0 auto;
  min-width: 0;
  height: 100%;
  display: grid;
  place-content: center;
  place-items: center;
  padding: 24px 18px;
  opacity: .3;
  transform: scale(.9);
  transition: opacity .28s ease, transform .28s ease;
}

.wps-slide.active {
  opacity: 1;
  transform: scale(1);
}

.wps-slide .wps-shot {
  display: grid !important;
  justify-items: center;
  gap: 14px;
  max-width: 100%;
}

/* --- tačkice --- */

.wps-dots {
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: none;
}

.wps-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
  cursor: pointer;
  transition: background .16s ease, width .16s ease;
}

.wps-dot.active {
  width: 24px;
  border-radius: 999px;
  background: #fff;
}

/* --- podnožje: naziv, izabrana veličina, dugme --- */

.widget-picker-sheet .wps-view-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta velicina"
    "dugme dugme";
  align-items: center;
  gap: 14px 18px;
  padding: 18px 20px;
}

.widget-picker-sheet .wps-view-meta {
  grid-area: meta;
  min-width: 0;
}

.wps-size-caption {
  grid-area: velicina;
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--blue-soft, #e8f4fa);
}

.wps-size-caption b {
  color: var(--navy, #0b334d);
  font-size: 14px;
  font-weight: 800;
}

.wps-size-caption small {
  color: var(--muted, #6c8598);
  font-size: 12px;
}

.widget-picker-sheet .wps-add {
  grid-area: dugme;
}

@media (max-width: 900px) {
  .widget-picker-sheet .wps-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 32%) minmax(0, 1fr);
  }

  .wps-stage {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Na dodir se prevlači prstom, pa strelice samo troše mesto. */
  .wps-arrow {
    display: none !important;
  }

  .widget-picker-sheet .wps-view-foot {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "meta"
      "velicina"
      "dugme";
  }

  .wps-size-caption {
    justify-items: start;
    text-align: left;
  }
}

/* ==================================================================
   5. PORUKA ZATVORENOG MODULA — VAZDUH IZMEĐU REDOVA
   ================================================================== */

/*
 * Ikonica, natpis, naslov, objašnjenje i dva dugmeta stajali su nabijeni
 * jedno na drugo. Sadržaj je isti; samo je razmaknut.
 */
.module-gate-card {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 38px 34px 30px;
  text-align: center;
}

.module-gate-card .module-gate-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 20px;
  border-radius: 20px;
}

.module-gate-card .module-gate-icon svg {
  width: 28px;
  height: 28px;
}

.module-gate-card .eyebrow {
  margin-bottom: 14px;
  letter-spacing: .14em;
}

.module-gate-card h2 {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.25;
}

.module-gate-card p {
  margin: 0;
  max-width: 42ch;
  color: #4a6178;
  font-size: 15px;
  line-height: 1.6;
}

.module-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

.module-gate-actions .button {
  min-width: 148px;
  height: 46px;
}

/* Ista stvar i na celoj stranici zatvorenog modula. */
.maintenance-card {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 46px 38px 40px;
  text-align: center;
}

.maintenance-card .maintenance-icon {
  margin-bottom: 22px;
}

.maintenance-card .eyebrow {
  margin-bottom: 14px;
}

.maintenance-card h1 {
  margin: 0 0 14px;
}

.maintenance-card p {
  margin: 0 0 30px;
  max-width: 46ch;
  line-height: 1.6;
}

/* ==================================================================
   6. QR NALEPNICA — BEZ PLAVE LINIJE, I JEDNA STRANA PRI ŠTAMPI
   ================================================================== */

/*
 * Plavi okvir oko nalepnice nije nosio nikakvu informaciju, a pri štampi je
 * trošio mastilo i mamio da se seče po njemu. Umesto njega stoji tanka siva
 * linija, tek toliko da se na belom papiru vidi gde nalepnica počinje.
 */
.asset-label {
  border-color: #d7e2e9 !important;
  border-width: 1px !important;
}

@media print {
  /*
   * OVO je bio uzrok devet stranica.
   *
   * Pravilo iz v5.6 je sakrivalo sve osim `.modal` — ali na stranici
   * osnovnog sredstva ima više prozora (izmena, brisanje, nalepnica...), a
   * svaki od njih je i dalje `.modal`. Svi su se štampali, svaki na svoju
   * stranu. Sada se štampa isključivo onaj koji je STVARNO otvoren.
   */
  body.printing-label .modal:not(.open) {
    display: none !important;
  }

  body.printing-label .modal.open {
    display: block !important;
  }

  /* Ništa osim same nalepnice ne sme da zauzme stranu. */
  body.printing-label .modal.open .modal-card {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.printing-label .asset-label {
    border: 1px solid #b9c7d0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Bez ovoga prazan omotač ume da napravi još jednu, praznu stranu. */
  body.printing-label,
  body.printing-label .modal.open,
  body.printing-label .modal.open .modal-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* ===== v6.9.css ===== */
/*
 * Tehnodent Office v6.9
 *
 *  1. Bočni meni koji se sklanja — u svim modulima
 *  2. Ikonica modula Lidovi u traci
 *
 * Sloj se, kao v6.7 i v6.8, učitava kao zaseban <link> i NE produžava @import
 * lanac. Redosled u zaglavlju je: app.css → v6.6.css → v6.8.css → v6.9.css →
 * v6.7.css. v6.7 namerno ostaje poslednji, jer gasi zamućenja na dodirnim
 * uređajima i to pravilo mora da nadjača sve pre njega.
 */

/* ==================================================================
   1. BOČNI MENI KOJI SE SKLANJA
   ================================================================== */

/*
 * Radni deo je u svim modulima bio sužen menijem koji se u toku rada retko
 * koristi. Sada se sklanja strelicom i izbor se pamti po korisniku.
 *
 * Meni se ne uklanja nego SKUPLJA na uzak stubac sa samim ikonicama: tako se
 * i dalje vidi gde si i može da se pređe u drugi deo modula bez vraćanja
 * menija. Naziv iskoči pri prelasku mišem.
 */

.sidebar-collapse {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 28px);
  margin: 6px 14px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  color: rgba(232, 245, 250, .82);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}

.sidebar-collapse:hover {
  background: rgba(255, 255, 255, .13);
  color: #fff;
}

.sidebar-collapse-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform .2s ease;
  /* Ikonica je strelica nadole; okrenuta ulevo znači „skloni“. */
  transform: rotate(90deg);
}

.sidebar-collapse-icon svg {
  width: 16px;
  height: 16px;
}

.sidebar-collapse-text {
  overflow: hidden;
  white-space: nowrap;
}

/* --- skupljeno stanje --- */

.app-shell.sidebar-collapsed .sidebar {
  width: 78px;
  min-width: 78px;
}

.app-shell.sidebar-collapsed .sidebar .nav-group-label,
.app-shell.sidebar-collapsed .sidebar .main-nav a > span:not(.nav-icon),
.app-shell.sidebar-collapsed .sidebar-user > div,
.app-shell.sidebar-collapsed .brand span,
.app-shell.sidebar-collapsed .sidebar-collapse-text {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar .main-nav a {
  justify-content: center;
  padding-inline: 0;
}

.app-shell.sidebar-collapsed .brand {
  justify-content: center;
  padding-inline: 0;
}

.app-shell.sidebar-collapsed .brand img {
  margin: 0;
}

.app-shell.sidebar-collapsed .sidebar-user {
  justify-content: center;
}

.app-shell.sidebar-collapsed .sidebar-collapse {
  width: 46px;
  margin-inline: auto;
  justify-content: center;
  padding-inline: 0;
}

.app-shell.sidebar-collapsed .sidebar-collapse-icon {
  transform: rotate(-90deg);
}

/*
 * Naziv stavke iskoči pored ikonice dok je meni skupljen, da se ne mora
 * pogađati šta koja znači.
 */
.app-shell.sidebar-collapsed .sidebar .main-nav a {
  position: relative;
}

.app-shell.sidebar-collapsed .sidebar .main-nav a::after {
  content: attr(data-nav-label);
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  top: 50%;
  z-index: 60;
  padding: 7px 11px;
  border-radius: 9px;
  background: #0b334d;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(-4px);
  transition: opacity .14s ease, transform .14s ease;
}

.app-shell.sidebar-collapsed .sidebar .main-nav a:hover::after,
.app-shell.sidebar-collapsed .sidebar .main-nav a:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/*
 * Na telefonu meni ionako izlazi preko dugmeta ☰ i prekriva ekran, pa
 * skupljanje tamo nema smisla — strelica se sklanja, a skupljeno stanje se
 * poništava.
 */
@media (max-width: 900px) {
  .sidebar-collapse {
    display: none;
  }

  .app-shell.sidebar-collapsed .sidebar {
    width: auto;
    min-width: 0;
  }

  .app-shell.sidebar-collapsed .sidebar .nav-group-label,
  .app-shell.sidebar-collapsed .sidebar .main-nav a > span:not(.nav-icon),
  .app-shell.sidebar-collapsed .sidebar-user > div,
  .app-shell.sidebar-collapsed .brand span {
    display: revert;
  }

  .app-shell.sidebar-collapsed .sidebar .main-nav a,
  .app-shell.sidebar-collapsed .brand,
  .app-shell.sidebar-collapsed .sidebar-user {
    justify-content: flex-start;
  }

  .app-shell.sidebar-collapsed .sidebar .main-nav a::after {
    content: none;
  }
}

/* ==================================================================
   2. LIDOVI U TRACI SA MODULIMA
   ================================================================== */

/*
 * Modul je od v6.9 otvoren, pa njegova ikonica u traci dobija istu zelenu
 * tačkicu kao ostali. Boja same ikonice prati vrstu posla koji modul prati.
 */
.office-dock-item[data-dock-code="leads"] .office-dock-icon {
  color: #0e7490;
}

/* ===== v7.0.css ===== */
/*
 * Tehnodent Office v7.0
 *
 *  1. Traka sa modulima: animacija više nije odsečena
 *  2. Bočni meni: diskretna strelica, potpuno sklanjanje, centriran sadržaj
 *  3. Filter: isti izgled na svakoj stranici
 *  4. Lidovi: meni reda, panel sa kolonama, razmaci u unosu
 *  5. Izbor widgeta: dovršen
 *  6. Administracija: delovi levo, sadržaj desno
 *  7. Traka radnji: objašnjenje na licu mesta
 *
 * Sloj se učitava kao zaseban <link> i NE produžava @import lanac.
 * Redosled: app.css → v6.6 → v6.8 → v6.9 → v7.0 → v6.7.
 */

/* ==================================================================
   1. TRAKA SA MODULIMA — ANIMACIJA VIŠE NIJE ODSEČENA
   ================================================================== */

/*
 * Greška uvedena u v6.8: da bi traka mogla da klizi kada modula ima previše,
 * dobila je `overflow-x: auto`. Po CSS standardu, čim jedna osa nije
 * `visible`, i druga prestaje da bude — pa je uspravno uvećanje ikonice pri
 * prelasku mišem počelo da se seče o gornju ivicu trake.
 *
 * Klizanje je potrebno samo tamo gde traka zaista ne staje: na uskim i
 * dodirnim ekranima. Tamo prelaska mišem nema, pa se ništa ne gubi. Na
 * računaru traka staje i vraća se slobodno crtanje preko okvira.
 */
@media (hover: hover) and (min-width: 561px) {
  .office-dock-inner {
    overflow: visible !important;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ==================================================================
   2. BOČNI MENI
   ================================================================== */

/*
 * Strelica je jedna, tiha i mala, i stoji izvan menija — kada se meni skloni
 * u celosti, ona mora da ostane negde da bi imalo čime da se vrati.
 */
.sidebar-collapse {
  position: fixed;
  z-index: 140;
  top: 50%;
  inset-inline-start: 286px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 46px;
  /*
   * v6.9 je isto dugme crtao kao široku stavku UNUTAR menija, pa je imao
   * spoljni razmak. Ovde je dugme `fixed` uz ivicu, pa bi ga taj razmak
   * pomerio za 14px udesno — zato se izričito poništava.
   */
  margin: 0;
  padding: 0;
  border: 1px solid var(--line, #dfe9ef);
  border-inline-start: 0;
  border-radius: 0 10px 10px 0;
  background: #fff;
  color: #6c8598;
  cursor: pointer;
  opacity: .5;
  transform: translateY(-50%);
  transition: opacity .16s ease, color .16s ease, inset-inline-start .24s cubic-bezier(.22,1,.36,1);
}

.sidebar-collapse:hover,
.sidebar-collapse:focus-visible {
  opacity: 1;
  color: var(--ui-blue, #00a1d5);
  outline: none;
}

.sidebar-collapse svg {
  width: 15px;
  height: 15px;
  transform: rotate(90deg);
  transition: transform .2s ease;
}

/* --- sklonjeno stanje --- */

/*
 * Meni odlazi u celosti. Ranije se skupljao na uzak stubac sa ikonicama, ali
 * je traženo da nestane sasvim — pa ostaje samo strelica uz ivicu ekrana.
 */
.app-shell.sidebar-collapsed > .sidebar {
  display: none !important;
}

.app-shell.sidebar-collapsed .sidebar-collapse {
  inset-inline-start: 0;
  /* v6.9 je sklopljenom dugmetu davao 46px; ostaje usko, samo malo šire da se lakše pogodi uz ivicu. */
  width: 30px;
  margin: 0;
  border-radius: 0 10px 10px 0;
}

.app-shell.sidebar-collapsed .sidebar-collapse svg {
  transform: rotate(-90deg);
}

/*
 * Kada menija nema, sadržaj se centrira. Bez ovoga bi ostao prilepljen uz
 * desnu stranu, kao da meni i dalje zauzima mesto — što je i bila primedba.
 */
/*
 * Okvir strane je bio sužen za tačno onoliko koliko je meni zauzimao. Kada
 * menija nema, uzima celu širinu — inače bi i gornja bela traka ostala uvučena
 * i sa obe strane bi virila siva pozadina.
 */
.app-shell.sidebar-collapsed > .page-shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.app-shell.sidebar-collapsed .page-content,
.app-shell.sidebar-collapsed .module-workspace-content {
  margin-inline: auto;
}

.app-shell.sidebar-collapsed .page-content,
.app-shell.sidebar-collapsed .module-workspace-content {
  width: 100%;
  max-width: 1480px;
  padding-inline: clamp(24px, 4vw, 64px);
}

/*
 * Traka ostaje bela preko cele širine, ali se ono što je u njoj poravnava sa
 * sadržajem ispod — inače bi pretraga i dugmad visili 60px desnije od tabele.
 */
.app-shell.sidebar-collapsed .topbar {
  padding-inline: max(clamp(24px, 4vw, 64px), calc((100% - 1480px) / 2 + 64px));
}

/* Na telefonu meni ionako izlazi preko dugmeta ☰ — strelica tamo ne treba. */
@media (max-width: 900px) {
  .sidebar-collapse {
    display: none !important;
  }

  .app-shell.sidebar-collapsed > .sidebar {
    display: revert !important;
  }

  .app-shell.sidebar-collapsed .page-content,
  .app-shell.sidebar-collapsed .module-workspace-content,
  .app-shell.sidebar-collapsed .topbar {
    max-width: none;
    padding-inline: revert;
  }
}

/* ==================================================================
   3. FILTER — ISTI IZGLED SVUDA
   ================================================================== */

/*
 * Izgled je već zajednički od v6.8. Ovde se sklanjaju ostaci starih,
 * pojedinačnih rešenja koja su se u nekim modulima i dalje probijala.
 */
.module-filter-disclosure > summary > span {
  font-weight: 700;
}

/* Stari red filtera u Projektima ne sme da ostane vidljiv nigde. */
.filter-bar.project-search-bar {
  display: none;
}

/* Polja u panelu izgledaju isto bez obzira na modul koji ih je doneo. */
.module-filter-panel .filter-search > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--line, #dfe9ef);
  border-radius: 10px;
  background: #fff;
}

.module-filter-panel .filter-search input {
  border: 0;
  background: transparent;
  padding-inline: 0;
}

.module-filter-panel .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.module-filter-panel label > span:first-child {
  font-size: 13px;
  font-weight: 700;
  color: #4a6178;
}

/* ==================================================================
   4. LIDOVI
   ================================================================== */

/* --- meni reda: izmešten izvan tabele, uredna dugmad --- */

/*
 * Kada meni izađe iz okvira tabele, njegov položaj postavlja JS. CSS ovde
 * određuje samo kako izgleda.
 */
.lead-actions-menu > div {
  padding: 6px;
  border: 1px solid var(--line, #dfe9ef);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 44px rgba(9, 45, 68, .18);
}

.lead-actions-menu > div a,
.lead-actions-menu > div button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink, #0b334d);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.lead-actions-menu > div a:hover,
.lead-actions-menu > div button:hover {
  background: #eef6fb;
}

.lead-actions-menu > div svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: #6c8598;
}

.lead-actions-menu > div form {
  margin: 0;
}

/* Brisanje je jedina radnja koja se razlikuje bojom. */
.lead-actions-menu > div form button {
  color: var(--danger, #b42318);
}

.lead-actions-menu > div form button svg {
  color: currentColor;
}

.lead-actions-menu > div form button:hover {
  background: #fdeef0;
}

/* --- kolona sa radnjama uvek pri ruci --- */

/*
 * Sa sedamnaest kolona tabela je šira od ekrana, a kolona sa tri tačkice je
 * poslednja — do nje se dolazilo tek pošto se cela tabela odvuče udesno. Sada
 * stoji zalepljena uz desnu ivicu i vidi se bez obzira dokle je tabela
 * odvučena.
 */
.leads-table th.col-actions,
.leads-table td.col-actions {
  position: sticky;
  inset-inline-end: 0;
  z-index: 3;
  background: #fff;
}

.leads-table thead th.col-actions {
  z-index: 4;
  background: #f4f9fc;
}

/* Tanka senka kaže da se ispod nje krije još tabele. */
.leads-table th.col-actions::before,
.leads-table td.col-actions::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 10px;
  transform: translateX(-100%);
  background: linear-gradient(to left, rgba(9, 45, 68, .08), transparent);
  pointer-events: none;
}

.leads-table tbody tr:hover td.col-actions {
  background: #f8fcfe;
}

/* --- panel sa kolonama --- */

/*
 * Ranije se prikazivala i izvorna kockica pregledača i naša, pa je spisak
 * izgledao kao niz ogromnih kvadrata. Sada je uredan spisak normalnog teksta.
 */
.leads-columns-panel {
  min-width: min(560px, 92vw);
}

.leads-columns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2px 10px;
  max-height: 340px;
  overflow-y: auto;
}

.leads-column-toggle.check-filter {
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  white-space: normal;
}

.leads-column-toggle.check-filter:hover {
  background: #f2f8fc;
}

.leads-column-toggle .custom-check {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border-width: 1.5px;
  border-radius: 5px;
}

.leads-column-toggle .custom-check::after {
  width: 4px;
  height: 8px;
}

.leads-column-toggle.is-locked {
  opacity: .5;
  cursor: default;
}

.leads-columns-note {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line, #dfe9ef);
  color: var(--muted, #6c8598);
  font-size: 12px;
}

/* --- unos leada: vazduh između polja --- */

.lead-modal-card {
  width: min(880px, 100%);
}

/*
 * Prozor sam nema unutrašnji razmak — daju ga naslov i obrazac, svako za sebe.
 * Obrazac za lead ga nije imao, pa su polja išla do same ivice prozora.
 */
.lead-form {
  padding: 0 25px 25px;
}

.lead-form-grid {
  gap: 20px 22px;
  padding-block: 6px;
}

.lead-form-grid label {
  gap: 8px;
}

.lead-form-grid .field-hint {
  margin-top: 2px;
  line-height: 1.5;
}

.lead-form-checks {
  gap: 14px 30px;
  margin-block: 4px;
  padding: 18px 20px;
}

.lead-form .form-actions {
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line, #dfe9ef);
}

/* ==================================================================
   5. IZBOR WIDGETA — DOVRŠENO
   ================================================================== */

/*
 * Ostalo je nedovršeno iz v6.8: pregled je ostajao prazan jer je kopija
 * uzimala sadržaj čiji je omotač i dalje bio sakriven, spisak je sekao opis,
 * maketa je bila sićušna usred ogromne prazne pozornice, a strelice su stajale
 * preblizu ivici.
 */

/* Kopija u traci mora da bude vidljiva, bez obzira na stanje kalupa. */
.wps-slide .wps-shot {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.wps-slide .wp-frame {
  max-width: 100%;
}

/* --- spisak levo --- */

/*
 * Redovi spiska su bili zaglavljeni na 74px pa se opis sekao na pola reda.
 * Uzrok nije bio tekst nego to što je stavka <button> UNUTAR mreže: pregledač
 * takvom dugmetu ne računa visinu sadržaja kada se red meri sa `auto`, pa je
 * red ostajao na najmanjoj dozvoljenoj visini. `max-content` meri stvarni
 * sadržaj, i tek tada red raste onoliko koliko tekstu treba.
 */
.widget-picker-sheet .wps-list {
  grid-auto-rows: max-content;
  max-height: none;
  padding-inline-end: 10px;
}

.widget-picker-sheet .wps-list-item {
  min-height: 0;
  align-items: center;
  padding: 14px 16px;
}

.widget-picker-sheet .wps-list-copy small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

/* --- pozornica desno --- */

/* Strelice odmaknute od ivice pozornice. */
.wps-stage {
  gap: 14px;
}

.wps-deck {
  padding: 8px;
}

/*
 * Maketa se crta u pravoj veličini widgeta na radnom prostoru — oko 110px
 * široko. Usred pozornice od 680px to je izgledalo kao greška, kao da pregled
 * nije ni učitan. Uvećava se kao celina, da odnosi unutar makete ostanu tačni.
 */
.wps-slide .wps-shot {
  transform: scale(2.2);
  transform-origin: center center;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}

.wps-slide:not(.active) .wps-shot {
  transform: scale(1.9);
}

/*
 * Uvećava se cela maketa, pa bi i natpis iznad nje porastao na 26px i potukao
 * sam pregled. Zato se natpisu unapred smanjuje slovo — posle uvećanja se
 * vraća na uobičajenih ~12px.
 */
.wps-slide .wps-shot-title {
  font-size: 5.5px;
  letter-spacing: .05em;
  gap: 4px;
}

.wps-slide .wps-shot-icon .app-icon {
  width: 8px;
  height: 8px;
}

/* Tačkice odvojene od pregleda i od podnožja. */
.wps-dots {
  padding-block: 6px;
}

@media (max-width: 900px) {
  /* Na telefonu je pozornica niža, pa uvećanje mora da bude blaže. */
  .wps-slide .wps-shot {
    transform: scale(1.5);
  }

  .wps-slide:not(.active) .wps-shot {
    transform: scale(1.35);
  }
}

/* ==================================================================
   6. ADMINISTRACIJA — DELOVI LEVO, SADRŽAJ DESNO
   ================================================================== */

.admin-layout {
  display: grid;
  grid-template-columns: minmax(230px, 268px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.admin-nav {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line, #dfe9ef);
  border-radius: 18px;
  background: #fff;
}

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink, #0b334d);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background .14s ease;
}

.admin-nav-item:hover {
  background: #f2f8fc;
}

.admin-nav-item.active {
  background: linear-gradient(135deg, #0b334d, #10506f);
  color: #fff;
}

.admin-nav-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eef6fb;
  color: var(--blue-dark, #10506f);
}

.admin-nav-item.active .admin-nav-icon {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.admin-nav-icon svg {
  width: 18px;
  height: 18px;
}

.admin-nav-copy {
  min-width: 0;
}

.admin-nav-copy strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

.admin-nav-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted, #6c8598);
  font-size: 11.5px;
  line-height: 1.4;
}

.admin-nav-item.active .admin-nav-copy small {
  color: rgba(232, 245, 250, .78);
}

.admin-content {
  min-width: 0;
  display: grid;
  gap: 20px;
}

.admin-section {
  display: grid;
  gap: 20px;
}

.admin-section[hidden] {
  display: none !important;
}

/*
 * Blokova sa brojevima ima pet; podrazumevani raspored ih je lomio na četiri
 * pa jedan, sa velikom prazninom u drugom redu. Ovde staju u jedan red.
 */
@media (min-width: 1200px) {
  .admin-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .admin-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-nav {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .admin-nav-copy small {
    display: none;
  }
}

/* --- deo „Sistem“: verzija i rezervna kopija --- */

/*
 * Ovaj deo je u v6.8 dobio svoj HTML, ali nikada oblik — naslovi, spiskovi i
 * dva obrasca stajali su goli, jedan preko drugog. Sada su to dve kartice.
 */

.admin-system-release {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #cfe6f3;
  border-radius: 16px;
  background: #f4fbfe;
}

.admin-system-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #fff;
  color: var(--blue-dark, #10506f);
}

.admin-system-icon svg {
  width: 21px;
  height: 21px;
}

.admin-system-release small {
  display: block;
  color: var(--muted, #6c8598);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
}

.admin-system-release strong {
  display: block;
  margin-top: 2px;
  color: var(--navy, #0b334d);
  font-size: 17px;
}

.admin-system-release p {
  margin: 4px 0 0;
  color: var(--muted, #6c8598);
  font-size: 13px;
  line-height: 1.5;
}

.admin-system-backups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.admin-system-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--line, #dfe9ef);
  border-radius: 18px;
  background: #fff;
}

.admin-system-card.recommended {
  border-color: #9fd7ef;
  box-shadow: 0 10px 28px rgba(11, 51, 77, .08);
}

.backup-badge {
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--blue-soft, #e8f4fa);
  color: var(--blue-dark, #10506f);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
}

.admin-system-card h3 {
  margin: 0;
  color: var(--navy, #0b334d);
  font-size: 17px;
}

.admin-system-card > p {
  margin: 0;
  color: var(--muted, #6c8598);
  font-size: 13px;
  line-height: 1.55;
}

.admin-system-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-system-card li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  color: var(--ink, #0b334d);
  font-size: 13px;
}

.admin-system-card li span {
  color: var(--ui-blue, #00a1d5);
  font-weight: 800;
}

.backup-download-form {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #dfe9ef);
}

.backup-download-form label {
  display: grid;
  gap: 5px;
  color: var(--muted, #6c8598);
  font-size: 12px;
  font-weight: 700;
}

.backup-note {
  color: var(--muted, #6c8598);
  font-size: 12px;
}

.admin-system-note {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 13px 16px;
  border-radius: 14px;
  background: #fff8e8;
  color: #8a6415;
  font-size: 12.5px;
  line-height: 1.5;
}

.admin-system-note svg {
  width: 18px;
  height: 18px;
}

/* ==================================================================
   7. TRAKA RADNJI — OBJAŠNJENJE NA LICU MESTA
   ================================================================== */

.settings-actionbar-explainer {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 18px 20px;
  border: 1px solid #cfe6f3;
  border-radius: 16px;
  background: #f4fbfe;
}

.settings-actionbar-example {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.sae-button {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line, #dfe9ef);
  border-radius: 10px;
  background: #fff;
  color: var(--ink, #0b334d);
  font-size: 13px;
  font-weight: 700;
}

.sae-button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #00a1d5, #147cac);
  color: #fff;
}

.sae-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px dashed #9fc4d8;
  border-radius: 10px;
  color: #4a6178;
  font-size: 13px;
  font-weight: 700;
}

.sae-more svg {
  width: 14px;
  height: 14px;
}

.settings-actionbar-explainer p {
  margin: 0;
  color: #40607a;
  font-size: 13.5px;
  line-height: 1.6;
}

.settings-actionbar-note {
  color: var(--muted, #6c8598) !important;
  font-size: 12.5px !important;
}

/* ===== v7.1.css ===== */
/* ==================================================================
   TEHNODENT OFFICE — SLOJ v7.1
   ==================================================================

   Sedamnaest dorada po primedbama sa v7.0. Sloj se učitava kao zaseban
   <link>, ODMAH POSLE v7.0 i PRE v6.7 — v6.7 mora da ostane poslednji, jer
   gasi `backdrop-filter` na dodirnim ekranima i to pravilo mora da pobedi.

   Sadržaj:
     1.  Razmaci — pravilo za ceo sistem
     2.  Paneli filtera i kolona — široki i vodoravni
     3.  Bočni meni — uočljivija strelica
     4.  Lidovi — meni, kolone, izvoz
     5.  Administracija kao modul
     6.  Servis — prazan deo menija, QR nalepnica, email raspored
     7.  Izbor widgeta — nova stranica
     8.  Pozdrav i konfete
   ================================================================== */

/* ==================================================================
   1. RAZMACI — PRAVILO ZA CEO SISTEM
   ================================================================== */

/*
 * Umesto da se razmak popravlja stranicu po stranicu (a tako je išlo od
 * v6.6), ovde se postavlja podrazumevano: svaki blok ima vazduh oko sebe i
 * između redova. Pojedinačni delovi koji hoće drugačije i dalje mogu da ga
 * promene — ovo su najslabija moguća pravila, bez `!important`.
 */

:root {
  --blok-razmak: 20px;
  --blok-razmak-mali: 14px;
  --blok-padding: 22px;
}

.panel,
.card,
.info-card,
.detail-card,
.stat-card,
.summary-card {
  padding: var(--blok-padding);
}

/*
 * Blok koji sadrži više redova teksta jedan ispod drugog: naslov, opis,
 * vrednost. Bez ovoga se sve lepi jedno uz drugo, što je i bila primedba.
 */
.panel > * + *,
.info-card > * + *,
.detail-card > * + * {
  margin-top: var(--blok-razmak-mali);
}

.panel > .panel-heading + * {
  margin-top: var(--blok-razmak);
}

.panel p,
.info-card p,
.detail-card p {
  line-height: 1.6;
}

.panel h2,
.panel h3,
.info-card h3,
.detail-card h3 {
  line-height: 1.35;
}

/* Spisak vrednosti „naziv → podatak" dobija vazduh između redova. */
.detail-grid,
.info-grid,
.data-grid {
  gap: var(--blok-razmak);
}

/* ==================================================================
   2. PANELI FILTERA I KOLONA — ŠIROKI I VODORAVNI
   ================================================================== */

/*
 * Panel je bio uzak (420px), pa se petnaest polja slagalo u dve kolone i
 * bežalo ispod ivice ekrana. Sada je širok koliko treba i polja idu u
 * onoliko kolona koliko stane — panel raste u stranu, ne nadole.
 */
.module-filter-panel {
  min-width: min(1060px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  max-height: min(72vh, 660px);
  padding: 22px 24px;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Panel sa malo polja ne mora da bude širok preko cele stranice. */
.module-filter-panel:has(form > label:nth-child(4):last-child),
.module-filter-panel:has(form > label:nth-child(3):last-of-type) {
  min-width: min(680px, calc(100vw - 48px));
}

.module-filter-panel > form,
.module-filter-panel .module-filter-form {
  /* v4.7 je obrascu davao svoju širinu, razmak i okvir — ovde je panel taj koji ih nosi. */
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 16px 18px;
  align-items: start;
}

.module-filter-panel label {
  gap: 7px;
  font-size: 12px;
  letter-spacing: .02em;
}

.module-filter-panel input,
.module-filter-panel select {
  min-height: 44px;
}

/*
 * Pretraga na Projektima je bila u `.search-box` sa svojom širinom, pa je
 * ulazila u susedno polje. Sada se ponaša kao i sva ostala polja.
 */
.module-filter-panel .search-box {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.module-filter-panel .search-box input {
  width: 100%;
  padding-inline-start: 42px;
}

.module-filter-panel .search-box > span {
  position: absolute;
  top: 50%;
  inset-inline-start: 14px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: var(--muted, #6c8598);
  pointer-events: none;
}

.module-filter-panel .search-box svg {
  width: 18px;
  height: 18px;
}

/* Dugmad ostaju na dnu panela, preko cele širine i odvojena linijom. */
.module-filter-panel .module-filter-actions {
  position: sticky;
  bottom: -22px;
  margin-top: 4px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line, #dfe9ef);
  background: #fff;
}

/* --- panel sa kolonama (Lidovi) --- */

/*
 * Bio je jedan uzak stubac sa svojim klizačem i pola panela prazno. Sada su
 * kockice u tri stupca i sve staje bez skrolovanja.
 */
.leads-columns-panel {
  min-width: min(720px, calc(100vw - 48px));
  max-height: none;
  overflow: visible;
}

.leads-columns-panel > form {
  display: block;
}

.leads-columns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 4px 18px;
  max-height: none;
  overflow: visible;
}

/*
 * v6.8 daje svakoj kockici (`check-filter`) celu širinu reda, jer u filteru
 * kockica obično i stoji sama. Ovde ih ima sedamnaest, pa svaka uzima svoje
 * mesto u mreži.
 */
.leads-columns-grid .check-filter {
  grid-column: auto;
}

.leads-columns-panel .leads-column-toggle {
  min-height: 0;
  padding: 7px 8px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.3;
  transition: background .12s ease;
}

.leads-columns-panel .leads-column-toggle:hover {
  background: #f2f8fc;
}

.leads-columns-panel .custom-check {
  width: 16px;
  height: 16px;
  border-radius: 5px;
}

.leads-columns-note {
  margin-top: 14px;
}

/* ==================================================================
   3. BOČNI MENI — UOČLJIVIJA STRELICA
   ================================================================== */

/*
 * Strelica je radila kako treba, ali je bila jedva vidljiva: poluprovidna,
 * bela na beloj pozadini. Sada je u bojama sistema i ima svoju senku, a i
 * dalje je mala i uz samu ivicu.
 */
.sidebar-collapse {
  width: 30px;
  height: 54px;
  border: 0;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(135deg, #0b334d, #10506f);
  color: #fff;
  opacity: 1;
  box-shadow: 0 6px 18px rgba(9, 45, 68, .28);
}

.sidebar-collapse:hover,
.sidebar-collapse:focus-visible {
  background: linear-gradient(135deg, #10506f, var(--ui-blue, #00a1d5));
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 161, 213, .4);
}

.sidebar-collapse svg {
  width: 17px;
  height: 17px;
}

.app-shell.sidebar-collapsed .sidebar-collapse {
  width: 34px;
  /* Kada menija nema, strelica je jedini put nazad — pa blago pulsira dok je miš ne dotakne. */
  animation: sidebar-arrow-pulse 2.6s ease-in-out 1.2s 3;
}

@keyframes sidebar-arrow-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(9, 45, 68, .28); }
  50% { box-shadow: 0 6px 22px rgba(0, 161, 213, .55); }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.sidebar-collapsed .sidebar-collapse {
    animation: none;
  }
}

/* Servisni filter ima svoje nazive klasa — isti panel, isti raspored. */
.module-filter-panel .service-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 16px 18px;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.module-filter-panel .service-filter-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.module-filter-panel .service-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #dfe9ef);
}

/* ==================================================================
   4. LIDOVI — MENI, KOLONA SA RADNJAMA, IZVOZ
   ================================================================== */

/*
 * Kolona sa tri tačkice je od v7.0 zalepljena za desnu ivicu, ali je imala
 * svoju senku koja je preko zaglavlja izgledala kao šav u tabeli. Sada je
 * prelaz mekan i ide u boji reda, pa se ne vidi kao linija.
 */
.leads-table th.col-actions::before,
.leads-table td.col-actions::before {
  width: 18px;
  background: linear-gradient(to left, rgba(9, 45, 68, .05), transparent);
}

.leads-table thead th.col-actions::before {
  background: linear-gradient(to left, rgba(9, 45, 68, .04), transparent);
}

/* Poslednja kolona prati boju zaglavlja, da se šav ne vidi ni tu. */
.leads-table thead th.col-actions {
  background: #f4f9fc;
}

/* --- dugmad u meniju leada --- */

/*
 * „Izvezi u Excel" dobija zelenu pri prelasku mišem — ista zelena kojom
 * sistem svuda označava gotovo i uspešno. „Izvezi ZIP" ide uz njega.
 */
.lead-actions-menu .lead-action-excel:hover,
.lead-actions-menu .lead-action-excel:focus-visible {
  background: #e8f7ee;
  color: #1a7f43;
}

.lead-actions-menu .lead-action-excel:hover svg,
.lead-actions-menu .lead-action-excel:focus-visible svg {
  color: #1a7f43;
}

.lead-actions-menu .lead-action-zip:hover,
.lead-actions-menu .lead-action-zip:focus-visible {
  background: #eef4fb;
  color: var(--blue-dark, #10506f);
}

.lead-actions-menu > div {
  padding: 6px;
}

.lead-actions-menu > div > a,
.lead-actions-menu > div button {
  border-radius: 9px;
}

/* ==================================================================
   8. PROSLAVA I POZDRAV
   ================================================================== */

/*
 * Platno sa konfetama stoji preko svega, ali ne prima nijedan klik — sistem
 * ispod radi normalno i dok efekat traje.
 */
.confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}

/*
 * Mali znak da je nešto završeno: red koji se otkači blago pulsira zeleno.
 * Ovo radi i kada su animacije isključene — boja nije pokret.
 */
@keyframes done-flash {
  0% { background-color: rgba(47, 191, 113, .22); }
  100% { background-color: transparent; }
}

.is-just-done {
  animation: done-flash 1.1s ease-out both;
}

/* --- pozdrav pri prvoj prijavi u toku dana --- */

.daily-greeting {
  position: fixed;
  inset: 0;
  z-index: 880;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 45, 68, .55);
  animation: greeting-fade .2s ease both;
}

.daily-greeting.is-closing {
  animation: greeting-fade .18s ease both reverse;
}

@keyframes greeting-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.daily-greeting-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(460px, 100%);
  padding: 34px 32px 30px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(9, 45, 68, .3);
  text-align: center;
  animation: greeting-rise .28s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes greeting-rise {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to { opacity: 1; transform: none; }
}

.daily-greeting-sun {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ui-blue, #00a1d5), #2fbf71);
  color: #fff;
}

.daily-greeting-sun svg {
  width: 28px;
  height: 28px;
}

.daily-greeting-card h2 {
  margin: 0;
  color: var(--navy, #0b334d);
  font-size: 25px;
  line-height: 1.25;
}

.daily-greeting-card > p {
  margin: 0;
  max-width: 34ch;
  color: var(--muted, #6c8598);
  font-size: 14.5px;
  line-height: 1.6;
}

.daily-greeting-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 16px 12px;
  border-radius: 16px;
  background: #f4fbfe;
}

.daily-greeting-stats span {
  display: grid;
  gap: 3px;
}

.daily-greeting-stats strong {
  color: var(--blue-dark, #10506f);
  font-size: 24px;
  line-height: 1;
}

.daily-greeting-stats small {
  color: var(--muted, #6c8598);
  font-size: 11.5px;
  line-height: 1.35;
}

.daily-greeting-go {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
}

.daily-greeting-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #6c8598);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.daily-greeting-close:hover {
  background: #eef4f8;
  color: var(--navy, #0b334d);
}

@media (max-width: 480px) {
  .daily-greeting-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px 8px;
  }

  .daily-greeting-stats strong {
    font-size: 20px;
  }
}

/* ==================================================================
   6. SERVIS I PODSETNICI
   ================================================================== */

/* --- email raspored: primaoci kao ikonice --- */

.reminder-recipient-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.reminder-recipient-chip {
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: default;
  transition: transform .14s ease, box-shadow .14s ease;
}

.reminder-recipient-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(9, 45, 68, .18);
}

.reminder-recipient-chip .avatar,
.reminder-recipient-chip img {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.reminder-recipient-note {
  margin: 12px 0 0;
  color: var(--muted, #6c8598);
  font-size: 12px;
}

.reminder-recipient-empty {
  color: var(--muted, #6c8598);
  font-size: 13px;
}

/*
 * Blok „Email raspored" je time postao dvostruko niži, pa termini i primaoci
 * stanu jedno uz drugo umesto jedno ispod drugog.
 */
.reminder-offset-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- QR nalepnica: jedna cela nalepnica na jednoj strani --- */

/*
 * Nalepnica se štampala na DVE strane: sam sadržaj je bio visok 96px, ali je
 * `<html>` u štampi zadržavao visinu prozora (950px) — a to je više od jedne
 * strane papira, pa je pregledač dodavao praznu drugu stranu.
 *
 * Ovde se, dok se štampa nalepnica, i `<html>` i `<body>` skupljaju na
 * stvarnu visinu sadržaja.
 */
@media print {
  html:has(body.printing-label),
  html:has(body.printing-label) body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.printing-label .asset-label {
    /* Nalepnica je jedna celina — nikada se ne lomi između dve strane. */
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-before: avoid;
    break-before: avoid;
    page-break-after: avoid;
    break-after: avoid;
    margin: 0 !important;
    transform: none !important;
  }

  /* Iza nalepnice ne sme da ostane nijedan prazan element koji bi otvorio novu stranu. */
  body.printing-label .modal.open .modal-card > *:not([data-asset-label]):not(.asset-label) {
    display: none !important;
  }

  /*
   * Omotači prozora nestaju kao KUTIJE, ali im sadržaj ostaje (`contents`).
   * Bez ovoga je okvir kartice dodavao po jedan piksel iznad i ispod
   * nalepnice — taman toliko da sadržaj pređe visinu strane i otvori drugu.
   */
  body.printing-label .modal.open,
  body.printing-label .modal.open .modal-card {
    display: contents !important;
  }
}

/*
 * v5.9 je postavio `@page { size: 51mm 25mm }` — ali `@page` ne može da se
 * ograniči na jednu stranicu, pa je ta mera važila za SVAKU štampu u sistemu,
 * uključujući i izveštaje. Ovde se vraća normalan papir; meru nalepnice
 * postavlja sam prikaz nalepnice, dok traje štampanje.
 */
@page {
  size: auto;
  margin: 10mm;
}

/* ==================================================================
   5. ADMINISTRACIJA KAO MODUL
   ================================================================== */

/*
 * Spisak delova je prešao u bočni meni modula, pa sadržaj ide preko cele
 * širine. Ostaje samo traka sa delovima, i to na uskim ekranima, gde je
 * bočni meni sklonjen iza dugmeta ☰.
 */
.admin-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.admin-tabs {
  display: none;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid var(--line, #dfe9ef);
  border-radius: 999px;
  background: #fff;
  color: var(--ink, #0b334d);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.admin-tab svg {
  width: 16px;
  height: 16px;
}

.admin-tab.active {
  border-color: transparent;
  background: linear-gradient(135deg, #0b334d, #10506f);
  color: #fff;
}

@media (max-width: 1000px) {
  .admin-tabs {
    display: flex;
  }
}

/* Zaglavlje Administracije izgleda kao zaglavlje svakog drugog modula. */
.office-admin-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.office-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Dugme koje otvara ostatak spiska u blokovima Administracije. */
.admin-more-button {
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border: 1px dashed var(--line, #dfe9ef);
  border-radius: 12px;
  background: transparent;
  color: var(--blue-dark, #10506f);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}

.admin-more-button:hover {
  border-color: var(--ui-blue, #00a1d5);
  background: #f2f9fd;
}

/* ==================================================================
   7. IZBOR WIDGETA — NOVA STRANICA
   ==================================================================

   Primedba je bila kratka i jasna: „pozadina je sranje, odabir je sranje".
   Zato se ovde ne krpi ništa iz v6.8/v7.0 nego se ceo prikaz postavlja
   iznova: pozadina, spisak, pozornica, izbor veličine i podnožje.
   ================================================================== */

/* --- pozadina --- */

/*
 * Umesto ravne tamnoplave površine, pozadina ima dubinu: tri mekana kruga
 * boje (plava, tirkizna, ljubičasta) preko tamne osnove. Krugovi se ne
 * pomeraju i ne troše ništa — to su obični gradijenti.
 */
.widget-picker-sheet {
  background:
    radial-gradient(60% 55% at 12% 8%, rgba(0, 161, 213, .30), transparent 70%),
    radial-gradient(55% 50% at 88% 12%, rgba(47, 191, 113, .20), transparent 70%),
    radial-gradient(70% 60% at 70% 95%, rgba(142, 125, 255, .22), transparent 72%),
    linear-gradient(165deg, #07263a, #0b334d 45%, #071f30);
  padding: 28px clamp(18px, 4vw, 54px) 30px;
}

/* Tanka mreža preko pozadine — jedva vidljiva, ali daje osećaj radne površine. */
.widget-picker-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(75% 65% at 50% 40%, #000, transparent 75%);
  pointer-events: none;
}

.widget-picker-sheet > * {
  position: relative;
  z-index: 1;
}

/* --- zaglavlje --- */

.wps-head {
  align-items: center;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto 6px;
}

.wps-head h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.01em;
}

.wps-head p {
  max-width: 52ch;
  color: rgba(232, 245, 250, .72);
}

.wps-close {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
  transition: background .16s ease, transform .16s ease;
}

.wps-close:hover {
  background: rgba(255, 255, 255, .22);
  transform: rotate(90deg);
}

/* --- raspored --- */

.widget-picker-sheet .wps-layout {
  width: min(1240px, 100%);
  margin: 0 auto;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 26px;
}

/* --- spisak levo --- */

.widget-picker-sheet .wps-list {
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(10px);
}

.widget-picker-sheet .wps-list-item {
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.widget-picker-sheet .wps-list-item:hover {
  background: rgba(255, 255, 255, .1);
  transform: translateX(2px);
}

.widget-picker-sheet .wps-list-item.active {
  border-color: rgba(255, 255, 255, .55);
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  transform: none;
}

.widget-picker-sheet .wps-list-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .12);
}

.widget-picker-sheet .wps-list-item.active .wps-list-icon {
  background: linear-gradient(135deg, var(--ui-blue, #00a1d5), #10506f);
  color: #fff;
}

.widget-picker-sheet .wps-list-check {
  border-color: rgba(255, 255, 255, .28);
}

/* --- pozornica: widget stoji na maketi radne površine --- */

.wps-deck {
  position: relative;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255, 255, 255, .14), transparent 68%),
    linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 24px 60px rgba(0, 0, 0, .3);
  overflow: hidden;
}

/* Mreža radnog prostora ispod widgeta — pokazuje na šta se widget spušta. */
.wps-deck::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 78%);
  pointer-events: none;
}

.wps-slide {
  position: relative;
  z-index: 1;
}

/* Maketa dobija pravu senku, da izgleda kao da stvarno leži na površini. */
.wps-slide .wp-frame {
  box-shadow: 0 18px 36px rgba(0, 0, 0, .28);
}

.wps-slide .wps-shot-title {
  color: rgba(232, 245, 250, .9);
}

.wps-arrow {
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px);
}

/* --- izbor veličine: dugmad sa nazivom umesto nemih tačkica --- */

.wps-dots {
  gap: 10px;
  flex-wrap: wrap;
}

/*
 * Selektor je namerno `.wps-dots .wps-dot`: v5.4 je tačkicama dao meru preko
 * `.wps-dots button`, što je specifičnije od pukog `.wps-dot` — bez ovoga bi
 * dugmad ostala visoka 9 piksela, sa natpisom koji iz njih curi.
 */
.wps-dots .wps-dot {
  width: auto;
  height: auto;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(232, 245, 250, .86);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.wps-dots .wps-dot:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.wps-dots .wps-dot.active {
  width: auto;
  height: auto;
  border-color: transparent;
  background: linear-gradient(135deg, var(--ui-blue, #00a1d5), #2fbf71);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 161, 213, .35);
}

/* --- podnožje: naziv, opis i dugme, bez bele kutije --- */

.widget-picker-sheet .wps-view-foot {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "meta dugme"
    "velicina dugme";
  align-items: center;
  gap: 4px 20px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(10px);
}

.widget-picker-sheet .wps-view-meta strong {
  color: #fff;
  font-size: 19px;
}

.widget-picker-sheet .wps-view-meta small {
  color: rgba(232, 245, 250, .72);
}

.widget-picker-sheet .wps-size-caption {
  grid-area: velicina;
  justify-items: start;
  text-align: start;
  padding: 0;
  background: transparent;
}

.widget-picker-sheet .wps-size-caption b {
  color: #fff;
  font-size: 13px;
}

.widget-picker-sheet .wps-size-caption small {
  color: rgba(232, 245, 250, .6);
}

.widget-picker-sheet .wps-add {
  grid-area: dugme;
}

.wps-add-button {
  min-height: 54px;
  padding-inline: 26px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--ui-blue, #00a1d5), #2fbf71);
  box-shadow: 0 16px 34px rgba(0, 161, 213, .34);
  font-size: 15px;
}

.wps-add-button:hover {
  filter: brightness(1.06);
}

@media (max-width: 900px) {
  .widget-picker-sheet .wps-view-foot {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "meta"
      "velicina"
      "dugme";
    gap: 12px;
  }

  .widget-picker-sheet .wps-add,
  .wps-add-button {
    width: 100%;
  }
}

/*
 * Maketa mora da ima OBLIK veličine koju predstavlja: „Traka" je široka i
 * niska, „Kolona" uska i visoka. Dotle je svaka bila iste širine, pa se iz
 * pregleda nije videlo šta se bira — samo je pisalo ispod.
 */
.wps-slide .wp-frame.size-sm {
  width: 148px;
  min-height: 118px;
}

.wps-slide .wp-frame.size-wide {
  width: 268px;
  min-height: 112px;
}

.wps-slide .wp-frame.size-tall {
  width: 132px;
  min-height: 176px;
}

.wps-slide .wp-frame.size-lg {
  width: 250px;
  min-height: 168px;
}

/* Uz šire makete, uvećanje se malo smanjuje da sve ostane unutar pozornice. */
.wps-slide .wps-shot {
  transform: scale(1.85);
}

.wps-slide:not(.active) .wps-shot {
  transform: scale(1.6);
}

/* Spisak levo ne sme da se seče na pola stavke. */
.widget-picker-sheet .wps-list {
  padding-bottom: 16px;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}

@media (max-width: 900px) {
  .wps-slide .wps-shot {
    transform: scale(1.3);
  }

  .wps-slide:not(.active) .wps-shot {
    transform: scale(1.15);
  }
}

/*
 * Traka ne sme da ima razmak između slajdova: pomeranje se računa u
 * procentima širine trake, pa bi svaki razmak pomerio pregled za po
 * dvadesetak piksela — do poslednje veličine maketa vidno pobegne udesno.
 * (Razmak dolazi iz v5.3, gde je ista klasa značila nešto drugo.)
 */
.wps-deck .wps-track {
  gap: 0;
}

/*
 * Na telefonu spisak ide iznad pregleda, a ne pored njega. Ovo pravilo mora
 * da postoji i ovde: raspored iz v6.8 je bio u istom `@media` bloku, ali ga
 * novi raspored iz ovog sloja nadjačava jer se učitava kasnije.
 */
@media (max-width: 900px) {
  .widget-picker-sheet {
    padding: 18px 14px 20px;
  }

  .widget-picker-sheet .wps-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 30%) minmax(0, 1fr);
    gap: 14px;
  }

  .widget-picker-sheet .wps-list {
    padding: 8px;
    border-radius: 18px;
  }

  .widget-picker-sheet .wps-list-item {
    padding: 10px 12px;
  }

  .wps-deck {
    border-radius: 20px;
  }

  .widget-picker-sheet .wps-view-foot {
    padding: 14px 16px;
  }

  .wps-add-button {
    min-height: 48px;
  }
}

/* ===== v7.2.css ===== */
/* ==================================================================
   TEHNODENT OFFICE — SLOJ v7.2
   ==================================================================

   Sloj se ucitava kao zaseban <link>, POSLE v7.1 i PRE v6.7.
   ================================================================== */

/* ==================================================================
   1. DUGME ZA FILTER — U ISTOM REDU SA OSTALIM ELEMENTIMA
   ================================================================== */

/*
 * Dugme je na pola modula stajalo samo u svom redu, iznad trake sa biračem
 * prikaza i dugmetom „Dodaj". Sada je u istoj traci; ovde se samo izjednačava
 * visina i poravnanje, da ništa ne „pleše" gore-dole.
 */
.asset-results-tools,
.reminder-toolbar-actions,
.auto-results-heading,
.archive-results-actions,
.overview-view-bar,
.overview-view-actions,
.leads-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/*
 * v4.7 je dugmetu dao 20px razmaka ispod, jer je tada stajalo samo u svom
 * redu. Sada je u traci sa ostalim elementima, pa bi ga taj razmak podigao za
 * deset piksela u odnosu na sve ostalo — upravo ono što se videlo kao „nije u
 * liniji".
 */
.module-filter-disclosure,
.service-filter-disclosure {
  align-self: center;
  margin-bottom: 0;
}

/* Svi elementi u traci su iste visine — 46px. */
.module-filter-button,
.listing-view-switch,
.view-switcher,
.asset-results-tools .button,
.reminder-toolbar-actions .button,
.archive-results-actions .button {
  min-height: 46px;
}

.listing-view-switch,
.view-switcher {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

/* Broj rezultata u traci ostaje levo, a dugmad idu na desni kraj. */
.auto-results-heading > span:first-child,
.reminder-toolbar > span:first-child {
  margin-inline-end: auto;
}

.auto-results-heading .module-filter-disclosure {
  order: 2;
}

/* ==================================================================
   2. EMAIL RASPORED — DVA JASNA REDA
   ================================================================== */

.reminder-schedule {
  display: grid;
  gap: 18px;
  margin-top: 4px;
}

.reminder-schedule-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line, #dfe9ef);
}

.reminder-schedule-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.reminder-schedule-label {
  padding-top: 8px;
  color: var(--muted, #6c8598);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.reminder-offset-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.reminder-offset-summary span {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--blue-soft, #e8f4fa);
  color: var(--blue-dark, #10506f);
  font-size: 12.5px;
  font-weight: 700;
}

.reminder-recipient-avatars {
  gap: 10px;
  margin: 0;
}

.reminder-recipient-note {
  margin-top: 18px;
  padding-top: 0;
}

@media (max-width: 620px) {
  .reminder-schedule-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .reminder-schedule-label {
    padding-top: 0;
  }
}

/* ==================================================================
   3. LIDOVI — PARTIJE KOD DOBIJENOG POSLA
   ================================================================== */

.lead-lots-box {
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid #cfe6f3;
  border-radius: 16px;
  background: #f4fbfe;
}

.lead-lots-box[hidden] {
  display: none;
}

.lead-lots-head strong {
  display: block;
  color: var(--navy, #0b334d);
  font-size: 15px;
}

.lead-lots-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted, #6c8598);
  font-size: 12.5px;
  line-height: 1.5;
}

.lead-lots-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 14px 18px;
}

.lead-lots-result {
  display: grid;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #dfeef7;
}

.lead-lots-result span {
  color: var(--muted, #6c8598);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lead-lots-result b {
  color: var(--blue-dark, #10506f);
  font-size: 18px;
}

/* --- krug sa prosečnom uspešnošću --- */

.leads-stats {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Selektor prati `.today-stats > a` iz app.css, inače njegov `gap` pobedi. */
.today-stats > a.leads-lots-stat,
.leads-lots-stat {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.leads-lots-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  /* Krug se puni do izračunatog procenta — isti prikaz kao garancija kod osnovnih sredstava. */
  background: conic-gradient(var(--ui-blue, #00a1d5) var(--lots-progress, 0%), #e7eef2 0);
}

.leads-lots-ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fff;
}

.leads-lots-ring b {
  position: relative;
  color: var(--navy, #0b334d);
  font-size: 16px;
  font-weight: 800;
}

.leads-lots-stat small {
  display: block;
  color: var(--muted, #6c8598);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
}

.leads-lots-stat p {
  margin: 4px 0 0;
  color: var(--muted, #6c8598);
  font-size: 12px;
  line-height: 1.4;
}

/* --- raspored kolona se slaže prevlačenjem --- */

.leads-table thead th[data-col-key] {
  position: relative;
  padding-inline-start: 22px;
  cursor: grab;
  user-select: none;
}

.leads-table thead th[data-col-key]:active {
  cursor: grabbing;
}

/* Šest tačkica levo od naziva — znak da se kolona može pomerati. */
.leads-table thead th[data-col-key] .col-grip {
  position: absolute;
  top: 50%;
  inset-inline-start: 6px;
  width: 10px;
  height: 14px;
  transform: translateY(-50%);
  opacity: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1.4px);
  background-size: 5px 5px;
  color: var(--muted, #6c8598);
  transition: opacity .14s ease;
}

.leads-table thead th[data-col-key]:hover .col-grip {
  opacity: .75;
}

.leads-table thead th.is-dragging {
  opacity: .45;
}

.leads-table thead th.is-drop-target {
  box-shadow: inset 3px 0 0 var(--ui-blue, #00a1d5);
  background: #eaf6fc;
}

/* ==================================================================
   4. SKRIPTE ZA PROJEKTE
   ================================================================== */

.admin-script-list {
  display: grid;
  gap: 12px;
}

.admin-script-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line, #dfe9ef);
  border-radius: 16px;
  background: #fff;
}

.admin-script-row.is-off {
  opacity: .62;
}

.admin-script-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #eef6fb;
  color: var(--blue-dark, #10506f);
}

.admin-script-icon svg {
  width: 21px;
  height: 21px;
}

.admin-script-copy strong {
  display: block;
  color: var(--navy, #0b334d);
  font-size: 15px;
}

.admin-script-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted, #6c8598);
  font-size: 12.5px;
  line-height: 1.5;
}

.admin-script-copy p {
  margin: 6px 0 0;
  color: var(--blue-dark, #10506f);
  font-size: 12px;
  font-weight: 700;
}

.admin-script-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-script-field select {
  font-weight: 700;
}

@media (max-width: 640px) {
  .admin-script-row {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .admin-script-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* ===== v7.3.css ===== */
/* ==================================================================
   Tehnodent Office v7.3 — sloj dorada.

   Ne uvozi nijedan raniji sloj: `bin/build-css.php` ih sve spaja u
   `assets/css/layers.css`, tačnim redom, a ovaj ide pred poslednjim (v6.7).
   ================================================================== */

/* ==================================================================
   1. HOVER NA DUGMETU ZA BRISANJE

   v5.7 je dugme za brisanje napravio mekim (bleda roze podloga, crveno
   slovo), ali mu je na hover davao PUNU crvenu sa belim slovom. Mala
   ikonica koja se sva zacrveni deluje kao da se nešto već desilo, a ne kao
   da je pokazivač samo prešao preko nje. Kantica kod skripti je bila jedina
   koja se tako ne ponaša, i baš ona izgleda kako treba.

   Sada hover samo POJAČA ono što već stoji: podloga malo tamnija, ivica
   jasnija, slovo ostaje crveno. Potvrda brisanja i dalje traži svoj „da" u
   posebnom prozoru — ništa se ne gubi na opreznosti.
   ================================================================== */
.button.danger:hover,
.button.danger:focus-visible {
    background: #ffe0e5;
    color: var(--danger);
    border-color: rgba(219, 61, 85, 0.55);
}

/* Pritisnuto dugme se utisne, umesto da ga `.button:hover` i dalje diže. */
.button.danger:active {
    background: #ffd2da;
    transform: translateY(0);
}

/* ==================================================================
   2. IKONICA TO DO

   Ista ikonica u celom sistemu: u meniju, na dugmetu „Dodaj u To Do" u
   zadatku i na brzoj radnji u spisku zadataka projekta. Brza radnja je do
   sada bila goli tekst „+ To Do".
   ================================================================== */
.quick-action.todo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.quick-action.todo .app-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

/* ==================================================================
   3. PROZOR ZA SKRIPTU: OKVIR PO ZADATAK, KORACI U OKVIRU

   Do v7.2 je ovde stajalo jedno tekstualno polje u koje se kucalo
   „naziv (visok)" red po red. Sada je svaki zadatak svoj okvir, sa
   prioritetom iz padajuće liste i spiskom koraka ispod.
   ================================================================== */
.script-builder {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.script-builder-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.script-builder-head strong {
    font-size: 15px;
    color: var(--ink);
}

.script-builder-head small {
    color: var(--muted);
    font-size: 13px;
}

.script-task-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.script-task {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fbfdfe;
}

.script-task-head {
    display: grid;
    /* broj · naziv · prioritet · dugmad */
    grid-template-columns: 30px minmax(0, 1fr) 190px auto;
    align-items: center;
    gap: 10px;
}

/*
   Redni broj je i oznaka i orijentir: kada se okvir pomeri strelicom,
   broj se odmah promeni, pa se vidi da se nešto desilo.
*/
.script-task-number {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--blue-soft, #e6f4fa);
    color: var(--blue-dark, #0b334d);
    font-weight: 700;
    font-size: 14px;
    flex: none;
}

.script-task-title input,
.script-task-priority select,
.script-step-field input {
    width: 100%;
    margin: 0;
}

.script-task-move {
    display: flex;
    align-items: center;
    gap: 4px;
}

.script-task-action {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.script-task-action:hover:not(:disabled) {
    border-color: #9ccfdd;
    color: var(--blue-dark);
}

.script-task-action:disabled {
    opacity: 0.35;
    cursor: default;
}

.script-task-action.danger {
    color: var(--danger);
    border-color: rgba(219, 61, 85, 0.28);
    background: var(--danger-soft);
}

/* Isto pravilo kao kod ostalih dugmadi za brisanje: hover pojača, ne prelije. */
.script-task-action.danger:hover:not(:disabled) {
    background: #ffe0e5;
    border-color: rgba(219, 61, 85, 0.55);
    color: var(--danger);
}

.script-task-action .app-icon {
    width: 15px;
    height: 15px;
}

/* --- Koraci unutar zadatka --- */
.script-step-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Uvučeni su tačno za širinu kružića sa brojem, da se vidi da pripadaju zadatku. */
    padding-left: 40px;
}

.script-step {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
}

.script-step-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9ccfdd;
    justify-self: center;
}

.script-add-step {
    align-self: flex-start;
    margin-left: 40px;
    padding: 6px 12px;
    border: 1px dashed var(--line);
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.script-add-step:hover {
    border-color: #9ccfdd;
    color: var(--blue-dark);
}

.script-add-task {
    align-self: flex-start;
}

/* Na telefonu red od četiri stupca nema gde da stane — ide jedno ispod drugog. */
@media (max-width: 720px) {
    .script-task-head {
        grid-template-columns: 30px minmax(0, 1fr);
        grid-template-areas:
            "broj naziv"
            "prioritet prioritet"
            "dugmad dugmad";
        row-gap: 8px;
    }

    .script-task-number { grid-area: broj; }
    .script-task-title { grid-area: naziv; }
    .script-task-priority { grid-area: prioritet; }
    .script-task-move { grid-area: dugmad; justify-content: flex-end; }

    .script-step-list,
    .script-add-step {
        padding-left: 0;
        margin-left: 0;
    }
}

/* ===== v7.4.css ===== */
/* ==================================================================
   Tehnodent Office v7.4 — sloj dorada.

   Ne uvozi nijedan raniji sloj: `bin/build-css.php` ih spaja u
   `assets/css/layers.css`, tačnim redom; ovaj ide pred poslednjim (v6.7).
   ================================================================== */

/* ==================================================================
   1. LIDOVI: ŠIRINA KOLONA KAO U EXCELU

   Do sada je tabela sama birala širinu kolone po najdužem sadržaju, pa je
   jedan dugačak naziv komitenta razvlačio kolonu i cela stranica je bežala
   udesno. Sada svaka kolona ima zadatu širinu (stalan raspored tabele), a
   tekst koji ne stane se seče sa „…".
   ================================================================== */
.leads-table.is-sized {
    table-layout: fixed;
    /* Ukupnu širinu upisuje stranica i JS; ovo samo da je ne bude uže od panela. */
    min-width: 100%;
}

.leads-table.is-sized th[data-col-key],
.leads-table.is-sized td[data-col-key] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Zaglavlje nosi ručku uz desnu ivicu, pa mu treba mesto. */
.leads-table.is-sized thead th[data-col-key] {
    position: sticky;
    padding-right: 18px;
}

/* Oznake unutar ćelija (status, vrsta robe) se ne smeju razvući preko kolone. */
.leads-table.is-sized td[data-col-key] > span,
.leads-table.is-sized td[data-col-key] > a {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/*
   Ručka: uska traka uz desnu ivicu zaglavlja. Vidi se tek na prelaz mišem,
   a kursor „↔" kaže šta radi i pre nego što se pojavi.
*/
.leads-table .col-resize {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    touch-action: none;
    z-index: 3;
}

.leads-table .col-resize::after {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    right: 4px;
    width: 2px;
    border-radius: 2px;
    background: transparent;
    transition: background .15s ease;
}

.leads-table thead th:hover .col-resize::after {
    background: #b9d7e4;
}

.leads-table .col-resize:hover::after,
.leads-table.is-resizing .col-resize::after {
    background: var(--blue, #00a1d5);
}

/* Dok se menja širina, tekst se ne označava i kursor ostaje „↔" svuda. */
.leads-table.is-resizing,
.leads-table.is-resizing * {
    cursor: col-resize !important;
    user-select: none;
}

/* Kolona sa tri tačkice se ne seče — iz nje se otvara meni. */
.leads-table.is-sized .col-actions {
    overflow: visible;
}

/* ==================================================================
   2. KLIZAČ KOJI PRATI TABELU

   Plutajući vodoravni klizač na dnu ekrana, tačno ispod široke tabele, dok
   joj se dno ne vidi. JS ga postavlja i sklanja; ovde je samo izgled.
   ================================================================== */
.sticky-hscroll {
    position: fixed;
    bottom: 0;
    z-index: 60;
    height: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(255, 255, 255, .92);
    border-top: 1px solid var(--line, #dfe9ef);
    box-shadow: 0 -6px 18px rgba(9, 45, 68, .06);
    scrollbar-width: thin;
    scrollbar-color: #9cc3d6 transparent;
}

.sticky-hscroll[hidden] {
    display: none;
}

.sticky-hscroll-fill {
    height: 1px;
}

.sticky-hscroll::-webkit-scrollbar {
    height: 10px;
}

.sticky-hscroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #9cc3d6;
}

.sticky-hscroll::-webkit-scrollbar-thumb:hover {
    background: #6fa6c2;
}

/* Na telefonu se tabela ionako vuče prstom; plutajući klizač bi samo smetao. */
@media (hover: none) and (pointer: coarse) {
    .sticky-hscroll {
        display: none !important;
    }
}

/* ==================================================================
   3. ARHIVA DOKUMENATA

   Stranica je dosad bila samo izgled. Sada ima tri dela: stablo fascikli
   levo, pretragu gore i spisak dokumenata sa grupnim radnjama.
   ================================================================== */
.archive-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.archive-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.archive-main > .panel {
    margin: 0;
}

/* --- Stablo fascikli --- */
.archive-tree {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow: auto;
    padding: 14px 10px;
    margin: 0;
}

.archive-tree-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px 10px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 8px;
}

.archive-tree-head strong {
    color: var(--navy, #0b334d);
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.archive-tree-add {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--blue-dark, #0b334d);
    cursor: pointer;
}

.archive-tree-add:hover {
    border-color: #9ccfdd;
}

.archive-tree-add .app-icon {
    width: 15px;
    height: 15px;
}

.archive-tree-list,
.archive-tree-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.archive-tree-node > details > summary {
    display: flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
}

.archive-tree-node > details > summary::-webkit-details-marker {
    display: none;
}

.archive-tree-caret {
    flex: none;
    width: 18px;
    height: 18px;
    margin-left: calc(var(--depth, 0) * 14px);
    display: grid;
    place-items: center;
}

.archive-tree-caret::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid #8aa6b4;
    border-bottom: 2px solid #8aa6b4;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}

.archive-tree-node > details[open] > summary .archive-tree-caret::before {
    transform: rotate(45deg);
}

.archive-tree-link {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 9px;
    color: #2f4d5e;
    font-size: 13px;
    text-decoration: none;
}

/* List bez dece nema strelicu, pa se uvlači za njenu širinu da se poravna. */
.archive-tree-link.is-leaf {
    margin-left: calc(var(--depth, 0) * 14px + 18px);
}

.archive-tree-list > .archive-tree-node:first-child > .archive-tree-link.is-leaf,
.archive-tree-special > .archive-tree-link.is-leaf {
    margin-left: 0;
}

.archive-tree-link .app-icon {
    width: 16px;
    height: 16px;
    color: #7aa7bb;
}

.archive-tree-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-tree-link b {
    color: #8aa0ab;
    font-size: 11px;
    font-weight: 700;
}

.archive-tree-link:hover {
    background: #eef6fa;
}

.archive-tree-node.is-active > .archive-tree-link,
.archive-tree-node.is-active > details > summary > .archive-tree-link {
    background: #e2f2f8;
    color: var(--blue-dark, #0b334d);
    font-weight: 700;
}

.archive-tree-special {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
}

.archive-tree-special + .archive-tree-special {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* --- Putokaz --- */
.archive-crumbs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}

.archive-crumbs nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #6a8592;
    font-size: 14px;
}

.archive-crumbs nav a {
    color: #3b6c84;
}

.archive-crumbs nav strong {
    color: var(--navy, #0b334d);
}

.archive-folder-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.archive-folder-actions form {
    display: contents;
}

.archive-folder-actions .button.icon-only {
    width: 38px;
    height: 38px;
}

/* --- Pretraga: dugme Filteri u istom redu sa poljem --- */
.archive-search-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
}

.archive-search-panel .module-filter-disclosure {
    align-self: center;
}

.archive-search-panel .archive-filter-row {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin-top: 0;
}

.archive-sub-toggle {
    align-self: end;
    min-height: 42px;
}

/* --- Otpremanje --- */
.archive-upload {
    padding: 0;
    overflow: hidden;
}

.archive-drop {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 30px 22px;
    border: 2px dashed #c3dbe6;
    border-radius: 18px;
    margin: 14px;
    background: #f8fcfe;
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}

.archive-drop.is-over {
    border-color: var(--blue, #00a1d5);
    background: #eaf7fc;
}

.archive-drop-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #e3f3f9;
    color: #0b8eaf;
}

.archive-drop-icon .app-icon {
    width: 26px;
    height: 26px;
}

.archive-drop strong {
    color: var(--navy, #0b334d);
    font-size: 17px;
}

.archive-drop p {
    max-width: 620px;
    margin: 0;
    color: #5f7b89;
    font-size: 13px;
    line-height: 1.5;
}

.archive-drop small {
    color: #87a0ac;
    font-size: 12px;
}

.archive-drop-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 6px 0;
}

.archive-drop-buttons label {
    cursor: pointer;
}

.archive-progress {
    padding: 16px 18px 18px;
}

.archive-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--navy, #0b334d);
}

.archive-progress-bar {
    height: 8px;
    border-radius: 8px;
    background: #e8f1f5;
    overflow: hidden;
}

.archive-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, #0b8eaf, #36b5d6);
    transition: width .2s ease;
}

.archive-progress-list {
    max-height: 280px;
    overflow: auto;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.archive-progress-list li {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-bottom: 1px solid #eef4f8;
}

.archive-progress-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2f4d5e;
}

.archive-progress-list small {
    color: #7a929e;
    text-align: right;
}

.archive-progress-mark {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cfdde4;
}

.archive-progress-list .is-busy .archive-progress-mark { background: var(--blue, #00a1d5); }
.archive-progress-list .is-added .archive-progress-mark { background: #2fa36b; }
.archive-progress-list .is-duplicate .archive-progress-mark { background: #e3a32b; }
.archive-progress-list .is-error .archive-progress-mark { background: var(--danger, #db3d55); }
.archive-progress-list .is-error small { color: var(--danger, #db3d55); }
.archive-progress-list .is-duplicate small { color: #a8741a; }

.archive-progress-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* --- Spisak --- */
.archive-results {
    padding: 0;
    overflow: hidden;
}

.archive-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

.archive-results-head strong {
    display: block;
    color: var(--navy, #0b334d);
    font-size: 15px;
}

.archive-results-head small {
    color: #6f8794;
    font-size: 12px;
}

/* Traka grupnih radnji: pojavi se čim je nešto izabrano i drži se vrha. */
.archive-bulk {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-bottom: 1px solid #cfe6ef;
    background: #eaf6fb;
}

.archive-bulk[hidden] {
    display: none;
}

.archive-bulk > strong {
    margin-right: 6px;
    color: var(--blue-dark, #0b334d);
    font-size: 13px;
}

.archive-bulk-move select {
    min-height: 36px;
    max-width: 240px;
    padding: 0 10px;
    border: 1px solid #cfe0e7;
    border-radius: 9px;
    background: #fff;
    font-size: 13px;
}

.archive-table-scroll {
    overflow-x: auto;
}

.archive-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    font-size: 13px;
}

.archive-table thead th {
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    background: #f4f9fc;
    color: #4a6178;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.archive-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef4f8;
    vertical-align: middle;
}

.archive-table tbody tr:hover {
    background: #f8fcfe;
}

.archive-table tbody tr.is-selected {
    background: #eef8fc;
}

.archive-table .col-check { width: 44px; }
.archive-table .col-folder { width: 220px; max-width: 220px; }
.archive-table .col-date { width: 110px; white-space: nowrap; }
.archive-table .col-size { width: 90px; white-space: nowrap; color: #5d7886; }
.archive-table .col-user { width: 140px; }
.archive-table .col-actions { width: 56px; text-align: right; }

.archive-table .col-folder a,
.archive-table .col-folder span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #3b6c84;
}

.archive-table .col-user small {
    display: block;
    color: #88a0ab;
    font-size: 11px;
}

.archive-check {
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.archive-check input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.archive-doc {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.archive-doc:hover strong {
    color: var(--blue-dark, #0b334d);
    text-decoration: underline;
}

.archive-doc-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eef4f7;
    color: #5f7f8e;
}

.archive-doc-icon .app-icon {
    width: 18px;
    height: 18px;
}

.archive-doc-icon i {
    position: absolute;
    right: -4px;
    bottom: -4px;
    padding: 1px 4px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #dbe6eb;
    color: #4d6a79;
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .03em;
}

.archive-doc-icon.type-pdf { background: #fdecee; color: #c9384d; }
.archive-doc-icon.type-image { background: #e9f6ef; color: #2f8d5d; }
.archive-doc-icon.type-office { background: #e8f1fc; color: #2d6fc0; }
.archive-doc-icon.type-email { background: #fdf4e3; color: #b87916; }
.archive-doc-icon.type-archive { background: #f0edfb; color: #6a55b8; }

.archive-doc-text {
    min-width: 0;
}

.archive-doc-text strong,
.archive-doc-text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-doc-text strong {
    color: #1f3f52;
    font-weight: 650;
}

.archive-doc-text small {
    color: #7e97a3;
    font-size: 12px;
}

.archive-table .muted {
    color: #a3b5be;
}

.archive-row-menu > div form {
    display: contents;
}

.archive-row-restore {
    display: inline;
}

/* --- Strane --- */
.archive-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 16px;
}

.archive-pages a,
.archive-pages strong {
    min-width: 36px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 9px;
    text-align: center;
    font-size: 13px;
}

.archive-pages a {
    color: #3b6c84;
    background: #fff;
}

.archive-pages strong {
    border-color: var(--blue-dark, #0b334d);
    background: var(--blue-dark, #0b334d);
    color: #fff;
}

.archive-pages-gap {
    padding: 7px 4px;
    color: #9ab0ba;
}

/* --- Pregled Arhive: brojke i nedavni dokumenti --- */
.archive-area-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 8px;
    color: #5f7b89;
    font-size: 12px;
}

.archive-area-stats b {
    color: #173f56;
}

.archive-recent-list {
    margin: 0;
    padding: 0 18px 12px;
    list-style: none;
}

.archive-recent-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #eef4f8;
}

.archive-recent-list li:last-child {
    border-bottom: 0;
}

.archive-recent-list small {
    color: #7e97a3;
    white-space: nowrap;
}

.module-hero-search select {
    min-height: 45px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .25);
    background: transparent;
    color: #fff;
    font-weight: 700;
}

.module-hero-search select option {
    color: #173f56;
}

@media (max-width: 1000px) {
    .archive-layout {
        grid-template-columns: 1fr;
    }

    .archive-tree {
        position: static;
        max-height: 320px;
    }
}

@media (max-width: 700px) {
    .archive-search-panel {
        grid-template-columns: 1fr;
    }

    .archive-results-head {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Pretraga u zaglavlju Pregleda: kada postoje oba dela, prvo se bira deo. */
.module-hero-search.has-section {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

/* ===== v7.5.css ===== */
/* ==================================================================
   Tehnodent Office v7.5 — sloj dorada.

   Ne uvozi nijedan raniji sloj: `bin/build-css.php` ih spaja u
   `assets/css/layers.css`, tačnim redom; ovaj ide pred poslednjim (v6.7).
   ================================================================== */

/* ==================================================================
   1. LIDOVI: SADRŽAJ ĆELIJA NA SREDINI

   Tekst i oznake (Priča, Da/Ne, status…) stoje na sredini svoje ćelije, i
   u zaglavlju i u redovima. Zaglavlje dobija isti razmak levo i desno, da
   ručka za širinu (desno) ne pomeri naziv sa sredine.
   ================================================================== */
.leads-table th[data-col-key],
.leads-table td[data-col-key] {
    text-align: center;
}

.leads-table.is-sized thead th[data-col-key] {
    padding-left: 18px;
    padding-right: 18px;
}

/* ==================================================================
   2. LIDOVI: TABELA PREKO CELOG EKRANA

   Dugme u gornjem desnom uglu tabele (zaglavlje kolone sa tri tačkice).
   Tabela tada zauzme ceo prozor, a pregledač pređe u pun ekran. Izlaz: isto
   dugme ili Esc.

   z-index 95: iznad bočnog menija (30), gornje trake (20) i plutajućeg
   klizača (60), a ISPOD prozora (100) i menija sa tri tačkice (320) — da
   „Otvori i izmeni", „Napravi projekat" i potvrda brisanja rade i ovde.
   ================================================================== */
.leads-table thead th.col-actions {
    text-align: center;
}

.leads-fullscreen-toggle {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line, #dbe7ef);
    border-radius: 9px;
    background: #fff;
    color: #3b5a70;
    cursor: pointer;
    vertical-align: middle;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.leads-fullscreen-toggle:hover,
.leads-fullscreen-toggle:focus-visible {
    border-color: #9cc6df;
    background: #eef7fc;
    color: #0c6ea6;
}

.leads-fullscreen-toggle .app-icon {
    width: 16px;
    height: 16px;
}

.leads-fullscreen-toggle .icon-collapse,
body.leads-fullscreen .leads-fullscreen-toggle .icon-expand {
    display: none;
}

body.leads-fullscreen .leads-fullscreen-toggle .icon-collapse {
    display: block;
}

body.leads-fullscreen {
    overflow: hidden;
}

.leads-table-panel.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: flex;
    flex-direction: column;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    animation: none;
    transform: none;
}

.leads-table-panel.is-fullscreen .leads-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
}

/* U punom ekranu zaglavlje ostaje gore dok se lista pomera. */
.leads-table-panel.is-fullscreen .leads-table thead th {
    top: 0;
}

/* Sve što pluta iznad stranice, a nije deo tabele, se sklanja. */
body.leads-fullscreen .sidebar-collapse,
body.leads-fullscreen .sticky-hscroll {
    display: none !important;
}

/* ==================================================================
   3. TO DO: OBAVEZA KOJU JE PREBACIO KOLEGA
   ================================================================== */
.todo-transfer-badge,
.daily-todo-copy small.todo-transfer-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-left: 0;
    padding: 2px 9px 2px 7px;
    border-radius: 999px;
    background: #eef4ff;
    color: #3b5bb5;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    vertical-align: middle;
}

.todo-transfer-badge .app-icon {
    width: 12px;
    height: 12px;
}

.todo-transfer-modal select,
.todo-transfer-modal textarea {
    width: 100%;
}

/* ===== v7.6.css ===== */
/* ==================================================================
   Tehnodent Office v7.6 — sloj dorada.

   Ne uvozi nijedan raniji sloj: `bin/build-css.php` ih spaja u
   `assets/css/layers.css`, tačnim redom; ovaj ide pred poslednjim (v6.7).
   ================================================================== */

/* ==================================================================
   1. ARHIVA KAO FILE EXPLORER

   Veliki naslov je sklonjen, a stranica je podignuta ka vrhu: stablo levo i
   spisak desno zauzimaju visinu prozora, kao u File Exploreru. Spisak ima
   svoje skrolovanje, pa traka sa putanjom i dugmadima uvek ostaje gore.
   ================================================================== */
.archive-explorer-body .module-workspace-content {
    padding-top: 14px;
    padding-bottom: 18px;
}

.archive-explorer {
    /* 100vh minus gornja traka (72px) i razmaci ispod/iznad. */
    height: calc(100vh - 72px - 34px);
    min-height: 520px;
    align-items: stretch;
    gap: 14px;
}

.archive-explorer .archive-tree {
    position: static;
    max-height: none;
    height: 100%;
    overflow: auto;
}

.archive-explorer .archive-main {
    height: 100%;
    gap: 10px;
}

.archive-explorer .archive-results {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 6px;
}

.archive-explorer .archive-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Zaglavlje tabele ostaje vidljivo dok spisak klizi. */
.archive-explorer .archive-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* --- Traka: putanja levo, alatke desno --- */
.archive-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.archive-bar .archive-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 14px;
}

.archive-bar .archive-crumbs strong {
    color: var(--navy, #0b334d);
}

.archive-bar .archive-back-link {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line, #dbe7ef);
    border-radius: 9px;
    color: #3b5a70;
    background: #fff;
}

.archive-bar .archive-back-link .app-icon {
    width: 15px;
    height: 15px;
}

.archive-bar-count {
    margin-left: 6px;
    color: #6c8598;
    font-size: 12px;
    white-space: nowrap;
}

.archive-bar-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.archive-bar-tools .archive-section-tabs {
    margin: 0;
}

.archive-bar-tools .archive-folder-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.archive-filter-form {
    display: flex;
    align-items: center;
    margin: 0;
}

/* --- Pretraga po celom delu --- */
.archive-search-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #cfe4f2;
    border-radius: 12px;
    background: #f1f8fd;
    color: #2b5a76;
    font-size: 13px;
}

.archive-search-note .app-icon {
    width: 16px;
    height: 16px;
    color: #0c6ea6;
}

.archive-search-note span {
    flex: 1 1 auto;
}

/* --- Red fascikle u spisku --- */
.archive-folder-row .archive-doc-icon.type-folder {
    background: #fff4d8;
    color: #a97400;
}

.archive-folder-row td {
    background: #fcfdff;
}

.archive-folder-row .archive-doc strong {
    color: var(--navy, #0b334d);
}

.archive-results-note {
    margin: 0 0 8px;
    color: #6c8598;
    font-size: 13px;
}

/* --- Prevlačenje fascikli u stablu --- */
.archive-tree.is-saving {
    opacity: .6;
    pointer-events: none;
}

.archive-tree [data-folder-link] {
    cursor: grab;
}

.archive-tree-node.is-dragging {
    opacity: .45;
}

.archive-tree-node.is-drop-into > details > summary > [data-folder-link],
.archive-tree-node.is-drop-into > [data-folder-link],
.archive-tree-link.is-drop-into {
    outline: 2px solid #0c6ea6;
    outline-offset: -2px;
    border-radius: 9px;
    background: #e8f4fb;
}

.archive-tree-node.is-drop-before,
.archive-tree-node.is-drop-after {
    position: relative;
}

.archive-tree-node.is-drop-before::before,
.archive-tree-node.is-drop-after::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    height: 2px;
    border-radius: 2px;
    background: #0c6ea6;
}

.archive-tree-node.is-drop-before::before {
    top: -1px;
}

.archive-tree-node.is-drop-after::after {
    bottom: -1px;
}

/* --- Prozor „isto ime" i samo-osvežavanje --- */
.archive-name-modal .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 25px 22px;
}

.archive-name-all {
    padding: 0 25px 14px;
}

.archive-progress-reload {
    color: #0c6ea6;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width: 900px) {
    .archive-explorer {
        height: auto;
        min-height: 0;
    }

    .archive-explorer .archive-tree {
        height: auto;
        max-height: 40vh;
    }
}

/* ==================================================================
   2. LIDOVI: IZGUBLJEN LEAD I GAŠENJE KOLONE PREVLAČENJEM
   ================================================================== */

/* Ceo red izgubljenog leada je crven — vidi se pre nego što se pročita. */
.leads-table tbody tr.lead-row.is-lost > td {
    background: #fdf1f1;
}

.leads-table tbody tr.lead-row.is-lost:hover > td {
    background: #fbe6e6;
}

.leads-table tbody tr.lead-row.is-lost td.col-actions {
    background: #fdf1f1;
}

.lead-bool.lost {
    background: #fbdcdc;
    color: #a12525;
}

/* Dok se kolona vuče van tabele, tabela kaže šta će se desiti. */
.leads-table.is-column-dropout {
    outline: 2px dashed #d98080;
    outline-offset: 4px;
}

.lead-check-lost input:checked + .custom-check {
    border-color: #c0392b;
    background: #c0392b;
}

/* ==================================================================
   3. RADNI PROSTOR: NIŽI WIDGETI

   Red mreže ima stalnu visinu, pa widget ne može da se razvuče preko pola
   ekrana. Sadržaj koji ne stane se skroluje unutar bloka — a ispod widgeta
   ostaje mesta za sledeći, što je i bio cilj.
   ================================================================== */
.widget-grid {
    grid-auto-rows: 240px;
}

.widget-block {
    min-height: 0;
    max-height: 100%;
}

.widget-block .widget-body {
    min-height: 0;
    overflow-y: auto;
}

/* „Pogledaj više" u To Do widgetu vodi na ceo modul. */
.todo-widget-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 16px 14px;
    padding: 8px 12px;
    border: 1px solid var(--line, #dbe7ef);
    border-radius: 10px;
    color: #0c6ea6;
    font-size: 13px;
    font-weight: 700;
    background: #f4fafd;
}

.todo-widget-more:hover {
    border-color: #9cc6df;
    background: #e9f5fc;
}

@media (max-width: 980px) {
    .widget-grid {
        grid-auto-rows: auto;
    }

    .widget-block {
        max-height: none;
    }
}

/* ==================================================================
   4. TO DO: OBAVEZA PREBAČENA KOLEGI OSTAJE I KOD TEBE
   ================================================================== */
.todo-transfer-badge.is-sent {
    background: #eef7ff;
    color: #2a6ca8;
}

.todo-transfer-badge.is-done {
    background: #e6f7ee;
    color: #1d7a4c;
}

.todo-transfer-badge.is-done .app-icon {
    color: #1d7a4c;
}

/* ==================================================================
   5. QR NALEPNICA: SVAKI PODATAK U SVOM OKVIRU

   Dug naziv ili dug inventarni broj su gurali ostale redove naniže, pa je
   donji red (SN / lokacija) ispadao van nalepnice — i na ekranu i u štampi.
   Sada nalepnica ima stalne redove: naziv najviše dva reda, inventarni broj
   jedan, podaci ispod jedan. Sve što ne stane se skraćuje sa „…".
   ================================================================== */
.asset-label-copy {
    display: grid;
    grid-template-rows: auto minmax(0, auto) auto auto;
    align-content: center;
    overflow: hidden;
    min-height: 0;
}

.asset-label-name {
    /* Dva reda i ni milimetar više; duga reč se prelama umesto da izađe. */
    max-height: 6.7mm;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.asset-label-ib {
    min-width: 0;
    overflow: hidden;
}

.asset-label-ib b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dugačak inventarni broj se ispisuje sitnije, umesto da pređe u drugi red. */
.asset-label-ib b.is-long {
    font-size: 3.2mm;
}

.asset-label-ib b.is-very-long {
    font-size: 2.6mm;
    letter-spacing: 0;
}

.asset-label-meta {
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}

.asset-label-meta > span {
    overflow: hidden;
}

/* ===== v7.7.css ===== */
/* ==================================================================
   Tehnodent Office v7.7 — sloj dorada.

   Ne uvozi nijedan raniji sloj: `bin/build-css.php` ih spaja u
   `assets/css/layers.css`, tačnim redom; ovaj ide pred poslednjim (v6.7).
   ================================================================== */

/* ==================================================================
   1. ARHIVA: TRAKA IZNAD SPISKA

   Dugme „Pregled Arhive" i tabovi Servis / Finansije su sklonjeni — deo se
   bira u meniju levo. Ostaje putanja, sa ikonicom dela i imenom koje se čita.
   ================================================================== */
.archive-crumb-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #eaf4fb;
    color: #0c6ea6;
}

.archive-crumb-icon .app-icon {
    width: 16px;
    height: 16px;
}

.archive-crumb-root {
    color: var(--navy, #0b334d);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.archive-bar .archive-crumbs a:not(.archive-crumb-root) {
    color: #3b5a70;
}

/* ==================================================================
   2. ARHIVA: TABELA BEZ KLIZAČA I SA DUGMADIMA U REDU

   Tabela više nema zadatu najmanju širinu, pa staje u panel — nema ni trake
   za levo-desno na dnu ekrana. Naziv se skraćuje sa „…" kada je predugačak.
   ================================================================== */
.archive-table {
    min-width: 0;
    table-layout: auto;
}

.archive-table-scroll {
    overflow-x: hidden;
}

.archive-table .col-title {
    min-width: 0;
}

.archive-table .archive-doc-text strong,
.archive-table .archive-doc-text small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-table .col-actions {
    width: 132px;
    white-space: nowrap;
}

/* Dugmad uz svaki red: izmena, brisanje, pa meni sa ostalim radnjama. */
.archive-row-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.archive-row-tools form {
    display: flex;
    margin: 0;
}

.archive-row-tools .icon-button {
    width: 30px;
    height: 30px;
    min-height: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #4a6a80;
    background: transparent;
}

.archive-row-tools .icon-button .app-icon {
    width: 16px;
    height: 16px;
}

.archive-row-tools .archive-row-edit:hover,
.archive-row-tools .archive-row-edit:focus-visible {
    border-color: #9cc6df;
    background: #eef7fc;
    color: #0c6ea6;
}

.archive-row-tools .archive-row-delete:hover,
.archive-row-tools .archive-row-delete:focus-visible {
    border-color: #eec2c2;
    background: #fdf0f0;
    color: #b83b3b;
}

/* Meni sa tri tačkice u istom redu sa dugmadima — bez strelice pregledača. */
.archive-row-tools .archive-row-menu {
    display: flex;
}

.archive-row-tools .archive-row-menu > summary {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    list-style: none;
    cursor: pointer;
    color: #4a6a80;
}

.archive-row-tools .archive-row-menu > summary::-webkit-details-marker,
.archive-row-tools .archive-row-menu > summary::marker {
    display: none;
    content: "";
}

.archive-row-tools .archive-row-menu > summary:hover {
    background: #eef7fc;
    color: #0c6ea6;
}

.archive-row-tools .archive-row-menu > summary .app-icon {
    width: 16px;
    height: 16px;
}

@media (max-width: 900px) {
    .archive-table-scroll {
        overflow-x: auto;
    }
}

/* ==================================================================
   3. TO DO: RASPORED KOJI KORISNIK SAM SLOŽI
   ================================================================== */
.todo-order-reset {
    margin: 0 auto 0 0;
}

.todo-order-reset .button {
    white-space: nowrap;
}

.todo-board-heading {
    align-items: center;
    gap: 12px;
}

/* ===== v8.0.css ===== */
/*
 * Tehnodent Office — sloj v8.0
 *
 * Šest stvari: prebacivanje obaveze na više kolega (ljubičasti blok), stranica
 * „Pregled dana", brza pretraga u Lidovima, dozvole i zaključavanje u Arhivi,
 * i početni blok modula koji je sada svuda isti.
 */

/* ===============================================================
 * 1. PREBAČENA OBAVEZA — CEO BLOK U LJUBIČASTOM
 *
 * Prebačena obaveza se u spisku vidi pre nego što se pročita: levi potez i
 * blaga ljubičasta podloga. Boja je namerno mirna — obaveza nije hitna, nego
 * podeljena.
 * =============================================================== */

.todo-row.is-shared,
.todo-widget article.is-shared {
  --shared-ink: #6d4bc4;
  border-color: rgba(109, 75, 196, 0.34);
  background: linear-gradient(180deg, rgba(109, 75, 196, 0.1), rgba(109, 75, 196, 0.04));
  box-shadow: inset 3px 0 0 var(--shared-ink);
}

.todo-row.is-shared .todo-transfer-badge.is-sent,
.todo-widget article.is-shared .todo-transfer-badge.is-sent {
  border-color: rgba(109, 75, 196, 0.36);
  background: rgba(109, 75, 196, 0.14);
  color: #4b2e94;
}

.todo-row.is-shared.done,
.todo-widget article.is-shared.done {
  background: rgba(109, 75, 196, 0.05);
  box-shadow: inset 3px 0 0 rgba(109, 75, 196, 0.35);
}

/* Izbor više kolega u prozoru za prebacivanje. */
.todo-transfer-people {
  border: 0;
  padding: 0;
  margin: 0;
}
.todo-transfer-people legend {
  padding: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft, #5b6b7c);
}
.todo-transfer-people legend small {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.todo-transfer-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
  max-height: 240px;
  overflow: auto;
  padding: 4px;
}
.todo-transfer-picker label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}
.todo-transfer-picker label:hover {
  border-color: rgba(109, 75, 196, 0.45);
  background: rgba(109, 75, 196, 0.05);
}
.todo-transfer-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.todo-transfer-picker label:has(input:checked) {
  border-color: rgba(109, 75, 196, 0.6);
  background: rgba(109, 75, 196, 0.1);
  font-weight: 650;
}

/* ===============================================================
 * 2. PREGLED DANA
 * =============================================================== */

.day-review {
  display: grid;
  gap: 16px;
}
.day-review-block .panel-heading {
  align-items: flex-start;
}
.day-review-list {
  display: grid;
  gap: 8px;
}
.day-review-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}
a.day-review-row:hover {
  border-color: var(--brand, #147cac);
  box-shadow: 0 8px 20px rgba(20, 124, 172, 0.1);
}
.day-review-row > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.day-review-row strong {
  font-size: 14.5px;
  font-weight: 650;
  overflow-wrap: anywhere;
}
.day-review-row small {
  font-size: 12.5px;
  color: var(--ink-soft, #5b6b7c);
}
.day-review-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(20, 124, 172, 0.1);
  color: var(--brand, #147cac);
}
.day-review-icon .app-icon {
  width: 17px;
  height: 17px;
}
.day-review-row.is-late {
  border-color: rgba(203, 62, 62, 0.4);
  background: rgba(203, 62, 62, 0.05);
}
.day-review-row.is-late .day-review-icon {
  background: rgba(203, 62, 62, 0.12);
  color: #b03535;
}
.day-review-row.is-shared {
  border-color: rgba(109, 75, 196, 0.34);
  background: rgba(109, 75, 196, 0.06);
}
.day-review-check {
  display: grid;
  place-items: center;
}
.day-review-empty {
  margin: 0;
  padding: 14px 2px;
  color: var(--ink-soft, #5b6b7c);
  font-size: 14px;
}
.day-review-activity .day-review-row {
  background: var(--surface-soft, #f7fafc);
}

/* ===============================================================
 * 3. BRZA PRETRAGA U LIDOVIMA
 *
 * Red polja stoji zalepljen ispod zaglavlja kolona i ne odlazi pri skrolovanju,
 * jer se po njemu radi dok se gleda spisak.
 * =============================================================== */

.lead-quick-row th {
  position: sticky;
  top: var(--leads-head-height, 42px);
  z-index: 3;
  padding: 5px 6px;
  background: var(--surface-soft, #f7fafc);
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.lead-quick-input {
  width: 100%;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 500;
}
.lead-quick-input::placeholder {
  color: #9aa8b5;
  font-weight: 400;
}
.lead-quick-input:focus {
  outline: none;
  border-color: var(--brand, #147cac);
  box-shadow: 0 0 0 3px rgba(20, 124, 172, 0.14);
}
.lead-quick-clear {
  font-size: 18px;
  line-height: 1;
  color: var(--ink-soft, #5b6b7c);
}
.lead-quick-empty td {
  padding: 18px 14px;
  text-align: center;
  color: var(--ink-soft, #5b6b7c);
  font-size: 14px;
}

/* ===============================================================
 * 4. ARHIVA — DOZVOLE I ZAKLJUČAVANJE
 * =============================================================== */

/* Dokument koji se sme videti ali ne i otvoriti: bez pokazivača i bez plave. */
.archive-doc.is-locked-level {
  cursor: default;
  color: inherit;
}
.archive-doc.is-locked-level strong {
  color: var(--ink-soft, #5b6b7c);
}
.archive-menu-note {
  display: block;
  padding: 9px 12px;
  color: var(--ink-soft, #5b6b7c);
  font-size: 12.5px;
}

/* Fascikla sa katancem. */
.archive-doc-folder.is-locked .archive-doc-icon {
  background: rgba(176, 53, 53, 0.1);
  color: #b03535;
}
.archive-row-lock.is-on {
  color: #b03535;
}

/* Ekran koji traži PIN. */
.archive-locked {
  display: grid;
  place-items: center;
  padding: 44px 18px;
}
.archive-locked-card {
  width: min(460px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.archive-locked-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(20, 124, 172, 0.1);
  color: var(--brand, #147cac);
}
.archive-locked-icon .app-icon {
  width: 26px;
  height: 26px;
}
.archive-locked-card h2 {
  margin: 0;
  font-size: 21px;
}
.archive-locked-card p {
  margin: 0;
  color: var(--ink-soft, #5b6b7c);
  font-size: 14px;
  line-height: 1.55;
}
.archive-locked-form {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.archive-locked-form input {
  width: 160px;
  padding: 10px 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 11px;
  font-size: 17px;
  letter-spacing: 0.3em;
  text-align: center;
}
.archive-locked-block {
  padding: 9px 14px;
  border-radius: 11px;
  background: rgba(203, 62, 62, 0.08);
  color: #b03535;
  font-size: 13.5px;
}
.archive-locked-admin {
  margin-top: 4px;
}
.archive-lock-remove {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e2e8f0);
}

/* Nivoi pristupa na stranici korisnika. */
.up-archive-note {
  margin: 0 0 12px;
  color: var(--ink-soft, #5b6b7c);
  font-size: 13.5px;
}
.up-archive-form {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 13px;
  background: var(--surface-soft, #f7fafc);
}
.up-archive-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}
.up-archive-row select {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  font-weight: 500;
}
.up-archive-actions {
  display: flex;
  justify-content: flex-end;
}
.up-archive-list {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.up-archive-list > strong {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #5b6b7c);
}
.up-archive-list .up-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.up-archive-add {
  margin-top: 12px;
}

/* ===============================================================
 * 5. POČETNI BLOK MODULA — SVUDA ISTI
 *
 * `render_module_hero()` ispisuje isti blok kao u Projektima. Desna strana
 * može da nosi karticu datuma, prsten napretka ili brojku modula.
 * =============================================================== */

.dashboard-hero-tile {
  display: grid;
  gap: 3px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  color: #fff;
  text-decoration: none;
}
a.dashboard-hero-tile:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}
.dashboard-hero-tile strong {
  font-size: 27px;
  font-weight: 850;
  line-height: 1.05;
}
.dashboard-hero-tile small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.75;
}
.dashboard-hero-tile span {
  font-size: 12.5px;
  opacity: 0.68;
}

/* Pretraga Arhive stoji u redu sa dugmadima, pa mora da se ponaša kao dugme. */
.module-hero-shared .module-hero-search {
  display: flex;
  gap: 8px;
  width: min(520px, 100%);
}
.module-hero-shared .module-hero-search input[name="q"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.module-hero-shared .module-hero-search input[name="q"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.module-hero-shared .module-hero-search select {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.module-hero-shared .module-hero-search span {
  display: none;
}

@media (max-width: 720px) {
  .lead-quick-row th {
    padding: 4px;
  }
  .archive-locked {
    padding: 28px 12px;
  }
  .up-archive-row {
    grid-template-columns: 1fr;
  }
  .module-hero-shared .module-hero-search {
    flex-wrap: wrap;
  }
}

/* ===== v8.0.1.css ===== */
/* ===============================================================
 * v8.0.1 — ISPRAVKE
 *
 * 1. Tabela u Lidovima: širine stoje u `<colgroup>`, prazna kolona upija
 *    višak, red brze pretrage stoji ISPOD naziva a ne preko njih.
 * 2. Sadržaj ćelije je na sredini — i vodoravno i uspravno.
 * =============================================================== */

/* ---------------------------------------------------------------
   1. RED BRZE PRETRAGE STOJI ISPOD NAZIVA KOLONE

   U v8.0 je i red sa nazivima i red brze pretrage imao `top: 0` (prvi iz
   osnovnog stila tabele, koji je bio tačniji po pravilima CSS-a), pa je red
   pretrage pri pomeranju liste pokrivao nazive kolona. Visina reda sa
   nazivima se sada meri (JS upisuje `--leads-head-height`), a ovaj stil je
   posle osnovnog, pa ga i nadjača.
   --------------------------------------------------------------- */
.leads-table .lead-quick-row th {
    top: var(--leads-head-height, 44px);
    z-index: 3;
}

/* Polje za pretragu sme da pređe ivicu ćelije (okvir u fokusu). */
.leads-table.is-sized .lead-quick-row th {
    overflow: visible;
}

/* ---------------------------------------------------------------
   2. PRAZNA KOLONA KOJA UPIJA VIŠAK

   Bez nje bi pregledač pri stalnom rasporedu razvukao sve kolone da ispune
   panel — pa bi se kolona posle sužavanja sama vratila šira. Ovako suženje
   ostaje suženje, a prazno mesto ide na kraj.
   --------------------------------------------------------------- */
.leads-table .col-filler {
    padding: 0;
    border-bottom: 1px solid #eef4f8;
    background: inherit;
}

.leads-table thead .col-filler {
    border-bottom: 1px solid var(--line);
    background: #f4f9fc;
}

.leads-table .lead-quick-row .col-filler {
    background: var(--surface-soft, #f7fafc);
    border-bottom: 1px solid var(--line, #e2e8f0);
}

.leads-table tbody tr:last-child .col-filler {
    border-bottom: 0;
}

/* ---------------------------------------------------------------
   3. SADRŽAJ ĆELIJE NA SREDINI

   v7.5 je centrirala tekst, ali su ostala dva mesta koja su ga vukla sa
   sredine: prva kolona ima levo 18px zbog trake u boji vrste robe, a
   napomena je stajala na dnu reda.
   --------------------------------------------------------------- */
.leads-table .lead-row td:first-child {
    padding-inline-end: 18px;
}

.leads-table tbody td[data-col-key] {
    vertical-align: middle;
}

.leads-table td[data-col-key] > span,
.leads-table td[data-col-key] > a {
    vertical-align: middle;
}

/* Napomena se seče po svojoj koloni, ne po zadatih 220px. */
.leads-table .lead-note {
    max-width: 100%;
    vertical-align: middle;
}

/* Oznake (Da/Ne, status, vrsta robe) stoje tačno na sredini svoje ćelije. */
.leads-table td[data-col-key] > .lead-bool,
.leads-table td[data-col-key] > .lead-status,
.leads-table td[data-col-key] > .lead-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------------
   4. ARHIVA: KATANAC U REDU FASCIKLE

   Tri dugmeta uz red (izmena, katanac, brisanje) traže malo više mesta od
   dva — bez ovoga se poslednje dugme gurne u sledeći red.
   --------------------------------------------------------------- */
.archive-table .col-actions {
    width: 132px;
    min-width: 132px;
}

/* ===== v6.7.css ===== */
/*
 * Tehnodent Office v6.7 — sloj za dodirne uređaje.
 *
 * Jedna jedina tema: na telefonima se nigde ne crta `backdrop-filter`.
 *
 * ZAŠTO
 * -----
 * `backdrop-filter` na elementu koji je `position: fixed` ili `sticky` je
 * najskuplja stvar koju CSS može da traži od telefona. Da bi ga nacrtao,
 * WebKit mora da drži sliku CELE pozadine ispod tog elementa u memoriji
 * grafike i da je zamuti IZNOVA na svaki kadar skrola. Na `office.php` su
 * takva bila dva sloja odjednom (gornja traka i traka sa modulima), na
 * ostalim stranicama `.topbar`, a kada se otvori prozor ili „Svi moduli“
 * dolazi i treći, preko celog ekrana.
 *
 * Kada procesu za prikaz ponestane memorije, iOS ga ubije, a korisnik dobije
 * „A problem repeatedly occurred“ — što je tačno ono što se prijavljivalo sa
 * jednog iPhone-a, dok je isti nalog na računaru radio bez greške.
 *
 * ŠTA SE VIDI
 * -----------
 * Pozadine traka su i pre ovoga bile 92–93% neprozirne, pa se posle
 * zaokruživanja na punu boju razlika golim okom praktično ne primećuje.
 * Na računaru se NE menja ništa — stakleni izgled ostaje.
 *
 * Ovaj sloj se NE uključuje u @import lanac. Učitava se kao zaseban <link>
 * posle v6.6.css, pa ide paralelno i ne dodaje još jedno čekanje u nizu od
 * sedamnaest fajlova koji se već lančaju.
 */

/*
 * Dva uslova, namerno. Širina pokriva telefone; drugi uslov hvata i veće
 * dodirne uređaje (iPhone položen vodoravno, tablet), gde širina više nije
 * merilo, a memorija grafike jeste. Laptop sa ekranom na dodir ima
 * `hover: hover` i ostaje netaknut.
 */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    /*
     * Namerno preko `*`. U sistemu je osamnaest CSS fajlova i jedanaest
     * mesta sa `backdrop-filter`; nabrajanje po imenu bi značilo da svaki
     * sledeći dodati efekat neko mora da se seti da upiše i ovde. Ovako
     * pravilo važi unapred, a gasi tačno jedno svojstvo.
     */
    *,
    *::before,
    *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /*
     * Pošto zamućenja više nema, providne trake bi propuštale tekst ispod
     * sebe. Zato im se pozadina zaokružuje na punu boju.
     */
    .office-header {
        background: #ffffff;
    }

    .topbar {
        background: #ffffff;
    }

    .office-dock-inner {
        background: #ffffff;
    }

    /*
     * Zatamnjenja preko celog ekrana ostaju, samo bez zamućenja. Malo su
     * tamnija nego na računaru, da bi razdvajanje od sadržaja ispod i dalje
     * bilo jasno sada kada se sadržaj vidi oštro.
     */
    .modal-backdrop {
        background: rgba(5, 34, 52, 0.76);
    }

    .module-launchpad {
        background: rgba(6, 30, 45, 0.72);
    }

    /*
     * Isti razlog, druga tehnika: `filter: blur()` na velikom poluprečniku
     * pravi teksturu koja je nekoliko puta veća od samog elementa. Na
     * telefonu se ukras ionako ne vidi, pa nema razloga da se crta.
     */
    .login-glow {
        filter: none;
        opacity: 0.18;
    }
}