/* ============================================================
   components.css — SVAKA komponenta definirana jednom ovdje.
   Stranice ih samo koriste (ili ih gradi ui.js).
   ============================================================ */

/* ---------- gumbi ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  border: 1px solid transparent; border-radius: var(--r); cursor: pointer;
  font: inherit; font-weight: 500; font-size: var(--fs); line-height: 1;
  padding: .568rem 1.25rem; color: var(--txt); background: var(--surface-3);
  box-shadow: var(--elev-1); transition: .18s ease; text-decoration: none; white-space: nowrap;
}
.btn:hover { box-shadow: var(--elev-2); color: var(--txt); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn-primary { background: var(--c-primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--c-primary-d); color: var(--on-primary); }
.btn-ghost { background: transparent; box-shadow: none; color: var(--txt-2); }
.btn-ghost:hover { background: var(--surface-3); box-shadow: none; color: var(--txt); }
.btn-soft { background: var(--primary-soft); color: var(--c-primary); box-shadow: none; }
.btn-soft:hover { color: var(--c-primary); }
.btn-sm { padding: .38rem .85rem; font-size: var(--fs-sm); }
.btn-icon { padding: .5rem; border-radius: var(--r); }
.btn-block { width: 100%; }

/* ---------- kartica ---------- */
.card {
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-1);
  padding: var(--sp-5) var(--sp-6); position: relative;
  transition: box-shadow .2s ease, background .25s ease;
}
.card-title { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card-title h3, .card-title h6 { margin: 0; }
.card-title .sub { font-size: var(--fs-sm); color: var(--txt-2); font-weight: 400; }
.card-pad-0 { padding: var(--sp-5) 0; }
.card-pad-0 > .card-head, .card-pad-0 > .table-wrap { padding-inline: var(--sp-6); }

/* ---------- forme ---------- */
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field > label, .lbl {
  font-size: var(--fs-sm); font-weight: 500; color: var(--txt-2);
}
.input, .select, textarea.input {
  width: 100%; font: inherit; font-size: var(--fs); color: var(--txt);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: .5rem .875rem; line-height: 1.4; min-height: 2.375rem; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .2s;
  appearance: none; -webkit-appearance: none;
}
.input:hover, .select:hover { border-color: var(--txt-3); }
.input:focus, .select:focus, textarea.input:focus {
  border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.input::placeholder { color: var(--txt-3); }
.select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%23a8aab7' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right .7rem center; padding-right: 2rem;
}
.select[multiple] { background-image: none; padding-right: .875rem; min-height: 4.5rem; }
.input-icon { position: relative; }
.input-icon > .mdi { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--txt-3); font-size: 1.1rem; pointer-events: none; }
.input-icon > .input { padding-left: 2.35rem; }
.hint { font-size: var(--fs-xs); color: var(--txt-3); }

/* switch (Materio-style) */
.switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; font-size: var(--fs-sm); font-weight: 500; color: var(--txt-2); }
.switch input { display: none; }
.switch i {
  width: 2.125rem; height: 1.125rem; border-radius: var(--r-pill); position: relative; flex: 0 0 auto;
  background: var(--surface-3); border: 1px solid var(--line); transition: .18s ease;
}
.switch i::after {
  content: ""; position: absolute; top: -3px; left: -1px; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; background: var(--surface); box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: .18s ease;
}
.switch input:checked + i { background: var(--c-primary); border-color: var(--c-primary); }
.switch input:checked + i::after { left: calc(100% - .95rem); background: var(--on-primary); }
.switch input:checked ~ span { color: var(--txt); }

/* checkbox obični */
.ckb { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-size: var(--fs-sm); color: var(--txt-2); }
.ckb input { accent-color: var(--c-primary); width: 1rem; height: 1rem; }

/* filter/traka razmak */
.form-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; }
.form-row .field { flex: 1 1 8.5rem; }
.form-row .field.wide { flex: 2 1 16rem; }
.form-row .switches { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; padding-bottom: .45rem; }

/* ---------- badge / chip ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .6875rem; font-weight: 600; line-height: 1;
  padding: .32rem .55rem; border-radius: var(--r-sm); white-space: nowrap;
}
.badge-soft { background: var(--grey-soft); color: var(--txt-2); }
.badge-primary { background: var(--primary-soft); color: var(--c-primary); }
.badge-success { background: var(--success-soft); color: var(--c-success); }
.badge-warning { background: var(--warning-soft); color: var(--c-warning); }
.badge-error   { background: var(--error-soft);   color: var(--c-error); }
.badge-info    { background: var(--info-soft);    color: var(--c-info); }
.badge-dot::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-sm); font-weight: 500;
  background: var(--surface); color: var(--txt-2); border-radius: var(--r-pill);
  padding: .3rem .75rem; box-shadow: var(--elev-1);
}
.chip .mdi { font-size: 1rem; color: var(--c-primary); }

/* avatar */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 2.375rem; height: 2.375rem; border-radius: var(--r-pill);
  background: var(--primary-soft); color: var(--c-primary); font-weight: 600; font-size: var(--fs);
}
.avatar-sm { width: 1.875rem; height: 1.875rem; font-size: var(--fs-xs); }
.avatar-lg { width: 3rem;   height: 3rem;   font-size: var(--fs-md); }
.avatar-src { background: var(--grey-soft); color: var(--txt-2); text-transform: uppercase; }

/* progress linija (Sales-by-Countries stil) */
.prog { height: .375rem; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.prog > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--c-primary); transition: width .5s ease; }
.prog-row { display: grid; grid-template-columns: 2.25rem 1fr 3.2rem; gap: var(--sp-3); align-items: center; padding: .4rem 0; }
.prog-row .who { font-size: var(--fs-sm); font-weight: 600; }
.prog-row .pct { font-size: var(--fs-sm); color: var(--txt-2); text-align: right; }

/* lista (transactions / zemlje) */
.item-list { display: flex; flex-direction: column; }
.item-list > .row-i {
  display: flex; align-items: center; gap: var(--sp-3); padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}
.item-list > .row-i:last-child { border-bottom: 0; }
.row-i .grow { flex: 1; min-width: 0; }
.row-i .t1 { font-weight: 600; font-size: var(--fs); }
.row-i .t2 { font-size: var(--fs-xs); color: var(--txt-3); }
.row-i .val { font-weight: 600; text-align: right; }
.icon-ico {
  width: 2.375rem; height: 2.375rem; border-radius: .75rem; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.25rem; flex: 0 0 auto;
}

/* ---------- tablice (iznad DataTables base-a) ---------- */
.table-wrap { overflow-x: auto; }
table.dataTable { width: 100% !important; border-collapse: separate; border-spacing: 0; }
table.dataTable thead th {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
  color: var(--txt-2); border-bottom: 1px solid var(--line); background: transparent;
  padding: .7rem .875rem !important; white-space: nowrap;
}
table.dataTable tbody td {
  padding: .625rem .875rem !important; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); vertical-align: middle; background: transparent;
}
table.dataTable tbody tr { cursor: pointer; }
table.dataTable tbody tr:hover td { background: var(--surface-2); }
table.dataTable tbody tr.run-row-selected td { background: var(--primary-soft); }
.dt-cell-strong { font-weight: 600; color: var(--txt); }
.thumb {
  width: 2.6rem; height: 2rem; object-fit: cover; border-radius: var(--r-sm);
  background: var(--surface-3); display: block;
}
.dt-cell-dim { color: var(--txt-3); }

/* DataTables kontrole — Materio stil */
.dt-length, .dt-filter, .dt-info, .dt-paging {
  font-size: var(--fs-sm); color: var(--txt-2); padding: var(--sp-3) var(--sp-6) 0 !important;
}
.dt-filter, .dt-length { padding-top: 0 !important; }
.dt-length select, .dt-filter input[type="search"], .dataTables_wrapper select, .dataTables_wrapper input[type="search"] {
  font: inherit; font-size: var(--fs-sm); color: var(--txt); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: .32rem .6rem; outline: none;
}
.dt-filter input[type="search"]:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.dt-paging { padding-bottom: var(--sp-4) !important; }
.dt-paging .paginate_button {
  display: inline-block; min-width: 2rem; text-align: center; margin: 0 .1rem; padding: .32rem 0;
  border-radius: var(--r); color: var(--txt-2) !important; cursor: pointer; border: 0 !important;
}
.dt-paging .paginate_button:hover {
  background: var(--primary-soft) !important; color: var(--c-primary) !important; box-shadow: none;
}
.dt-paging .paginate_button.current {
  background: var(--c-primary) !important; color: var(--on-primary) !important; box-shadow: var(--elev-1);
}
.dt-paging .paginate_button.disabled { opacity: .4; pointer-events: none; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after { display: none; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
  cursor: pointer; position: relative; padding-right: 1.6rem !important;
}
table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { color: var(--c-primary) !important; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after {
  content: "\M006D"; font-family: "Material Design Icons"; font-size: .95rem; opacity: 1;
  position: absolute; right: .5rem; bottom: .7rem;
}
table.dataTable thead .sorting:after { content: "\F0B88"; color: var(--txt-3); } /* sort-variant */
table.dataTable thead .sorting_asc:after { content: "\F005D"; color: var(--c-primary); } /* arrow-up */
table.dataTable thead .sorting_desc:after { content: "\F005E"; color: var(--c-primary); } /* arrow-down */

/* ---------- dropdown ---------- */
.dd { position: relative; }
.dd-menu {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60; min-width: 13rem;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--elev-pop);
  padding: .35rem; display: none;
}
.dd.open .dd-menu { display: block; animation: ddy .16s ease; }
@keyframes ddy { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dd-menu a, .dd-menu button.mi {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  padding: .55rem .75rem; border-radius: var(--r-sm); border: 0; background: none;
  color: var(--txt-2); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-decoration: none;
}
.dd-menu a:hover, .dd-menu button.mi:hover { background: var(--surface-2); color: var(--c-primary); }
.dd-menu .sep { border-top: 1px solid var(--line); margin: .3rem .5rem; }
.dd-menu .head { padding: .6rem .75rem .3rem; }

/* ---------- modal ---------- */
.modal-bd {
  position: fixed; inset: 0; z-index: 100; background: var(--overlay);
  display: none; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto;
}
.modal-bd.open { display: flex; }
.modal-card {
  width: min(64rem, 100%); background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--elev-pop); animation: pop .18s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--line); }
.modal-head .x { margin-left: auto; }
.modal-body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sp-2) var(--sp-5); }
.spec { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); }
.spec b { color: var(--txt); font-weight: 600; } .spec span { color: var(--txt-2); text-align: right; }
.gal-main { width: 100%; height: 22rem; object-fit: contain; background: var(--surface-2); border-radius: var(--r); }
.gal-strip { display: flex; gap: .5rem; margin-top: .6rem; overflow-x: auto; padding-bottom: .3rem; }
.gal-strip img { width: 5rem; height: 3.5rem; object-fit: cover; border-radius: var(--r-sm); cursor: pointer; opacity: .7; transition: .15s; flex: 0 0 auto; }
.gal-strip img:hover, .gal-strip img.on { opacity: 1; outline: 2px solid var(--c-primary); }

/* ---------- stat kartica (Materio analytics) ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.stat-card { display: flex; flex-direction: column; gap: .35rem; }
.stat-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.stat-card .lbl { font-size: var(--fs-sm); }
.stat-card .val { font-size: var(--fs-stat); font-weight: 600; line-height: 1.2; }
.stat-card .delta { font-size: var(--fs-xs); font-weight: 600; display: inline-flex; align-items: center; gap: .15rem; }
.stat-card .spark { margin: 0 calc(-1 * var(--sp-6)) calc(-1 * var(--sp-5)); height: 42px; }
.icon-ico.small { width: 2.125rem; height: 2.125rem; border-radius: var(--r); font-size: 1.15rem; }

/* chart posude */
.chart { width: 100%; }

/* grid raspored unutar dashboarda (Materio 12-stupaca) */
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-5); }
.g-12 { grid-column: span 12; } .g-8 { grid-column: span 8; } .g-7 { grid-column: span 7; }
.g-6 { grid-column: span 6; } .g-5 { grid-column: span 5; } .g-4 { grid-column: span 4; } .g-3 { grid-column: span 3; }

/* ---------- log / timeline detalji ---------- */
.logdetail td { padding: 0 .875rem !important; border-bottom: 1px solid var(--line); }
.logdetail pre {
  margin: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--sp-3); max-height: 14rem; overflow: auto; color: var(--txt-2);
}
.lvl { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.lvl-error { background: var(--error-soft); color: var(--c-error); }
.lvl-warn { background: var(--warning-soft); color: var(--c-warning); }
.lvl-info { background: var(--info-soft); color: var(--c-info); }
.lvl-phase { background: var(--primary-soft); color: var(--c-primary); }

/* toast */
#toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 200; display: flex; flex-direction: column; gap: .5rem; }
.toast-i {
  background: var(--surface); color: var(--txt); box-shadow: var(--elev-pop); border-radius: var(--r);
  padding: .7rem 1rem; font-size: var(--fs-sm); display: flex; gap: .5rem; align-items: center;
  animation: pop .18s ease; max-width: 22rem;
}

/* ---- horizontalni scroll tablice na uskim ekranima ---- */
.dt-layout-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dt-layout-table::-webkit-scrollbar { height: 7px; }

/* postavke red */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .9rem .25rem; border-top: 1px solid var(--line); }
.set-row:first-of-type { border-top: 0; }

/* vrijednosti u stupcima u jednoj liniji, brojke desno */
.dt-layout-table th, .dt-layout-table td { white-space: nowrap; }
.dt-layout-table td .dt-cell-strong { display: inline-block; max-width: 20rem; overflow: hidden;
  text-overflow: ellipsis; vertical-align: bottom; }
.dt-layout-table td.num-c { text-align: end; font-variant-numeric: tabular-nums; }
.dt-layout-table th.num-h { text-align: end; }
#tbl-log td.c-msg { white-space: normal; }

/* ---------- analitika cijena / modal kontekst ---------- */
.kv-row { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.kv-row > div { display: flex; flex-direction: column; gap: .1rem; }
.kv-row > div > span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.kv-row > div > b { font-size: var(--fs-md); }
.mini-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.mini-table th { text-align: left; color: var(--txt-3); font-weight: 500; font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .04em; padding: .35rem .5rem; border-bottom: 1px solid var(--border); }
.mini-table td { padding: .38rem .5rem; border-bottom: 1px solid var(--border-soft); }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table tr.clickable:hover { background: var(--surface-2); cursor: pointer; }
.mini-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ana-hero { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--sp-3); }
.ana-hero > .card { padding: var(--sp-4); }
.ana-hero .lbl { font-size: var(--fs-xs); }
.ana-hero .v { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 640px) {
  .ana-hero { grid-template-columns: repeat(2, 1fr); }
  .kv-row { gap: var(--sp-3); }
}

/* naslov u modalu: najviše 2 retka (dugi naslovi oglasa) */
.modal-title-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; line-height: 1.25; }
@media (max-width: 640px) {
  .modal-head { padding: var(--sp-3) var(--sp-4); gap: .5rem; }
  .modal-body { padding: var(--sp-4); }
  .gal-main { height: 15rem; }
  .modal-title-t { -webkit-line-clamp: 3; font-size: var(--fs-sm); }
}