/* Komunalio - anonimizirani mockup sučelja (scoped pod .kapp) */
.kframe {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 70px rgba(31,42,61,.16), 0 8px 24px rgba(31,42,61,.08);
}
.hero--dark .kframe { border-color: color-mix(in srgb,#fff 14%, transparent); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.kframe__bar {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; background: #eef0f4; border-bottom: 1px solid #e2e5ea;
}
.kframe__dots { display: flex; gap: 7px; }
.kframe__dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.kframe__url {
  flex: 1; font-family: var(--font-mono); font-size: 12px; color: #9097a5;
  background: #fff; border: 1px solid #e2e5ea; border-radius: 6px; padding: 5px 12px;
  text-align: center; max-width: 320px; margin: 0 auto;
}

/* ===== app shell ===== */
.kapp { display: grid; grid-template-columns: 210px 1fr; background: #f6f7f9; font-family: var(--font-body); color: #1f2433; }
.kapp * { box-sizing: border-box; }

/* sidebar */
.kside { background: #fff; border-right: 1px solid #ecedf1; padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; min-height: 560px; }
.kside__logo { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: #1f2433; padding: 2px 4px 6px; }
.kside__logo b { color: #2f6bff; font-weight: 800; }
.kside__org { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 0 4px 12px; border-bottom: 1px solid #f0f1f4; }
.kside__orglogo { width: 42px; height: 42px; border-radius: 8px; background: linear-gradient(135deg,#3a86d4,#2f6bff); display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.kside__orgname { font-size: 11.5px; color: #8b92a3; }
.kside__group { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #aab0bd; padding: 8px 8px 4px; }
.knav { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 7px; font-size: 13px; font-weight: 500; color: #565e6e; cursor: default; position: relative; }
.knav svg { width: 16px; height: 16px; flex: none; color: #98a0ae; }
.knav--active { background: #eef3ff; color: #2f6bff; font-weight: 600; }
.knav--active svg { color: #2f6bff; }
.knav__badge { margin-left: auto; background: #f0453e; color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 5px; }
.kside__user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid #f0f1f4; }
.kside__avatar { width: 30px; height: 30px; border-radius: 50%; background: #2f6bff; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.kside__uname { font-size: 12.5px; font-weight: 600; color: #1f2433; }
.kside__urole { font-size: 11px; color: #8b92a3; }

/* main */
.kmain { padding: 22px 24px 28px; overflow: hidden; }
.kmain__greet { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #1f2433; }
.kmain__date { font-size: 12.5px; color: #8b92a3; margin-top: 3px; }

.knotice { margin-top: 16px; background: #fffbef; border: 1px solid #f3e4b8; border-left: 3px solid #e6a417; border-radius: 8px; padding: 13px 15px; }
.knotice__t { font-size: 13px; font-weight: 700; color: #9a7407; }
.knotice__d { font-size: 12px; color: #9a8033; margin-top: 3px; line-height: 1.45; }

.kalert { margin-top: 14px; display: grid; grid-template-columns: repeat(4,1fr); gap: 0; background: #fdecec; border: 1px solid #f5cccb; border-radius: 10px; overflow: hidden; }
.kalert__c { padding: 16px 18px; border-right: 1px solid #f5cccb; }
.kalert__c:last-child { border-right: 0; }
.kalert__k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #c9706c; }
.kalert__v { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #d3453f; margin-top: 5px; }

.klabel { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #aab0bd; margin: 20px 0 9px; }
.kcards { display: grid; gap: 12px; }
.kcards--3 { grid-template-columns: repeat(3,1fr); }
.kcards--2 { grid-template-columns: repeat(2,1fr); }
.kcard { background: #fff; border: 1px solid #ecedf1; border-radius: 10px; padding: 15px 16px; display: flex; align-items: center; gap: 13px; }
.kcard__ic { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.kcard__ic svg { width: 18px; height: 18px; }
.kcard__v { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: #1f2433; line-height: 1; }
.kcard__k { font-size: 12px; color: #8b92a3; margin-top: 4px; }

/* tone helpers */
.tone-blue { background: #eef3ff; color: #2f6bff; }
.tone-amber { background: #fdf3df; color: #e0930f; }
.tone-green { background: #e7f7ee; color: #1f9d57; }
.tone-violet { background: #efeaff; color: #6c4cd4; }
.tone-slate { background: #eef0f4; color: #6b7488; }
.tone-red { background: #fdecec; color: #d3453f; }

/* bottom: team + activity */
.kbottom { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-top: 16px; }
.kpanel { background: #fff; border: 1px solid #ecedf1; border-radius: 10px; padding: 16px 18px; }
.kpanel__t { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #1f2433; margin-bottom: 12px; }
.kteam__row { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-top: 1px solid #f3f4f7; }
.kteam__row:first-of-type { border-top: 0; }
.kteam__av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.kteam__name { font-size: 12.5px; font-weight: 600; color: #1f2433; }
.kteam__status { font-size: 10.5px; color: #aab0bd; }
.kteam__num { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 15px; }

/* activity chart */
.kchart { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 8px 4px 0; }
.kchart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.kchart__bars { display: flex; align-items: flex-end; gap: 3px; height: 100%; width: 100%; justify-content: center; }
.kchart__bars span { width: 7px; border-radius: 3px 3px 0 0; }
.kchart__lbl { font-family: var(--font-mono); font-size: 9.5px; color: #aab0bd; }
.kchart__legend { display: flex; gap: 16px; justify-content: center; margin-top: 10px; }
.kchart__leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #8b92a3; }
.kchart__leg i { width: 8px; height: 8px; border-radius: 50%; }

/* ===== field orders mockup ===== */
.kfo { display: flex; flex-direction: column; gap: 12px; }
.kfo__head { display: flex; align-items: center; justify-content: space-between; }
.kfo__title { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #1f2433; display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.kfo__title svg { width: 18px; height: 18px; flex: none; }
.kfo__count { font-size: 12px; color: #8b92a3; }
.kfo__tabs { display: flex; gap: 7px; flex-wrap: wrap; }
.kfo__tab { font-size: 12px; font-weight: 500; color: #6b7488; padding: 6px 13px; border-radius: 100px; border: 1px solid #e6e8ee; background: #fff; }
.kfo__tab--active { background: #eef3ff; color: #2f6bff; border-color: #cfe0ff; font-weight: 600; }
.korder { background: #fff; border: 1px solid #ecedf1; border-left: 4px solid #1f9d57; border-radius: 10px; padding: 15px 17px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.kbadge2 { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; font-weight: 600; }
.korder__code { font-family: var(--font-mono); font-size: 11px; color: #2f6bff; margin-left: 8px; }
.korder__title { font-family: var(--font-display); font-weight: 800; font-size: 15.5px; color: #1f2433; margin: 7px 0 4px; }
.korder__desc { font-size: 12.5px; color: #6b7488; }
.korder__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; font-size: 11.5px; color: #8b92a3; align-items: center; }
.korder__meta b { color: #565e6e; font-weight: 600; }
.korder__pin::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 1.6px solid #aab0bd; vertical-align: -1px; }
.korder__done { color: #1f9d57; font-weight: 600; }
.korder__done::before { content: "✓"; margin-right: 5px; }
.korder__actions { display: flex; flex-direction: column; gap: 8px; }
.korder__btn { font-size: 11.5px; font-weight: 600; padding: 8px 13px; border-radius: 7px; background: #eef3ff; color: #2f6bff; border: 1px solid #dbe7ff; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.korder__btn--alt { background: #efeaff; color: #6c4cd4; border-color: #e0d8ff; }

@media (max-width: 720px) {
  .kapp { grid-template-columns: 1fr; }
  .kside { display: none; }
  .kalert { grid-template-columns: 1fr 1fr; }
  .kalert__c:nth-child(2) { border-right: 0; }
  .kcards--3, .kcards--2 { grid-template-columns: 1fr; }
  .kbottom { grid-template-columns: 1fr; }
  .korder { grid-template-columns: 1fr; }
  .korder__actions { flex-direction: row; }
}