:root {
  --navy-950: #0d1322;
  --navy-900: #151f34;
  --navy-800: #202d49;
  --navy-700: #30415f;
  --teal-700: #2626c7;
  --teal-600: #3434df;
  --teal-500: #4a4af1;
  --teal-100: #e9eaff;
  --teal-50: #f5f5ff;
  --ink: #202a3b;
  --muted: #707888;
  --line: #e2e5eb;
  --surface: #ffffff;
  --canvas: #f5f6f8;
  --danger: #c24a46;
  --warning: #b7791f;
  --success: #26745e;
  --shadow-lg: 0 24px 70px rgba(17, 24, 42, .16);
  --shadow-sm: 0 8px 24px rgba(21, 31, 52, .07);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
}

/* Closed positions and vessel ledger */
[hidden] { display: none !important; }
.slot-free-wrap { position: relative; min-width: 0; }
.slot-free-wrap > .slot { width: 100%; height: 100%; }
.slot-block-button { position: absolute; top: 5px; right: 5px; width: 27px; height: 27px; border: 1px solid #d5dbe4; border-radius: 7px; display: grid; place-items: center; padding: 0; background: #fff; color: #6c7787; }
.slot-block-button:hover { background: #fff1dc; color: #87520d; }
.slot-block-button svg { width: 14px; height: 14px; }
.slot.slot--blocked { border: 1px solid #ccb895; background: repeating-linear-gradient(135deg,#faf3e8,#faf3e8 9px,#f4ebdb 9px,#f4ebdb 18px); color: #745224; cursor: pointer; }
.slot--blocked > svg { width: 17px; height: 17px; }
.slot.slot--blocked strong { color: #745224; }
.slot.slot--blocked small { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; color: #7c6644; }
.legend-dot.legend-dot--blocked { background: #d6ad6d; }
.zone-capacity { max-width: 170px; }
.closed-position-list { display: grid; gap: 8px; margin-top: 18px; }
.closed-position-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.ledger-quick-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.ledger-filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 16px 0; }
.ledger-filters .search-field { grid-column: 1 / -1; }
.ledger-filters > label:not(.search-field) { display: grid; gap: 6px; color: var(--muted); font-size: 14px; }
.ledger-filters input[type=date], .archive-table input, .archive-table select, .archive-table textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px; color: var(--ink); font-size: 14px; }
.ledger-count { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.ledger-entry { display: grid; grid-template-columns: 105px minmax(0,1fr) auto; gap: 13px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.ledger-entry__date { display: flex; flex-direction: column; align-items: start; gap: 6px; font-size: 12px; color: var(--muted); }
.ledger-entry time { color: var(--teal-700); font-size: 14px; font-weight: 700; }
.ledger-entry__body { display: grid; gap: 5px; align-content: start; min-width: 0; }
.ledger-entry__body > strong { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.ledger-entry__body p { margin: 0; white-space: pre-wrap; color: #616b7d; font-size: 14px; line-height: 1.5; }
.ledger-entry__body small { color: var(--muted); font-size: 14px; }
.ledger-entry__body .inline-link { justify-self: start; font-size: 14px; }
.ledger-entry__amount { display: grid; align-content: start; justify-items: end; gap: 6px; white-space: nowrap; font-size: 14px; }
.archive-tag, .billing-tag { display: inline-flex; width: fit-content; padding: 4px 7px; border-radius: 6px; background: #eef0f4; color: #596476; font-size: 12px; font-weight: 700; }
.billing-tag { color: #236947; background: #e8f4ed; }
.notice-block { display: block; margin: 10px 0 16px; padding: 14px 16px; border: 1px solid #dfe3ef; border-radius: 12px; color: #4f5a70; background: #f7f8fc; font-size: 14px; line-height: 1.55; }
.notice-block p { margin: 6px 0; }
.notice-block a { color: var(--teal-700); }
.task-list { display: grid; margin-bottom: 18px; }
.task-row { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: start; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.task-state { color: #9da6b5; padding-top: 2px; }
.task-state svg { width: 22px; }
.task-row.is-complete .task-state { color: var(--success); }
.task-row > div:nth-child(2) { min-width: 0; display: grid; gap: 6px; }
.task-row strong { font-size: 16px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-row small { color: var(--muted); font-size: 14px; }
.task-row p { margin: 0; color: #5c6678; font-size: 14px; white-space: pre-wrap; }
.task-row__actions { display: grid; gap: 7px; justify-items: end; }
.draft-task { display: grid; grid-template-columns: minmax(0,1fr) 36px; gap: 8px; align-items: center; margin: 10px 0; }
.draft-task textarea { width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 10px; font: inherit; color: var(--ink); resize: vertical; }
.modal.modal--wide { width: min(1420px,100%); }
.import-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 14px; }
.import-file-button { cursor: pointer; }
.archive-table { min-width: 1060px; }
.archive-table td { vertical-align: top; padding: 8px 6px; }
.archive-table th { padding-inline: 6px; }
.archive-table td:nth-child(1), .archive-table td:nth-child(8) { width: 45px; }
.archive-table td:nth-child(2) { width: 155px; }
.archive-table td:nth-child(3) { width: 145px; }
.archive-table td:nth-child(4) { min-width: 280px; }
.archive-table td:nth-child(5) { width: 155px; }
.archive-table td:nth-child(6), .archive-table td:nth-child(7) { width: 105px; }
.archive-table input[type=checkbox], .billing-table input[type=checkbox] { width: 19px; height: 19px; accent-color: var(--teal-700); }
.archive-table-wrap { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.archive-table thead { position: sticky; top: 0; z-index: 1; background: #f5f7fa; }
.billing-total { padding: 16px; margin: 12px 0; display: flex; justify-content: space-between; gap: 15px; align-items: center; border-radius: 12px; background: var(--teal-50); font-size: 14px; }
.billing-total > strong { font: 800 25px Manrope,sans-serif; }
.billing-table { min-width: 720px; }
.billing-table td { vertical-align: top; }
.billing-table td:nth-child(2) > strong { display: block; margin-top: 4px; }
.document-list { display: grid; gap: 8px; }
.document-list > div { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.document-list > div > span { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 150px; }
.document-list strong { overflow-wrap: anywhere; font-size: 14px; }
.document-list svg { flex: 0 0 20px; width: 20px; color: var(--teal-700); }
.document-preview { display: grid; gap: 15px; }
.document-preview iframe { width: 100%; height: 65vh; border: 1px solid var(--line); border-radius: 10px; }
.document-preview img { max-width: 100%; max-height: 65vh; object-fit: contain; }
.vessel-status.vessel-status--neaktivno { color: #68747a; background: #edf0f1; }
.movement-card-actions { display: flex; gap: 12px; align-items: center; }
@media (max-width:760px) {
  .movement-card-actions, .movement-card > .text-button { grid-column: 3 / -1; justify-self: start; }
  .modal.modal--wide { width: 100%; }
  .ledger-entry { grid-template-columns: 86px minmax(0,1fr); gap: 10px; }
  .ledger-entry__amount { grid-column: 2; display: flex; justify-content: space-between; }
  .task-row { grid-template-columns: 23px minmax(0,1fr); }
  .task-row__actions { grid-column: 2; display: flex; justify-content: flex-end; }
  .import-tools > * { width: 100%; }
  .billing-review .form-grid--three { grid-template-columns: 1fr; }
  .zone-capacity { max-width: 130px; }
}
@media (max-width:420px) {
  .ledger-quick-actions { grid-template-columns: 1fr; }
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); font-family: "DM Sans", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
.is-hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.login-view { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.08fr) minmax(440px, .92fr); }
.login-story { position: relative; overflow: hidden; min-height: 100vh; padding: 44px clamp(40px, 5vw, 84px); display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(145deg, var(--navy-950), var(--navy-800)); }
.login-story::before { content: ""; position: absolute; width: 700px; height: 700px; border: 110px solid rgba(59,168,170,.14); border-radius: 50%; right: -370px; bottom: -290px; }
.login-story::after { content: ""; position: absolute; width: 460px; height: 140px; border-top: 2px solid rgba(255,255,255,.12); border-radius: 50%; left: -80px; bottom: 170px; transform: rotate(-8deg); }
.login-story__top, .login-story__content, .login-story__foot { position: relative; z-index: 1; }
.login-story__top { display: flex; align-items: center; gap: 16px; }
.login-logo { width: 84px; height: 48px; object-fit: contain; padding: 5px 8px; border-radius: 10px; background: #fff; }
.login-brand { font-family: Manrope, sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .14em; }
.login-story__content { max-width: 720px; padding: 70px 0; }
.eyebrow { display: inline-block; margin-bottom: 14px; color: var(--teal-700); font-size: 12px; font-weight: 800; letter-spacing: .15em; }
.eyebrow--light { color: #7cd0d0; }
.login-story h1 { max-width: 700px; margin: 0; font-family: Manrope, sans-serif; font-size: clamp(42px, 5.1vw, 72px); line-height: 1.04; letter-spacing: -.045em; }
.login-story__content > p { max-width: 640px; margin: 28px 0 0; color: rgba(255,255,255,.72); font-size: 18px; line-height: 1.7; }
.login-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); }
.login-points div { display: flex; flex-direction: column; gap: 5px; }
.login-points strong { font-family: Manrope, sans-serif; font-size: 26px; }
.login-points span { color: rgba(255,255,255,.62); font-size: 13px; }
.login-story__foot { margin: 0; color: rgba(255,255,255,.48); font-size: 13px; }
.login-panel { display: grid; place-items: center; min-height: 100vh; padding: 48px; background: #fff; }
.login-form { width: min(440px, 100%); }
.login-form h2 { margin: 0; font-family: Manrope, sans-serif; font-size: 36px; letter-spacing: -.035em; }
.form-intro { margin: 10px 0 34px; color: var(--muted); }
.field { display: grid; gap: 9px; margin: 18px 0; font-size: 14px; font-weight: 700; color: #425963; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #d7e1e2; border-radius: 12px; padding: 14px 15px; outline: none; color: var(--ink); background: #fff; transition: .2s ease; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(59,168,170,.12); }
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 86px; }
.text-button { border: 0; padding: 6px; color: var(--teal-700); background: transparent; font-size: 13px; font-weight: 800; }
.password-wrap .text-button { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
.primary-button { min-height: 46px; border: 0; border-radius: 12px; padding: 12px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #fff; background: var(--teal-700); font-weight: 800; box-shadow: 0 10px 24px rgba(36,127,131,.2); transition: transform .18s ease, background .18s ease; }
.primary-button:hover { transform: translateY(-1px); background: #1d7074; }
.primary-button--wide { width: 100%; margin-top: 8px; }
.form-error { min-height: 19px; margin: 0 0 4px; color: var(--danger); font-size: 13px; }
.demo-note { display: flex; gap: 12px; margin-top: 24px; padding: 14px; border-radius: 12px; color: #557079; background: var(--teal-50); font-size: 13px; line-height: 1.55; }
.demo-note p { margin: 0; }
.demo-note__icon { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--teal-600); font-weight: 800; }
.mobile-login-brand { display: none; }

.app-view { min-height: 100vh; }
.toast-region { position: fixed; z-index: 1000; right: 24px; bottom: 24px; display: grid; gap: 10px; }
.toast { min-width: 280px; max-width: 380px; padding: 14px 16px; border-radius: 12px; color: #fff; background: var(--navy-900); box-shadow: var(--shadow-lg); animation: toast-in .25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 900px) {
  .login-view { grid-template-columns: 1fr; }
  .login-story { display: none; }
  .login-panel { padding: 28px; }
  .mobile-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; color: var(--navy-900); font-family: Manrope, sans-serif; font-weight: 800; }
  .mobile-login-brand img { width: 64px; }
}

@media (max-width: 520px) {
  .login-panel { align-items: start; padding-top: 32px; }
  .login-form h2 { font-size: 30px; }
  .mobile-login-brand { margin-bottom: 36px; }
}

/* Application shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 286px minmax(0, 1fr); }
.sidebar { position: sticky; z-index: 50; top: 0; height: 100vh; padding: 28px 18px 18px; display: flex; flex-direction: column; color: #fff; background: linear-gradient(180deg, var(--navy-900), #0d2732); }
.sidebar::after { content: ""; position: absolute; inset: auto 0 0; height: 220px; pointer-events: none; background: radial-gradient(circle at 85% 100%, rgba(59,168,170,.16), transparent 66%); }
.sidebar-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; padding: 0 10px 28px; border-bottom: 1px solid rgba(255,255,255,.09); }
.sidebar-logo { width: 62px; height: 42px; padding: 5px 6px; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: #fff; }
.sidebar-logo img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-brand > span:last-child { min-width: 0; display: grid; gap: 3px; }
.sidebar-brand strong { font-family: Manrope, sans-serif; font-size: 14px; white-space: nowrap; }
.sidebar-brand small { color: rgba(255,255,255,.51); font-size: 11px; }
.main-nav { position: relative; z-index: 1; flex: 1; padding: 22px 0; display: grid; align-content: start; gap: 5px; overflow-y: auto; }
.nav-item { width: 100%; min-height: 58px; border: 0; border-radius: 11px; padding: 9px 11px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 11px; text-align: left; color: rgba(255,255,255,.68); background: transparent; transition: .18s ease; }
.nav-item > svg { width: 19px; height: 19px; justify-self: center; }
.nav-item span { min-width: 0; display: grid; gap: 2px; }
.nav-item strong { color: inherit; font-size: 13px; font-weight: 700; }
.nav-item small { overflow: hidden; color: rgba(255,255,255,.37); font-size: 9.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.is-active { color: #fff; background: linear-gradient(100deg, rgba(59,168,170,.28), rgba(59,168,170,.09)); box-shadow: inset 3px 0 var(--teal-500); }
.nav-item.is-active small { color: rgba(255,255,255,.54); }
.sidebar-footer { position: relative; z-index: 1; padding: 14px 8px 4px; border-top: 1px solid rgba(255,255,255,.09); display: grid; grid-template-columns: 36px minmax(0,1fr) 32px 32px; gap: 8px; align-items: center; }
.user-avatar { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--teal-700); font-size: 11px; font-weight: 800; }
.user-meta { min-width: 0; display: grid; gap: 2px; }
.user-meta strong, .user-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta strong { font-size: 11px; }.user-meta small { color: rgba(255,255,255,.45); font-size: 9px; }
.sidebar-scrim { display: none; }
.workspace { min-width: 0; min-height: 100vh; }
.topbar { position: sticky; z-index: 40; top: 0; height: 80px; padding: 0 clamp(24px, 3vw, 48px); border-bottom: 1px solid rgba(20,58,69,.08); display: flex; justify-content: space-between; align-items: center; gap: 24px; background: rgba(243,246,245,.91); backdrop-filter: blur(18px); }
.topbar-title { display: flex; align-items: center; gap: 12px; }
.topbar-title h1 { margin: 2px 0 0; font-family: Manrope, sans-serif; font-size: 19px; letter-spacing: -.02em; }
.topbar-kicker { color: var(--teal-700); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.mobile-menu-button { display: none !important; }
.topbar-tools { min-width: 0; display: flex; align-items: center; gap: 14px; }
.global-search-wrap { position: relative; width: min(360px, 32vw); }
.global-search-wrap > svg { position: absolute; z-index: 1; top: 50%; left: 13px; width: 17px; transform: translateY(-50%); color: #809097; }
.global-search-wrap input { width: 100%; height: 42px; border: 1px solid #dbe4e5; border-radius: 11px; padding: 0 14px 0 40px; outline: none; color: var(--ink); background: rgba(255,255,255,.86); font-size: 12px; }
.global-search-wrap input:focus { border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(59,168,170,.1); }
.global-results { position: absolute; top: calc(100% + 9px); right: 0; left: 0; padding: 8px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-lg); }
.global-results button { width: 100%; border: 0; border-radius: 9px; padding: 9px; display: grid; grid-template-columns: 32px 1fr; gap: 9px; align-items: center; text-align: left; color: var(--ink); background: transparent; }
.global-results button:hover { background: var(--teal-50); }
.global-results button > span:first-child { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--teal-700); background: var(--teal-100); }
.global-results svg { width: 15px; }.global-results button > span:last-child { display: grid; gap: 2px; }.global-results strong { font-size: 11px; }.global-results small { color: var(--muted); font-size: 9px; }.global-results p { margin: 10px; color: var(--muted); font-size: 11px; }
.today-chip { height: 42px; padding: 0 13px; border: 1px solid #dbe4e5; border-radius: 11px; display: flex; align-items: center; gap: 8px; color: #61757d; background: rgba(255,255,255,.7); font-size: 10px; font-weight: 700; white-space: nowrap; }.today-chip svg { width: 15px; }
.page-content { width: min(1600px, 100%); margin: 0 auto; padding: 40px clamp(24px, 3vw, 48px) 64px; }

/* Shared components */
.page-heading { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.page-heading > div:first-child { max-width: 780px; }.page-heading .eyebrow { margin-bottom: 9px; }
.page-heading h2 { margin: 0; font-family: Manrope, sans-serif; font-size: clamp(29px, 3vw, 42px); line-height: 1.08; letter-spacing: -.045em; }
.page-heading p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.secondary-button, .ghost-button { min-height: 43px; border-radius: 11px; padding: 10px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); font-weight: 800; font-size: 12px; }
.secondary-button { border: 1px solid #d7e2e3; background: #fff; box-shadow: 0 4px 14px rgba(15,46,58,.04); }
.secondary-button:hover { border-color: #abc9ca; color: var(--teal-700); }
.secondary-button--small { min-height: 34px; padding: 7px 10px; font-size: 10px; }
.ghost-button { border: 0; background: transparent; }.ghost-button:hover { background: #eef3f3; }
.primary-button svg, .secondary-button svg { width: 16px; height: 16px; }
.icon-button { width: 36px; height: 36px; border: 0; border-radius: 9px; display: inline-grid; place-items: center; color: #60747c; background: transparent; transition: .18s ease; }.icon-button:hover { color: var(--teal-700); background: var(--teal-50); }.icon-button svg { width: 17px; height: 17px; }.icon-button--dark { width: 30px; height: 30px; color: rgba(255,255,255,.53); }.icon-button--dark:hover { color: #fff; background: rgba(255,255,255,.09); }
.panel { border: 1px solid rgba(21,60,76,.08); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-head { padding: 22px 22px 16px; display: flex; justify-content: space-between; align-items: start; gap: 18px; }.panel-head h3 { margin: 3px 0 0; font: 800 19px/1.2 Manrope, sans-serif; letter-spacing: -.025em; }
.section-kicker { color: var(--teal-700); font-size: 9px; font-weight: 800; letter-spacing: .14em; }.count-badge, .section-row > span { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 9px; display: grid; place-items: center; color: var(--teal-700); background: var(--teal-100); font-size: 10px; font-weight: 800; }
.stat-grid { margin-bottom: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }.stat-grid--three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.stat-card { position: relative; min-height: 112px; border: 1px solid rgba(21,60,76,.08); border-radius: 15px; padding: 18px 20px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 14px; text-align: left; color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); }.stat-card:hover:is(button) { border-color: rgba(47,157,160,.42); transform: translateY(-1px); }.stat-card > svg { position: absolute; top: 17px; right: 17px; width: 15px; color: #8da1a6; }.stat-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--teal-700); background: var(--teal-100); }.stat-icon svg { width: 19px; }.stat-card > span:nth-child(2) { min-width: 0; display: grid; align-content: center; gap: 2px; }.stat-card small { color: var(--muted); font-size: 10px; line-height: 1.3; font-style: normal; }.stat-card strong { margin: 1px 0; font: 800 25px/1.08 Manrope, sans-serif; letter-spacing: -.035em; }.stat-card em { color: #60767e; font-size: 10px; line-height: 1.35; font-style: normal; font-weight: 600; }
.stat-card.is-active { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(59,168,170,.12), var(--shadow-sm); }
.summary-strip { margin-bottom: 18px; border: 1px solid rgba(21,60,76,.08); border-radius: 14px; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; box-shadow: var(--shadow-sm); }.summary-strip button { min-height: 78px; border: 0; border-right: 1px solid var(--line); padding: 15px 20px; display: flex; align-items: baseline; gap: 9px; text-align: left; color: var(--ink); background: transparent; }.summary-strip button:last-child { border-right: 0; }.summary-strip button:hover { background: var(--teal-50); }.summary-strip strong { font: 800 24px Manrope, sans-serif; }.summary-strip span { color: var(--muted); font-size: 10px; }
.list-panel { overflow: hidden; }.list-toolbar { min-height: 70px; padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }.list-toolbar--wrap { flex-wrap: wrap; }.search-field { position: relative; width: min(520px, 100%); }.search-field--grow { flex: 1; }.search-field > svg { position: absolute; top: 50%; left: 12px; width: 16px; transform: translateY(-50%); color: #87979d; }.search-field input { width: 100%; height: 42px; border: 1px solid #dbe4e5; border-radius: 10px; padding: 0 13px 0 38px; outline: none; background: #fafdfe; font-size: 11px; }.search-field input:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(59,168,170,.1); }.select-control { min-width: 160px; height: 42px; border: 1px solid #dbe4e5; border-radius: 10px; padding: 0 34px 0 12px; color: #405c66; background: #fff; font-size: 11px; }
.table-wrap { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; min-width: 980px; }.data-table th { padding: 12px 16px; text-align: left; color: #819096; background: #f8faf9; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.data-table td { padding: 14px 16px; border-top: 1px solid #edf1f1; vertical-align: middle; font-size: 11px; }.data-table td > small, .data-table td span > small { margin-top: 3px; display: block; color: #8a989d; font-size: 9px; }.clickable-row { cursor: pointer; transition: background .16s ease; }.clickable-row:hover { background: #f7fbfa; }.record-title { min-width: 220px; display: flex; align-items: center; gap: 11px; }.record-title > span:last-child { display: grid; }.record-title strong { font-size: 12px; }.vessel-thumb, .article-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; color: var(--teal-700); background: var(--teal-100); }.vessel-thumb img { width: 100%; height: 100%; object-fit: cover; }.vessel-thumb svg, .article-icon svg { width: 17px; }.cell-strong { display: block; font-size: 10.5px; }.position-pill { padding: 5px 8px; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px; color: #49636c; background: #edf3f3; font-size: 9px; font-weight: 700; }.position-pill svg { width: 12px; }.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }.code-count { margin-top: 4px; display: inline-block; color: var(--teal-700); font-size: 8px; }.stock-value { display: inline-grid; gap: 2px; }.stock-value__current { display: flex; align-items: baseline; gap: 5px; }.stock-value strong { font: 800 19px Manrope, sans-serif; }.stock-value em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 700; }.stock-value.is-low { color: var(--danger); }.stock-value small { margin: 0 !important; line-height: 1.35; }.stock-value.is-low small, .stock-value.is-low em { color: #a85a54; }
.empty-state { min-height: 220px; padding: 32px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }.empty-state svg { width: 30px; color: #9db2b7; }.empty-state h3 { margin: 10px 0 3px; color: var(--ink); }.empty-state p { margin: 0; font-size: 11px; }.empty-state.compact { min-height: 100px; padding: 18px; }

/* Dashboard */
.dashboard-grid { display: grid; grid-template-columns: 1.16fr .84fr; gap: 18px; align-items: start; }.attention-list, .mini-order-list { padding: 0 12px 12px; display: grid; }.attention-item { width: 100%; min-height: 66px; border: 0; border-top: 1px solid #edf1f1; padding: 10px; display: grid; grid-template-columns: 36px 1fr 18px; align-items: center; gap: 10px; text-align: left; color: var(--ink); background: transparent; }.attention-item:hover { background: #f8fbfa; }.attention-item > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }.attention-item strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.attention-item small { color: var(--muted); font-size: 9px; }.attention-item > svg { width: 14px; color: #a4b0b3; }.attention-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #9a6515; background: #fff1d8; }.attention-icon--visok { color: var(--danger); background: #fde9e7; }.attention-icon--stock { color: #87589b; background: #f4eafd; }.attention-icon svg { width: 15px; }
.timeline-list { padding: 0 20px 20px; }.timeline-entry { min-height: 54px; display: grid; grid-template-columns: 44px 12px 1fr auto; align-items: center; gap: 8px; }.timeline-entry time { color: #597079; font-size: 9px; font-weight: 800; }.timeline-dot { width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: var(--teal-600); box-shadow: 0 0 0 2px rgba(59,168,170,.18); }.timeline-dot--departure { background: #cf765e; }.timeline-dot--work { background: #7f64a2; }.timeline-entry > div { min-width: 0; display: grid; gap: 2px; }.timeline-entry strong { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }.timeline-entry small { color: var(--muted); font-size: 9px; }
.capacity-list { padding: 0 12px 12px; }.capacity-row { width: 100%; min-height: 58px; border: 0; border-top: 1px solid #edf1f1; padding: 9px; display: grid; grid-template-columns: 34px minmax(100px,1fr) minmax(80px,1fr) 24px 38px; align-items: center; gap: 9px; text-align: left; color: var(--ink); background: transparent; }.capacity-row:hover { background: #f8fbfa; }.zone-mark { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--teal-700); background: var(--teal-100); font-size: 8px; font-weight: 800; }.capacity-name { display: grid; gap: 2px; }.capacity-name strong { font-size: 10px; }.capacity-name small, .capacity-row > small { color: var(--muted); font-size: 8px; }.capacity-row > strong { font-size: 10px; text-align: right; }.progress-track { height: 5px; border-radius: 99px; overflow: hidden; background: #e7eded; }.progress-track span { height: 100%; display: block; border-radius: inherit; background: var(--teal-600); }
.mini-order-list button { width: 100%; min-height: 57px; border: 0; border-top: 1px solid #edf1f1; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; color: var(--ink); background: transparent; }.mini-order-list button:hover { background: #f8fbfa; }.mini-order-list button > span:first-child { display: grid; gap: 2px; }.mini-order-list strong { font-size: 10.5px; }.mini-order-list small { color: var(--muted); font-size: 8.5px; }

/* Statuses */
.status-badge, .service-status-badge, .vessel-status, .priority-badge, .type-badge, .winter-badge, .code-badge, .danger-badge, .success-badge { width: max-content; border-radius: 99px; display: inline-flex; align-items: center; gap: 5px; font-size: 8.5px; font-weight: 800; white-space: nowrap; }
.status-badge { padding: 5px 8px; color: #526a73; background: #edf2f2; }.status-badge i { width: 6px; height: 6px; border-radius: 50%; background: #7b8e95; }.status-badge--u-radu { color: #216d70; background: #e0f3f2; }.status-badge--u-radu i { background: var(--teal-600); }.status-badge--ceka-dijelove { color: #946318; background: #fff1d7; }.status-badge--ceka-dijelove i { background: #d29637; }.status-badge--zavrsen { color: #2c705d; background: #e5f3ed; }.status-badge--zavrsen i { background: #438a76; }
.service-status-badge { padding: 5px 8px; color: #526a73; background: #edf2f2; }.service-status-badge i { width: 6px; height: 6px; border-radius: 50%; background: #7b8e95; }.service-status-badge--u-radu, .service-status-badge--u-izradi { color: #946318; background: #fff1d7; }.service-status-badge--u-radu i, .service-status-badge--u-izradi i { background: #d29637; }.service-status-badge--zavrseno, .service-status-badge--izradena, .service-status-badge--postavljena { color: #2c705d; background: #e5f3ed; }.service-status-badge--zavrseno i, .service-status-badge--izradena i, .service-status-badge--postavljena i { background: #438a76; }.service-status-badge--otkazano { color: #a04b46; background: #fce8e6; }.service-status-badge--otkazano i { background: #c45e58; }
.vessel-status { padding: 5px 8px; color: #536d76; background: #edf2f3; }.vessel-status--zimovnik { color: #2b6f78; background: #dff2f1; }.vessel-status--servis { color: #875e1e; background: #fff0d4; }.vessel-status--najavljen { color: #67548a; background: #efe9f8; }.vessel-status--neaktivno { color: #68747a; background: #edf0f1; }
.priority-badge { padding: 4px 7px; color: #64757b; background: #eef2f2; }.priority-badge--visok { color: #ad413d; background: #fde7e5; }.priority-badge--srednji { color: #946318; background: #fff0d2; }.priority-badge--nizak { color: #3e7465; background: #e4f1ec; }

/* Movements */
.segmented-control { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: #edf2f2; }.segmented-control input { position: absolute; opacity: 0; }.segmented-control span { min-height: 32px; padding: 7px 12px; border-radius: 8px; display: grid; place-items: center; color: #73858b; font-size: 9.5px; font-weight: 800; cursor: pointer; }.segmented-control input:checked + span { color: var(--ink); background: #fff; box-shadow: 0 2px 8px rgba(16,46,58,.1); }
.movement-list { padding: 5px 18px 18px; display: grid; }.movement-card { min-height: 92px; border-bottom: 1px solid #e9eeee; display: grid; grid-template-columns: 48px 36px minmax(170px,1.2fr) 80px minmax(150px,.8fr) auto; align-items: center; gap: 14px; }.movement-card:last-child { border-bottom: 0; }.movement-card.is-complete { opacity: .74; }.movement-date { display: grid; text-align: center; }.movement-date span { font: 800 21px Manrope, sans-serif; }.movement-date small { color: var(--muted); font-size: 8px; text-transform: uppercase; }.movement-direction { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--teal-700); background: var(--teal-100); }.movement-direction--out { color: #a65b47; background: #fae8e2; }.movement-direction svg { width: 16px; }.movement-main { min-width: 0; display: grid; gap: 2px; }.movement-main > span { color: var(--teal-700); font-size: 8px; font-weight: 800; text-transform: uppercase; }.movement-main button { width: max-content; max-width: 100%; border: 0; padding: 0; overflow: hidden; text-align: left; color: var(--ink); background: transparent; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }.movement-main small, .movement-time small { color: var(--muted); font-size: 9px; }.movement-time { display: grid; gap: 2px; }.movement-time strong { font-size: 12px; }.movement-note { display: flex; align-items: center; gap: 7px; color: #71858c; font-size: 9px; }.movement-note svg { flex: 0 0 auto; width: 14px; }.complete-mark { display: flex; align-items: center; gap: 5px; color: var(--success); font-size: 9px; font-weight: 800; }.complete-mark svg { width: 13px; }

/* Winter map */
.winter-summary { margin-bottom: 18px; border: 1px solid rgba(21,60,76,.08); border-radius: 15px; display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; background: #fff; box-shadow: var(--shadow-sm); }.winter-summary > div { min-height: 96px; padding: 17px 22px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 14px; }.winter-summary > div:last-child { border-right: 0; }.winter-summary > div > svg { width: 34px; height: 34px; padding: 8px; border-radius: 10px; color: var(--teal-700); background: var(--teal-100); }.winter-summary div > span:last-child { display: grid; gap: 3px; }.winter-summary strong { font-size: 11px; }.winter-summary small { color: var(--muted); font-size: 9px; line-height: 1.4; }.winter-ring { --value: 0; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(circle 23px, #fff 95%, transparent 100%), conic-gradient(var(--teal-600) calc(var(--value) * 1%), #e6eeee 0); }.winter-ring strong { font: 800 17px Manrope, sans-serif; }.winter-ring small { font-size: 7px; }
.selection-banner { margin-bottom: 14px; padding: 12px 16px; border: 1px solid rgba(47,157,160,.25); border-radius: 11px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #31646a; background: var(--teal-50); font-size: 10px; }.selection-banner > span { display: flex; align-items: center; gap: 7px; }.selection-banner svg { width: 15px; }
.selection-banner__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; }
.selection-banner__actions .secondary-button { background: rgba(255,255,255,.82); }
.floorplan { border: 1px solid rgba(21,60,76,.08); border-radius: 18px; padding: 22px; background: #fff; box-shadow: var(--shadow-sm); }.floorplan-head { margin-bottom: 19px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }.floorplan-head h3 { margin: 3px 0 0; font: 800 22px Manrope, sans-serif; }.floorplan-head p { max-width: 720px; margin: 7px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }.map-legend { display: flex; gap: 15px; color: var(--muted); font-size: 8.5px; }.map-legend span { display: flex; align-items: center; gap: 5px; }.legend-dot { width: 8px; height: 8px; border-radius: 3px; background: #edf2f2; }.legend-dot--occupied { background: var(--teal-600); }.legend-dot--selected { background: #df9b38; }
.zone-layout { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }.zone-card { min-width: 0; border: 1px solid #dfe7e8; border-radius: 13px; padding: 14px; background: #fafcfb; }.zone-card header { margin-bottom: 12px; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; }.zone-code { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--navy-800); font-size: 9px; font-weight: 800; }.zone-card header > span:nth-child(2) { display: grid; gap: 2px; }.zone-card header strong { font-size: 11px; }.zone-card header small { color: var(--muted); font-size: 8px; }.zone-capacity { display: grid; text-align: right; }.zone-capacity strong { font: 800 15px Manrope, sans-serif !important; }.zone-slots { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }.zone-slots--yard { grid-template-columns: repeat(5, minmax(0,1fr)); }.slot { position: relative; min-width: 0; min-height: 62px; border-radius: 8px; padding: 7px; overflow: hidden; text-align: left; }.slot--free { border: 1px dashed #cad7d9; color: #8c9b9f; background: #fff; }.slot--free:hover, .slot--free.is-drop-target { border-color: var(--teal-500); color: var(--teal-700); background: var(--teal-50); }.slot span { display: block; font-size: 7px; font-weight: 800; letter-spacing: .04em; }.slot small { display: block; margin-top: 4px; font-size: 7px; }.slot--occupied { border: 1px solid #2d8e91; color: #fff; background: linear-gradient(145deg, #2b8e91, #237276); cursor: grab; box-shadow: 0 5px 12px rgba(36,127,131,.18); }.slot--occupied strong { margin-top: 8px; display: block; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.slot--occupied small { color: rgba(255,255,255,.65); }.slot--occupied.is-selected { border-color: #c27c14; background: linear-gradient(145deg, #d79a3d, #b97918); box-shadow: 0 0 0 3px rgba(215,154,61,.18); }.slot--occupied.is-dragging { opacity: .45; }.slot-info { position: absolute; top: 4px; right: 4px; width: 19px; height: 19px; border: 0; border-radius: 5px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.14); }.slot-info svg { width: 10px; }

/* Work order board */
.order-stats { margin-bottom: 17px; border: 1px solid rgba(21,60,76,.08); border-radius: 14px; display: grid; grid-template-columns: repeat(4,1fr); background: #fff; box-shadow: var(--shadow-sm); }.order-stats > div { min-height: 75px; padding: 15px 20px; border-right: 1px solid var(--line); display: grid; grid-template-columns: 9px auto 1fr; align-items: center; gap: 8px; }.order-stats > div:last-child { border-right: 0; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #89989d; }.status-dot--u-radu { background: var(--teal-600); }.status-dot--ceka-dijelove { background: #d3983b; }.status-dot--zavrsen { background: #4c8f77; }.order-stats strong { font: 800 22px Manrope, sans-serif; }.order-stats small { color: var(--muted); font-size: 9px; }.board-toolbar { margin-bottom: 13px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }.board-toolbar > span { color: var(--muted); font-size: 9px; }
.kanban-board { display: grid; grid-template-columns: repeat(4, minmax(220px,1fr)); gap: 12px; overflow-x: auto; padding-bottom: 10px; }.kanban-column { min-height: 440px; border: 1px solid #e0e8e8; border-radius: 13px; padding: 10px; background: #edf2f1; }.kanban-column > header { height: 40px; padding: 0 6px; display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; }.kanban-column > header strong { font-size: 10px; }.kanban-column > header > span:last-child { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #718288; background: #fff; font-size: 8px; font-weight: 800; }.kanban-list { display: grid; gap: 9px; }.kanban-empty { min-height: 80px; border: 1px dashed #ced8d9; border-radius: 10px; display: grid; place-items: center; color: #94a2a6; background: rgba(255,255,255,.4); font-size: 9px; }.order-card { border: 1px solid rgba(21,60,76,.08); border-radius: 11px; padding: 13px; background: #fff; box-shadow: 0 5px 16px rgba(15,46,58,.05); }.order-card__open { width: 100%; border: 0; padding: 0; text-align: left; color: var(--ink); background: transparent; }.order-id { color: var(--teal-700); font: 700 8px ui-monospace, monospace; }.order-card h4 { margin: 7px 0 9px; font-size: 11.5px; line-height: 1.35; }.order-card__open p { margin: 0; display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8.5px; }.order-card__open p svg { width: 12px; }.order-card__meta { margin: 13px 0 10px; display: grid; gap: 6px; }.order-card__meta > span:not(:first-child) { display: flex; align-items: center; gap: 5px; color: #78898f; font-size: 8px; }.order-card__meta svg { width: 11px; }.order-progress { height: 3px; border-radius: 99px; overflow: hidden; background: #e7eded; }.order-progress span { height: 100%; display: block; background: var(--teal-600); }.order-card__footer { margin-top: 11px; display: flex; justify-content: space-between; align-items: center; }.order-card__footer select { height: 30px; max-width: 145px; border: 1px solid #dde5e6; border-radius: 7px; padding: 0 6px; color: #506970; background: #f9fbfb; font-size: 8px; }.order-card__footer .icon-button { width: 30px; height: 30px; }

/* Partners */
.partner-grid { padding: 18px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }.partner-card { min-height: 105px; border: 1px solid #e1e8e8; border-radius: 12px; padding: 13px; display: grid; grid-template-columns: 46px 1fr auto 18px; align-items: center; gap: 12px; text-align: left; color: var(--ink); background: #fff; }.partner-card:hover { border-color: #b8d3d3; background: #f9fcfb; }.partner-avatar { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--navy-800), var(--teal-700)); font: 800 13px Manrope, sans-serif; }.partner-card__main { min-width: 0; display: grid; gap: 3px; }.partner-card__main > strong { margin: 2px 0; overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }.partner-card__main small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8.5px; }.partner-card__main svg { width: 11px; }.type-badge { padding: 3px 6px; color: var(--teal-700); background: var(--teal-100); }.partner-count { display: grid; text-align: center; }.partner-count strong { font: 800 17px Manrope, sans-serif; }.partner-count small { color: var(--muted); font-size: 7px; }.partner-card > svg { width: 14px; color: #a2b0b4; }

/* Drawers */
.drawer-backdrop, .modal-backdrop { position: fixed; z-index: 500; inset: 0; background: rgba(6,27,36,.52); backdrop-filter: blur(3px); animation: fade-in .18s ease; }.drawer { position: absolute; top: 0; right: 0; width: min(680px, 94vw); height: 100%; overflow-y: auto; background: #fff; box-shadow: -20px 0 60px rgba(6,27,36,.22); animation: drawer-in .25s ease; }.drawer-close { position: sticky; z-index: 5; top: 16px; float: right; margin: 16px 16px -52px 0; background: #f1f5f4; }.drawer-content { padding: 40px 34px 60px; }.drawer-hero { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: center; }.drawer-vessel-photo { width: 110px; height: 100px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; color: var(--teal-700); background: linear-gradient(145deg, #e3f3f2, #cbe9e7); }.drawer-vessel-photo img { width: 100%; height: 100%; object-fit: cover; }.drawer-vessel-photo svg { width: 42px; height: 42px; }.drawer-hero h2, .drawer-title-block h2 { margin: 0; max-width: 500px; font: 800 30px/1.08 Manrope, sans-serif; letter-spacing: -.04em; }.drawer-hero p, .drawer-title-block p { margin: 7px 0 10px; color: var(--muted); font-size: 11px; }.drawer-badges { display: flex; flex-wrap: wrap; gap: 6px; }.winter-badge, .code-badge, .danger-badge, .success-badge { padding: 5px 8px; }.winter-badge { color: #2c6d75; background: #dff2f1; }.winter-badge svg, .danger-badge svg, .success-badge svg { width: 11px; }.code-badge { color: #495e66; background: #edf2f2; font-family: ui-monospace, monospace; }.danger-badge { color: #ab4541; background: #fde7e5; }.success-badge { color: #33715f; background: #e3f2ec; }.drawer-actions { margin: 26px 0; padding-bottom: 22px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; }.drawer-section { padding: 22px 0; border-bottom: 1px solid var(--line); }.drawer-section h3 { margin: 0 0 14px; font: 800 15px Manrope, sans-serif; }.detail-grid, .code-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }.detail-item { min-height: 61px; padding: 12px; border-radius: 10px; display: grid; align-content: center; gap: 4px; background: #f5f8f7; }.detail-item small { color: var(--muted); font-size: 8px; }.detail-item strong { overflow-wrap: anywhere; font-size: 10.5px; }.engine-list { display: grid; gap: 8px; }.engine-list > div { padding: 10px 12px; border-radius: 10px; display: flex; align-items: center; gap: 11px; background: #f5f8f7; }.engine-list > div > span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--teal-700); background: var(--teal-100); font-size: 9px; font-weight: 800; }.engine-list p { margin: 0; display: grid; gap: 2px; }.engine-list strong { font-size: 10px; }.engine-list small { color: var(--muted); font-size: 8px; }.section-row { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }.section-row h3 { margin: 0; }.drawer-list, .material-list { display: grid; }.drawer-list > button, .material-list > button { min-height: 57px; border: 0; border-bottom: 1px solid #edf1f1; padding: 8px 3px; display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; color: var(--ink); background: transparent; }.drawer-list button:hover, .material-list button:hover { background: #f8fbfa; }.drawer-list button > span:first-child, .material-list button > span:first-child { display: grid; gap: 3px; }.drawer-list strong, .material-list strong { font-size: 10px; }.drawer-list small, .material-list small { color: var(--muted); font-size: 8px; }.drawer-list > button > svg { width: 14px; color: #a4b0b3; }.history-timeline, .work-log-list, .stock-history { display: grid; }.history-timeline > div, .work-log-list > div, .stock-history > div { position: relative; min-height: 65px; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; }.history-timeline > div::before, .work-log-list > div::before { content: ""; position: absolute; top: 33px; bottom: -4px; left: 16px; width: 1px; background: #dfe8e8; }.history-timeline > div:last-child::before, .work-log-list > div:last-child::before { display: none; }.history-icon, .movement-type { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--teal-700); background: var(--teal-100); }.history-icon svg, .movement-type svg { width: 14px; }.history-timeline > div > span:nth-child(2), .stock-history > div > span:nth-child(2) { display: grid; align-content: start; gap: 3px; }.history-timeline time, .work-log-list time, .stock-history time { color: var(--teal-700); font-size: 7.5px; font-weight: 800; text-transform: uppercase; }.history-timeline strong, .stock-history strong { font-size: 9.5px; }.history-timeline small, .stock-history small { color: var(--muted); font-size: 8px; }.work-log-list p { margin: 3px 0 0; color: #51676f; font-size: 9.5px; line-height: 1.5; }.description-block { margin: 14px 0 0; color: #4e646c; font-size: 10px; line-height: 1.6; }.note-box { margin-top: 22px; padding: 16px; border-left: 3px solid var(--teal-600); border-radius: 3px 10px 10px 3px; background: var(--teal-50); }.note-box strong { color: var(--teal-700); font-size: 9px; text-transform: uppercase; }.note-box p { margin: 5px 0 0; color: #49636b; font-size: 10px; line-height: 1.6; }.drawer-title-block { padding-right: 40px; }.drawer-title-block--avatar { display: flex; align-items: center; gap: 16px; }.partner-avatar--large { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 18px; font-size: 18px; }.inline-link { border: 0; padding: 0; color: var(--teal-700); background: transparent; font-weight: 800; }.stock-hero { margin: 20px 0 0; border-radius: 13px; display: grid; grid-template-columns: 1fr 1fr; color: #fff; background: linear-gradient(135deg, var(--navy-900), var(--navy-700)); overflow: hidden; }.stock-hero > span { min-height: 100px; padding: 19px; display: grid; align-content: center; gap: 3px; }.stock-hero > span + span { border-left: 1px solid rgba(255,255,255,.12); }.stock-hero small { color: rgba(255,255,255,.58); font-size: 8px; }.stock-hero strong { font: 800 23px Manrope, sans-serif; }.stock-hero em { font-size: 10px; font-style: normal; }.stock-history > div { min-height: 60px; align-items: center; }.stock-history > div > strong { align-self: center; }.movement-type--izlaz, .movement-type--otpis { color: #a34c46; background: #fce8e6; }.positive { color: var(--success); }.negative { color: var(--danger); }.muted-text { margin: 0; color: var(--muted); font-size: 10px; }.contact-stack { display: grid; gap: 7px; }.contact-stack > * { min-height: 55px; padding: 10px 12px; border-radius: 9px; display: flex; align-items: center; gap: 11px; color: var(--ink); background: #f5f8f7; text-decoration: none; }.contact-stack > * > svg { width: 17px; color: var(--teal-700); }.contact-stack span { display: grid; gap: 2px; }.contact-stack small { color: var(--muted); font-size: 8px; }.contact-stack strong { font-size: 10px; }
@keyframes drawer-in { from { transform: translateX(100%); } } @keyframes fade-in { from { opacity: 0; } }

/* Modals and forms */
.modal-backdrop { display: grid; place-items: center; padding: 24px; overflow-y: auto; }.modal { width: min(620px, 100%); max-height: calc(100vh - 48px); border-radius: 16px; overflow-y: auto; background: #fff; box-shadow: var(--shadow-lg); }.modal--large { width: min(900px, 100%); }.modal > header { position: sticky; z-index: 2; top: 0; min-height: 77px; padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }.modal > header h2 { margin: 3px 0 0; font: 800 21px Manrope, sans-serif; letter-spacing: -.03em; }.modal-body { padding: 22px; }.modal-form { display: grid; gap: 4px; }.form-section { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }.form-section h3 { margin: 0 0 11px; font: 800 13px Manrope, sans-serif; }.form-grid { display: grid; align-items: start; gap: 0 13px; }.form-grid--two { grid-template-columns: repeat(2,minmax(0,1fr)); }.form-grid--three { grid-template-columns: repeat(3,minmax(0,1fr)); }.form-grid--four { grid-template-columns: repeat(4,minmax(0,1fr)); }.modal-form .field { align-self: start; align-content: start; margin: 8px 0; font-size: 10px; }.modal-form .field > span:first-child { color: #516970; font-size: 9px; }.modal-form .field input, .modal-form .field select, .modal-form .field textarea { border-radius: 9px; padding: 10px 11px; font-size: 10.5px; }.modal-form .field input:not([type="file"]), .modal-form .field select { height: 39px; }.modal-form .field textarea { resize: vertical; line-height: 1.5; }.field-help { color: var(--muted) !important; font-size: 8px !important; font-weight: 400; }.checkbox-card { margin: 8px 0; padding: 12px; border: 1px solid #dce5e5; border-radius: 10px; display: flex; align-items: start; gap: 10px; color: var(--ink); background: #f9fbfb; cursor: pointer; }.checkbox-card input { margin-top: 2px; accent-color: var(--teal-700); }.checkbox-card span { display: grid; gap: 3px; }.checkbox-card strong { font-size: 10px; }.checkbox-card small { color: var(--muted); font-size: 8px; }.modal-actions { position: sticky; bottom: -22px; margin: 12px -22px -22px; padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; background: #fff; }.context-card { margin-bottom: 13px; padding: 12px; border-radius: 10px; display: flex; align-items: center; gap: 10px; color: #fff; background: var(--navy-800); }.context-card > svg { width: 19px; }.context-card span { display: grid; gap: 2px; }.context-card strong { font-size: 10px; }.context-card small { color: rgba(255,255,255,.58); font-size: 8px; }.scan-visual { position: relative; height: 130px; border: 1px dashed #a9c7c8; border-radius: 12px; display: grid; place-items: center; color: var(--teal-700); background: var(--teal-50); overflow: hidden; }.scan-visual > svg { width: 58px; height: 58px; }.scan-visual span { position: absolute; top: 50%; left: 18%; width: 64%; height: 2px; background: #d1544e; box-shadow: 0 0 9px #d1544e; animation: scan 2s ease-in-out infinite; }.scan-form > p { color: var(--muted); font-size: 10px; line-height: 1.6; }@keyframes scan { 0%,100% { transform: translateY(-35px); } 50% { transform: translateY(35px); } }
.toast { display: flex; align-items: center; gap: 10px; font-size: 11px; }.toast svg { flex: 0 0 auto; width: 17px; }.toast--error { background: #9d3f3b; }

/* Responsive application */
@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 250px minmax(0,1fr); }.sidebar { padding-inline: 12px; }.sidebar-brand { padding-inline: 7px; }.sidebar-logo { width: 52px; }.nav-item { padding-inline: 8px; }.dashboard-grid { grid-template-columns: 1fr; }.zone-slots--yard { grid-template-columns: repeat(4,minmax(0,1fr)); }.stat-card { grid-template-columns: 38px minmax(0,1fr); padding: 16px 18px; }.stat-icon { width: 38px; height: 38px; }
}
@media (max-width: 1020px) {
  .app-shell { display: block; }.sidebar { position: fixed; left: 0; transform: translateX(-102%); width: min(310px, 86vw); transition: transform .25s ease; box-shadow: 20px 0 60px rgba(0,0,0,.2); }.sidebar.is-open { transform: translateX(0); }.sidebar.is-open + .sidebar-scrim { position: fixed; z-index: 45; inset: 0; display: block; background: rgba(5,25,34,.43); }.mobile-menu-button { display: inline-grid !important; }.today-chip { display: none; }.global-search-wrap { width: min(340px, 42vw); }.stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.kanban-board { grid-template-columns: repeat(4, 270px); }.movement-card { grid-template-columns: 42px 34px minmax(160px,1fr) 70px auto; padding: 10px 0; }.movement-note { display: none; }.winter-summary { grid-template-columns: 1fr; }.winter-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }.winter-summary > div:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .topbar { height: 70px; padding: 0 16px; }.topbar-kicker { display: none; }.topbar-title h1 { font-size: 16px; }.topbar-tools { flex: 1; justify-content: flex-end; }.global-search-wrap { width: min(280px, 50vw); }.global-search-wrap input { font-size: 0; }.global-search-wrap input:focus { position: fixed; z-index: 100; top: 10px; right: 10px; left: 10px; width: auto; font-size: 12px; }.global-search-wrap input:focus + .global-results { position: fixed; top: 58px; right: 10px; left: 10px; }.page-content { padding: 28px 16px 50px; }.page-heading { align-items: start; flex-direction: column; }.page-heading h2 { font-size: 30px; }.heading-actions { width: 100%; justify-content: flex-start; }.stat-grid, .stat-grid--three { grid-template-columns: 1fr 1fr; }.summary-strip { grid-template-columns: 1fr 1fr; }.summary-strip button:nth-child(2) { border-right: 0; }.summary-strip button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.partner-grid { grid-template-columns: 1fr; }.zone-layout { grid-template-columns: 1fr; }.zone-slots--yard { grid-template-columns: repeat(4,minmax(0,1fr)); }.floorplan { padding: 14px; }.floorplan-head { align-items: start; flex-direction: column; }.movement-card { grid-template-columns: 40px 32px 1fr auto; gap: 9px; }.movement-time { text-align: right; }.movement-card > .secondary-button, .complete-mark { grid-column: 3 / -1; justify-self: start; }.order-stats { grid-template-columns: 1fr 1fr; }.order-stats > div:nth-child(2) { border-right: 0; }.order-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.board-toolbar { align-items: start; flex-direction: column; }.board-toolbar .search-field { width: 100%; }.drawer-content { padding: 34px 20px 50px; }.drawer-hero { grid-template-columns: 80px 1fr; }.drawer-vessel-photo { width: 80px; height: 76px; }.drawer-hero h2, .drawer-title-block h2 { font-size: 25px; }.form-grid--four { grid-template-columns: repeat(2,minmax(0,1fr)); }.modal-backdrop { padding: 0; align-items: end; }.modal { max-height: 96vh; border-radius: 17px 17px 0 0; }.modal-body { padding: 18px; }.modal-actions { margin: 12px -18px -18px; padding: 13px 18px; }
}
@media (max-width: 520px) {
  .stat-grid, .stat-grid--three { grid-template-columns: 1fr; }.stat-card { min-height: 100px; }.list-toolbar { align-items: stretch; flex-direction: column; }.list-toolbar .search-field, .list-toolbar .select-control { width: 100%; }.zone-slots, .zone-slots--yard { grid-template-columns: repeat(3,minmax(0,1fr)); }.slot { min-height: 58px; }.map-legend { flex-wrap: wrap; }.partner-card { grid-template-columns: 42px 1fr 18px; }.partner-count { display: none; }.drawer-hero { grid-template-columns: 1fr; }.drawer-vessel-photo { width: 100%; height: 150px; }.detail-grid, .code-grid, .stock-hero, .form-grid--two, .form-grid--four { grid-template-columns: 1fr; }.stock-hero > span + span { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }.modal-actions { display: grid; grid-template-columns: 1fr 1fr; }.modal-actions button { width: 100%; }.movement-card { grid-template-columns: 36px 30px 1fr; }.movement-time { grid-column: 3; text-align: left; }.movement-card > .secondary-button, .complete-mark { grid-column: 3; }.segmented-control { max-width: 100%; overflow-x: auto; }.order-stats { grid-template-columns: 1fr 1fr; }
}

/* Simplified login */
.login-view {
  min-height: 100vh;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  background: #eef3f2;
}
.login-panel {
  width: 100%;
  min-height: auto;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
}
.login-form {
  width: min(430px, 100%);
  padding: 42px;
  border: 1px solid #dce5e4;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(15, 46, 58, .1);
}
.login-form__brand {
  width: 116px;
  height: 70px;
  margin: 0 0 28px;
  display: grid;
  place-items: center;
}
.login-form__brand img { width: 100%; height: 100%; object-fit: contain; }
.login-form .eyebrow { margin-bottom: 9px; }
.login-form h2 { margin: 0 0 30px; font-size: 31px; line-height: 1.15; }
.login-form .field { margin: 16px 0; }
.login-form .field input { min-height: 50px; font-size: 15px; }
.password-wrap input { padding-right: 54px; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 9px;
  padding: 0;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: #647a82;
  background: transparent;
}
.password-toggle:hover { color: var(--teal-700); background: var(--teal-50); }
.password-toggle svg { width: 19px; height: 19px; }
.login-form .primary-button { min-height: 50px; font-size: 15px; }
.demo-note {
  margin-top: 22px;
  padding: 13px 15px;
  border-radius: 11px;
  display: grid;
  gap: 3px;
  color: #60747b;
  background: #f1f6f5;
  font-size: 12px;
  line-height: 1.45;
}
.demo-note strong { margin-bottom: 2px; color: var(--ink); font-size: 12px; }

/* Readability scale */
body { font-size: 16px; }
.app-shell { grid-template-columns: 300px minmax(0, 1fr); }
.sidebar-brand strong { font-size: 16px; }
.sidebar-brand small { font-size: 13px; }
.nav-item { min-height: 66px; }
.nav-item strong { font-size: 15px; }
.nav-item small { font-size: 12px; line-height: 1.35; }
.user-avatar { font-size: 13px; }
.user-meta strong { font-size: 13px; }
.user-meta small { font-size: 12px; }
.topbar-title h1 { font-size: 22px; }
.topbar-kicker { font-size: 11px; }
.global-search-wrap input { height: 46px; font-size: 14px; }
.global-results strong { font-size: 14px; }
.global-results small { font-size: 12px; }
.global-results p { font-size: 13px; }
.today-chip { height: 46px; font-size: 13px; }
.eyebrow { font-size: 13px; }
.page-heading p { font-size: 15px; }
.primary-button,
.secondary-button,
.ghost-button { min-height: 46px; font-size: 14px; }
.secondary-button--small { min-height: 38px; font-size: 12px; }
.text-button { font-size: 14px; }
.panel-head h3 { font-size: 21px; }
.section-kicker { font-size: 11px; }
.count-badge,
.section-row > span { min-width: 29px; height: 29px; font-size: 12px; }
.stat-card { min-height: 112px; }
.stat-card small { font-size: 13px; }
.stat-card strong { font-size: 28px; }
.stat-card em { color: #60767e; font-size: 13px; font-weight: 600; }
.summary-strip span { font-size: 13px; }
.search-field input,
.select-control { height: 46px; font-size: 14px; }
.data-table th { padding-block: 14px; font-size: 11px; }
.data-table td { padding-block: 17px; font-size: 14px; }
.data-table td > small,
.data-table td span > small { font-size: 12px; }
.record-title strong { font-size: 15px; }
.cell-strong { font-size: 14px; }
.position-pill { font-size: 12px; }
.mono { font-size: 13px; }
.code-count { font-size: 11px; }
.stock-value strong { font-size: 22px; }
.empty-state p { font-size: 14px; }
.attention-item { min-height: 76px; }
.attention-item strong { font-size: 14px; }
.attention-item small { font-size: 12px; }
.timeline-entry { min-height: 64px; }
.timeline-entry time { font-size: 12px; }
.timeline-entry strong { font-size: 14px; }
.timeline-entry small { font-size: 12px; }
.capacity-row { min-height: 68px; }
.zone-mark { font-size: 11px; }
.capacity-name strong,
.capacity-row > strong { font-size: 13px; }
.capacity-name small,
.capacity-row > small { font-size: 11px; }
.mini-order-list button { min-height: 68px; }
.mini-order-list strong { font-size: 14px; }
.mini-order-list small { font-size: 12px; }
.status-badge,
.service-status-badge,
.vessel-status,
.priority-badge,
.type-badge,
.winter-badge,
.code-badge,
.danger-badge,
.success-badge { font-size: 11.5px; }
.segmented-control span { min-height: 38px; font-size: 13px; }
.movement-card { min-height: 108px; }
.movement-date small { font-size: 11px; }
.movement-main > span { font-size: 11px; }
.movement-main button { font-size: 15px; }
.movement-main small,
.movement-time small { font-size: 12px; }
.movement-time strong { font-size: 15px; }
.movement-note,
.complete-mark { font-size: 12px; }
.winter-summary strong { font-size: 14px; }
.winter-summary small { font-size: 12px; }
.winter-ring small { font-size: 10px; }
.selection-banner { font-size: 13px; }
.map-legend { font-size: 11px; }
.zone-code { font-size: 12px; }
.zone-card header strong { font-size: 14px; }
.zone-card header small { font-size: 11px; }
.zone-capacity strong { font-size: 18px !important; }
.slot { min-height: 72px; }
.slot span,
.slot small { font-size: 10px; }
.slot--occupied strong { font-size: 12px; }
.order-stats small,
.board-toolbar > span { font-size: 12px; }
.kanban-column > header strong { font-size: 13px; }
.kanban-column > header > span:last-child { font-size: 11px; }
.kanban-empty { font-size: 12px; }
.order-id { font-size: 11px; }
.order-card h4 { font-size: 15px; }
.order-card__open p { font-size: 12px; }
.order-card__meta > span:not(:first-child) { font-size: 11px; }
.order-card__footer select { height: 34px; font-size: 11px; }
.partner-card__main > strong { font-size: 15px; }
.partner-card__main small { font-size: 12px; }
.partner-count small { font-size: 10px; }
.drawer-hero p,
.drawer-title-block p { font-size: 14px; }
.drawer-section h3 { font-size: 18px; }
.detail-item { min-height: 72px; }
.detail-item small { font-size: 12px; }
.detail-item strong { font-size: 14px; }
.engine-list > div > span { font-size: 12px; }
.engine-list strong { font-size: 14px; }
.engine-list small { font-size: 12px; }
.drawer-list > button,
.material-list > button { min-height: 68px; }
.drawer-list strong,
.material-list strong { font-size: 14px; }
.drawer-list small,
.material-list small { font-size: 12px; }
.history-timeline > div,
.work-log-list > div,
.stock-history > div { min-height: 76px; }
.history-timeline time,
.work-log-list time,
.stock-history time { font-size: 11px; }
.history-timeline strong,
.stock-history strong { font-size: 13px; }
.history-timeline small,
.stock-history small { font-size: 12px; }
.work-log-list p,
.description-block { font-size: 14px; }
.note-box strong { font-size: 12px; }
.note-box p { font-size: 13px; }
.stock-hero small { font-size: 12px; }
.stock-hero em { font-size: 13px; }
.muted-text { font-size: 13px; }
.contact-stack small { font-size: 12px; }
.contact-stack strong { font-size: 14px; }
.modal > header h2 { font-size: 23px; }
.form-section h3 { font-size: 16px; }
.modal-form .field { font-size: 13px; }
.modal-form .field > span:first-child { font-size: 13px; }
.modal-form .field input,
.modal-form .field select,
.modal-form .field textarea { font-size: 15px; }
.modal-form .field input:not([type="file"]),
.modal-form .field select { height: 46px; }
.field-help { font-size: 11px !important; }
.checkbox-card strong { font-size: 14px; }
.checkbox-card small { font-size: 12px; }
.context-card strong { font-size: 14px; }
.context-card small { font-size: 12px; }
.scan-form > p { font-size: 13px; }
.toast { font-size: 14px; }

@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 280px minmax(0, 1fr); }
}

@media (max-width: 1020px) {
  .app-shell { display: block; }
}

@media (max-width: 760px) {
  .topbar-title h1 { font-size: 18px; }
  .global-search-wrap input { font-size: 0; }
  .global-search-wrap input:focus { font-size: 14px; }
}

@media (max-width: 520px) {
  .login-view { padding: 0; background: #fff; }
  .login-panel { align-items: center; padding: 0; }
  .login-form { padding: 30px 24px; border: 0; border-radius: 0; box-shadow: none; }
  .login-form__brand { width: 104px; height: 62px; margin-bottom: 24px; }
  .login-form h2 { margin-bottom: 26px; font-size: 29px; }
}

/* Mobile header, search and camera scanner */
.mobile-header-date,
.mobile-search-button { display: none; }
.mobile-search-dialog { display: grid; }
.mobile-search-field { position: relative; display: block; }
.mobile-search-field > svg {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 15px;
  width: 20px;
  transform: translateY(-50%);
  color: #73868d;
}
.mobile-search-field input {
  width: 100%;
  height: 52px;
  border: 1px solid #d7e1e2;
  border-radius: 12px;
  padding: 0 15px 0 46px;
  outline: none;
  color: var(--ink);
  background: #fafdfe;
  font-size: 16px;
}
.mobile-search-field input:focus { border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(59,168,170,.12); }
.mobile-search-results {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 7px;
  display: grid;
  background: #fff;
}
.mobile-search-results button {
  width: 100%;
  min-height: 62px;
  border: 0;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 11px;
  align-items: center;
  text-align: left;
  color: var(--ink);
  background: transparent;
}
.mobile-search-results button + button { border-top: 1px solid #edf1f1; }
.mobile-search-results button:hover { background: var(--teal-50); }
.mobile-search-results button > span:first-child {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--teal-700);
  background: var(--teal-100);
}
.mobile-search-results button > span:last-child { display: grid; gap: 3px; }
.mobile-search-results strong { font-size: 14px; }
.mobile-search-results small { color: var(--muted); font-size: 12px; }
.mobile-search-results p { margin: 12px; color: var(--muted); font-size: 14px; }
.camera-scanner {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: #071c24;
}
.camera-reader { width: 100%; height: 100%; }
.camera-reader video { width: 100% !important; height: 100% !important; display: block; object-fit: cover; }
.camera-frame {
  position: absolute;
  inset: 17%;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 13px;
  box-shadow: 0 0 0 999px rgba(4,22,29,.33);
}
.camera-frame span {
  position: absolute;
  top: 50%;
  right: 8%;
  left: 8%;
  height: 2px;
  background: #ef635d;
  box-shadow: 0 0 10px rgba(239,99,93,.85);
  animation: scan-camera 2s ease-in-out infinite;
}
.camera-status { margin: 11px 2px 3px; color: var(--muted); font-size: 13px; line-height: 1.5; }
@keyframes scan-camera { 0%,100% { transform: translateY(-46px); } 50% { transform: translateY(46px); } }

@media (max-width: 760px) {
  .topbar { height: 68px; padding: 0 15px; }
  .topbar-title { flex: 0 0 auto; }
  .topbar-title > div { display: none; }
  .topbar-tools { flex: 1; gap: 7px; justify-content: flex-end; }
  .global-search-wrap,
  .today-chip { display: none; }
  .mobile-header-date {
    display: inline-flex;
    align-items: center;
    color: #536b74;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }
  .mobile-search-button { width: 42px; height: 42px; display: inline-grid !important; background: #fff; box-shadow: 0 4px 13px rgba(15,46,58,.05); }
  .modal-backdrop--search { align-items: start; padding: 78px 14px 14px; }
  .modal--search { max-height: calc(100vh - 92px); border-radius: 17px; }
  .modal--search > header { min-height: 70px; }
  .modal--search .modal-body { padding: 18px; }
}

/* Connected operational flows */
.date-filter {
  min-width: 170px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.date-filter input {
  height: 42px;
  border: 1px solid #d7e1e2;
  border-radius: 9px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
  font: 600 13px "DM Sans", sans-serif;
}
.toolbar-filter {
  min-width: 170px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.toolbar-filter .select-control { width: 100%; }
.inventory-toolbar { align-items: end; }
.inventory-filter-notice {
  min-height: 64px;
  border-bottom: 1px solid #cfe2e0;
  padding: 11px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: #2f686b;
  background: var(--teal-50);
}
.inventory-filter-notice > span { display: flex; align-items: center; gap: 11px; }
.inventory-filter-notice > span > svg { flex: 0 0 auto; width: 22px; }
.inventory-filter-notice > span > span { display: grid; gap: 2px; }
.inventory-filter-notice strong { font-size: 13px; }
.inventory-filter-notice small { color: #60797d; font-size: 12px; }
.service-toolbar .select-control { min-width: 150px; }
.service-stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.service-table { min-width: 1180px; }
.service-table td:nth-child(3) > small { max-width: 290px; line-height: 1.45; }
.service-difference { font-size: 14px; white-space: nowrap; }
.service-finance-summary {
  margin: 22px 0 0;
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
}
.service-finance-summary > div { min-height: 96px; padding: 18px; display: grid; align-content: center; gap: 4px; }
.service-finance-summary > div + div { border-left: 1px solid rgba(255,255,255,.12); }
.service-finance-summary small { color: rgba(255,255,255,.62); font-size: 12px; }
.service-finance-summary strong { font: 800 22px Manrope, sans-serif; }
.service-finance-summary .is-negative strong { color: #ffb2aa; }
.modal-backdrop { z-index: 560; }
.panel-explanation { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 500; }
.slot-info { top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 7px; padding: 0; line-height: 0; }
.slot-info svg { width: 14px; height: 14px; display: block; }
.position-choice,
.placement-rule { border: 1px solid #cce1e0; border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 12px; background: var(--teal-50); }
.position-choice { margin-bottom: 12px; color: var(--ink); }
.position-choice > svg,
.placement-rule > svg { flex: 0 0 auto; width: 22px; color: var(--teal-700); }
.position-choice span,
.placement-rule span { display: grid; gap: 3px; }
.position-choice small,
.placement-rule small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.position-choice strong,
.placement-rule strong { font-size: 14px; }
.placement-rule { margin-top: 10px; align-items: flex-start; }
.barcode-input-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.barcode-input-control .secondary-button { min-height: 46px; padding-inline: 14px; }
.article-scanner-slot:empty { display: none; }
.article-scanner-slot { margin: 8px 0 16px; }
.inline-code-scanner { border: 1px solid #c9dddd; border-radius: 14px; padding: 12px; display: grid; grid-template-columns: minmax(260px, 1fr) minmax(220px, .8fr); gap: 14px; background: var(--teal-50); }
.inline-code-scanner .camera-scanner { aspect-ratio: 16 / 9; }
.inline-code-scanner__status { display: grid; align-content: center; justify-items: start; gap: 12px; }
.inline-code-scanner__status p { margin: 0; color: #4f6870; font-size: 13px; line-height: 1.55; }
.scan-success { border: 1px solid #b6d8cb; border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 11px; color: var(--success); background: #edf8f3; }
.scan-success > svg { width: 24px; }
.scan-success > span { display: grid; gap: 2px; }
.scan-success strong { font-size: 14px; }
.scan-success small { color: #537168; font: 700 12px ui-monospace, monospace; }
.invoice-lines-section { margin-top: 15px; }
.invoice-lines { display: grid; gap: 9px; }
.invoice-line {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 105px 155px 42px;
  gap: 10px;
  align-items: end;
  background: #f8fbfa;
}
.invoice-line .field { margin: 0; }
.invoice-line__remove { margin-bottom: 2px; color: var(--danger); background: #fff; }
.invoice-history-panel { margin-top: 18px; }
.invoice-history { padding: 0 18px 18px; display: grid; }
.invoice-history > div:not(.empty-state) { min-height: 68px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; }
.invoice-history__icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--teal-700); background: var(--teal-100); }
.invoice-history__icon svg { width: 18px; }
.invoice-history > div > span:nth-child(2) { display: grid; gap: 3px; }
.invoice-history > div > span:nth-child(2) strong { font-size: 14px; }
.invoice-history > div > span:nth-child(2) small { color: var(--muted); font-size: 12px; }
.invoice-history > div > strong { font-size: 14px; }
.work-photo,
.history-photo {
  width: min(100%, 420px);
  max-height: 260px;
  margin-top: 11px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(7, 35, 45, .1);
}
.work-photo--order { width: 100%; max-width: 100%; max-height: 340px; }
.history-timeline > div:has(.history-photo),
.work-log-list > div:has(.work-photo) { min-height: 160px; }
.operational-zone {
  margin-top: 18px;
  border: 1px solid #b8d7d6;
  border-radius: 14px;
  padding: 18px;
  display: grid;
  grid-template-columns: 52px minmax(220px, 1fr) minmax(260px, 1.2fr);
  gap: 16px;
  align-items: center;
  background: linear-gradient(135deg, #eff9f8, #f9fcfc);
}
.operational-zone__icon { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--teal-700); }
.operational-zone__icon svg { width: 25px; }
.operational-zone > span:nth-child(2) { display: grid; gap: 4px; }
.operational-zone > span:nth-child(2) > strong { font: 800 17px Manrope, sans-serif; }
.operational-zone small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.operational-zone > div { display: grid; gap: 7px; }
.operational-zone > div > span { border-left: 3px solid var(--teal-400); padding: 5px 0 5px 10px; display: grid; gap: 2px; }
.operational-zone > div strong { font-size: 12px; }
.zone-slots--yard .slot--large { grid-column: span var(--space); min-height: 78px; }
.is-master-mode .stock-hero { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .form-grid--three { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-finance-summary { grid-template-columns: 1fr; }
  .service-finance-summary > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .invoice-line { grid-template-columns: 1fr 1fr; }
  .invoice-line .field:first-child { grid-column: 1 / -1; }
  .invoice-line__remove { align-self: end; justify-self: end; }
  .operational-zone { grid-template-columns: 48px 1fr; align-items: start; }
  .operational-zone > div { grid-column: 1 / -1; }
  .inline-code-scanner { grid-template-columns: 1fr; }
}

@media (max-width: 1500px) {
  .service-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1020px) {
  .service-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .service-stat-grid { grid-template-columns: 1fr; }
  .form-grid--three { grid-template-columns: 1fr; }
  .date-filter, .toolbar-filter { width: 100%; }
  .inventory-toolbar { align-items: stretch; }
  .inventory-toolbar .secondary-button { width: 100%; }
  .inventory-filter-notice { align-items: flex-start; flex-direction: column; }
  .invoice-line { grid-template-columns: 1fr; }
  .invoice-line .field:first-child { grid-column: auto; }
  .invoice-line__remove { justify-self: stretch; width: 100%; }
  .operational-zone { grid-template-columns: 1fr; }
  .operational-zone > div { grid-column: auto; }
  .barcode-input-control { grid-template-columns: 1fr; }
  .barcode-input-control .secondary-button { width: 100%; }
  .selection-banner { align-items: stretch; flex-direction: column; }
  .selection-banner__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .selection-banner__actions .text-button { grid-column: 1 / -1; }
}

/* Plac uvijek zadržava pet logičkih pozicija po redu. Šira kartica ne smije preći u sljedeći red. */
.zone-slots--yard { grid-template-columns: repeat(5, minmax(68px, 1fr)); overflow-x: auto; }
.zone-slots--yard .slot--large { grid-column: span var(--space); }

/* Fotografije plovila */
.drawer-vessel-photo--button { position: relative; border: 0; padding: 0; }
.drawer-vessel-photo--button > span { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: rgba(8, 38, 49, .78); backdrop-filter: blur(6px); }
.drawer-vessel-photo--button > span svg { width: 15px; height: 15px; }
.vessel-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vessel-gallery-grid > button { position: relative; aspect-ratio: 4 / 3; border: 0; border-radius: 13px; padding: 0; overflow: hidden; background: #e9f0ef; }
.vessel-gallery-grid > button:first-child { grid-column: span 2; grid-row: span 2; }
.vessel-gallery-grid img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .22s ease; }
.vessel-gallery-grid > button:hover img { transform: scale(1.035); }
.vessel-gallery-grid > button > span { position: absolute; left: 8px; bottom: 8px; border-radius: 999px; padding: 5px 8px; color: #fff; background: rgba(8, 38, 49, .82); font-size: 11px; font-weight: 800; backdrop-filter: blur(6px); }
.vessel-gallery-grid > button > svg { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; padding: 7px; color: #fff; background: rgba(8, 38, 49, .72); opacity: 0; transition: opacity .18s ease; }
.vessel-gallery-grid > button:hover > svg,
.vessel-gallery-grid > button:focus-visible > svg { opacity: 1; }
.vessel-gallery-hint { margin: 10px 0 0; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.vessel-gallery-hint svg { width: 14px; }
.vessel-gallery-empty { min-height: 96px; border: 1px dashed #bfd1d2; border-radius: 13px; padding: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #557079; background: #f7faf9; }
.vessel-gallery-empty > svg { width: 27px; color: var(--teal-700); }
.vessel-gallery-empty > span { display: grid; gap: 3px; }
.vessel-gallery-empty strong { font-size: 14px; }
.vessel-gallery-empty small { color: var(--muted); font-size: 12px; }

.vessel-photo-uploader { margin: 18px 0; }
.vessel-photo-uploader__head { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vessel-photo-uploader__head > span:first-child { display: grid; gap: 3px; }
.vessel-photo-uploader__head strong { color: #516970; font-size: 13px; }
.vessel-photo-uploader__head small { color: var(--muted); font-size: 12px; font-weight: 500; }
.photo-upload-dropzone { min-height: 112px; border: 1.5px dashed #9fc6c6; border-radius: 14px; padding: 18px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; color: var(--ink); background: linear-gradient(135deg, var(--teal-50), #f9fcfb); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.photo-upload-dropzone:hover { border-color: var(--teal-600); background: #eaf7f6; transform: translateY(-1px); }
.photo-upload-dropzone.is-loading { cursor: wait; opacity: .72; pointer-events: none; }
.photo-upload-dropzone__icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--teal-700); box-shadow: 0 8px 20px rgba(36,127,131,.2); }
.photo-upload-dropzone__icon svg { width: 23px; }
.photo-upload-dropzone > span:nth-child(2) { min-width: 0; display: grid; gap: 4px; }
.photo-upload-dropzone > span:nth-child(2) strong { font-size: 15px; }
.photo-upload-dropzone > span:nth-child(2) small { color: var(--muted); font-size: 12px; line-height: 1.45; font-weight: 500; }
.photo-upload-dropzone .secondary-button { pointer-events: none; }
.photo-upload-preview { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.photo-upload-item { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #e7eeee; }
.photo-upload-item > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.photo-primary-badge { position: absolute; left: 7px; bottom: 7px; border-radius: 999px; padding: 5px 7px; display: inline-flex; align-items: center; gap: 4px; color: #fff; background: rgba(8, 38, 49, .82); font-size: 10px; font-weight: 800; backdrop-filter: blur(6px); }
.photo-primary-badge svg { width: 11px; height: 11px; fill: currentColor; }
.photo-upload-item__actions { position: absolute; top: 7px; right: 7px; display: flex; gap: 5px; }
.photo-upload-item__actions button { width: 30px; height: 30px; border: 0; border-radius: 8px; display: grid; place-items: center; color: #fff; background: rgba(8, 38, 49, .8); backdrop-filter: blur(6px); }
.photo-upload-item__actions button:last-child:hover { background: var(--danger); }
.photo-upload-item__actions svg { width: 14px; }
.photo-upload-empty { min-height: 88px; grid-column: 1 / -1; border: 1px solid #e0e8e8; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 11px; color: #597078; background: #f8faf9; }
.photo-upload-empty > svg { width: 24px; color: var(--teal-700); }
.photo-upload-empty > span { display: grid; gap: 2px; }
.photo-upload-empty strong { font-size: 13px; }
.photo-upload-empty small { color: var(--muted); font-size: 11px; }
.photo-upload-help { margin: 9px 0 0; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.photo-upload-help svg { flex: 0 0 auto; width: 14px; }

body.has-lightbox { overflow: hidden; }
.photo-lightbox-backdrop { position: fixed; z-index: 1300; inset: 0; background: rgba(2, 15, 21, .96); animation: fade-in .18s ease; }
.photo-lightbox { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #fff; }
.photo-lightbox__header { min-height: 82px; padding: 15px 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.photo-lightbox__header > span:first-child { display: grid; gap: 3px; }
.photo-lightbox__header small { color: #74c7c8; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.photo-lightbox__header strong { font: 800 18px Manrope, sans-serif; }
.photo-lightbox__counter { color: rgba(255,255,255,.72); font-size: 13px; font-weight: 700; }
.photo-lightbox__close { justify-self: end; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); }
.photo-lightbox__close svg { width: 21px; }
.photo-lightbox__stage { min-height: 0; padding: 20px; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 18px; }
.photo-lightbox__stage figure { min-width: 0; min-height: 0; height: 100%; margin: 0; display: grid; place-items: center; }
.photo-lightbox__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 7px; box-shadow: 0 22px 80px rgba(0,0,0,.42); }
.photo-lightbox__nav { width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.08); transition: background .18s ease, transform .18s ease; }
.photo-lightbox__nav:hover:not(:disabled) { background: var(--teal-700); transform: scale(1.04); }
.photo-lightbox__nav:disabled { opacity: .25; cursor: default; }
.photo-lightbox__nav svg { width: 25px; }
.photo-lightbox__thumbs { min-height: 92px; padding: 10px 24px 16px; display: flex; justify-content: center; gap: 8px; overflow-x: auto; border-top: 1px solid rgba(255,255,255,.1); }
.photo-lightbox__thumbs button { flex: 0 0 76px; height: 58px; border: 2px solid transparent; border-radius: 9px; padding: 2px; overflow: hidden; background: transparent; opacity: .55; }
.photo-lightbox__thumbs button.is-active { border-color: #68c8c9; opacity: 1; }
.photo-lightbox__thumbs img { width: 100%; height: 100%; border-radius: 5px; display: block; object-fit: cover; }

@media (max-width: 760px) {
  .photo-upload-dropzone { grid-template-columns: 44px minmax(0, 1fr); }
  .photo-upload-dropzone .secondary-button { grid-column: 1 / -1; width: 100%; }
  .photo-upload-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-lightbox__header { min-height: 70px; padding: 11px 14px; grid-template-columns: 1fr auto auto; }
  .photo-lightbox__header small { font-size: 8px; }
  .photo-lightbox__header strong { font-size: 15px; }
  .photo-lightbox__stage { padding: 10px; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 6px; }
  .photo-lightbox__nav { width: 40px; height: 40px; }
  .photo-lightbox__thumbs { min-height: 80px; padding-inline: 12px; justify-content: flex-start; }
  .photo-lightbox__thumbs button { flex-basis: 64px; height: 50px; }
}

@media (max-width: 520px) {
  .vessel-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vessel-gallery-grid > button:first-child { grid-column: 1 / -1; grid-row: auto; }
  .photo-upload-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-lightbox__stage { position: relative; grid-template-columns: 1fr; }
  .photo-lightbox__nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); background: rgba(8,38,49,.7); }
  .photo-lightbox__nav:hover:not(:disabled) { transform: translateY(-50%); }
  .photo-lightbox__nav--prev { left: 10px; }
  .photo-lightbox__nav--next { right: 10px; }
}

/* Vizuelni identitet novog logotipa */
.sidebar { background: linear-gradient(180deg, #151f34, #101728); }
.sidebar::after { background: radial-gradient(circle at 85% 100%, rgba(74,74,241,.16), transparent 66%); }
.sidebar-brand { display: grid; gap: 10px; padding: 0 8px 24px; }
.sidebar-logo { width: 100%; height: 78px; padding: 9px 11px; border-radius: 12px; background: #fff; }
.sidebar-brand__caption { display: block; padding-inline: 4px; color: rgba(255,255,255,.56); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.nav-item.is-active { background: linear-gradient(100deg, rgba(74,74,241,.25), rgba(74,74,241,.07)); box-shadow: inset 3px 0 var(--teal-500); }
.user-avatar { background: var(--teal-600); }
.topbar { background: rgba(245,246,248,.92); }
.field input:focus,
.field select:focus,
.field textarea:focus { box-shadow: 0 0 0 4px rgba(74,74,241,.12); }
.primary-button { box-shadow: 0 10px 24px rgba(38,38,199,.2); }
.primary-button:hover { background: #1e1eae; }
.login-view { background: #f2f3f7; }
.login-form { border-color: #e0e3e9; box-shadow: 0 22px 60px rgba(21,31,52,.1); }
.login-form__brand { width: 224px; height: 84px; padding: 7px 9px; border-radius: 12px; background: #fff; }
.photo-upload-dropzone__icon { box-shadow: 0 8px 20px rgba(38,38,199,.2); }
.photo-lightbox__header small { color: #9e9eff; }
.photo-lightbox__thumbs button.is-active { border-color: #7777ff; }

/* Istorija imena i vlasnika na kartici plovila */
.identity-history-section .section-row { align-items: end; }
.identity-history-section .section-row > div { display: grid; gap: 4px; }
.identity-history-section .section-row h3 { margin: 0; }
.identity-history-section .section-row p { margin: 0; color: var(--muted); font-size: 12px; }
.identity-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.identity-history-grid > article { min-width: 0; border: 1px solid #e2e4f2; border-radius: 14px; padding: 14px; background: #fafaff; }
.identity-history-grid > article > header { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #e7e8f3; }
.identity-history-grid > article > header > span { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--teal-700); background: var(--teal-100); }
.identity-history-grid > article > header svg { width: 17px; }
.identity-history-grid > article > header > div { min-width: 0; display: grid; gap: 2px; }
.identity-history-grid > article > header strong { font-size: 13px; }
.identity-history-grid > article > header small { color: var(--muted); font-size: 11px; }
.identity-history-list { display: grid; }
.identity-history-item { min-height: 62px; padding: 10px 0; border-bottom: 1px solid #ebeaf4; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; }
.identity-history-item:last-child { border-bottom: 0; padding-bottom: 0; }
.identity-history-item > span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--teal-700); background: #eeeeff; }
.identity-history-item > span svg { width: 14px; }
.identity-history-item p { min-width: 0; margin: 0; display: grid; gap: 3px; }
.identity-history-item strong { overflow-wrap: anywhere; font-size: 13px; }
.identity-history-item small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.identity-history-empty { min-height: 92px; padding-top: 12px; display: flex; align-items: center; gap: 9px; color: var(--muted); }
.identity-history-empty > svg { flex: 0 0 auto; width: 19px; color: #8490a0; }
.identity-history-empty > span { display: grid; gap: 3px; }
.identity-history-empty strong { color: #596273; font-size: 12px; }
.identity-history-empty small { font-size: 10px; line-height: 1.4; }

/* Izbor šta ulazi u istoriju pri izmjeni plovila */
.history-decision-backdrop { position: fixed; z-index: 1500; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(10,15,29,.64); backdrop-filter: blur(5px); animation: fade-in .18s ease; }
.history-decision-dialog { width: min(640px, 100%); max-height: calc(100vh - 48px); border-radius: 20px; overflow-y: auto; background: #fff; box-shadow: 0 30px 90px rgba(8,13,27,.3); }
.history-decision-dialog > header { padding: 24px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: start; gap: 15px; }
.history-decision-icon { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: var(--teal-700); background: var(--teal-100); }
.history-decision-icon svg { width: 23px; }
.history-decision-dialog h2 { margin: 3px 0 5px; font: 800 23px/1.18 Manrope, sans-serif; letter-spacing: -.03em; }
.history-decision-dialog header p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.history-decision-list { padding: 18px 24px; display: grid; gap: 10px; }
.history-decision-row { position: relative; min-height: 92px; border: 1px solid #dfe2ea; border-radius: 14px; padding: 15px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px; align-items: center; gap: 12px; background: #fff; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.history-decision-row:has(input:checked) { border-color: #a6a6f4; background: #f8f8ff; box-shadow: 0 0 0 3px rgba(74,74,241,.07); }
.history-decision-row > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.history-decision-row__icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--teal-700); background: var(--teal-100); }
.history-decision-row__icon svg { width: 18px; }
.history-decision-row__content { min-width: 0; display: grid; gap: 6px; }
.history-decision-row__content > small { color: var(--teal-700); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.history-decision-row__content > span { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); align-items: center; gap: 8px; }
.history-decision-row__content strong { min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.history-decision-row__content svg { width: 16px; color: #9aa1af; }
.history-decision-check { width: 26px; height: 26px; border: 1px solid #cfd3dd; border-radius: 8px; display: grid; place-items: center; color: #fff; background: #fff; transition: .18s ease; }
.history-decision-check svg { width: 15px; }
.history-decision-row input:checked ~ .history-decision-check { border-color: var(--teal-600); background: var(--teal-600); }
.history-decision-dialog > footer { padding: 18px 24px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 1280px) {
  .sidebar-logo { width: 100%; }
}

@media (max-width: 760px) {
  .identity-history-grid { grid-template-columns: 1fr; }
  .history-decision-backdrop { padding: 14px; align-items: end; }
  .history-decision-dialog { max-height: calc(100vh - 28px); border-radius: 18px; }
  .history-decision-dialog > header { padding: 20px; grid-template-columns: 44px minmax(0, 1fr); }
  .history-decision-icon { width: 44px; height: 44px; }
  .history-decision-dialog h2 { font-size: 20px; }
  .history-decision-list { padding: 15px 18px; }
  .history-decision-dialog > footer { padding: 16px 18px 18px; display: grid; grid-template-columns: 1fr; }
  .history-decision-dialog > footer button { width: 100%; }
}

@media (max-width: 520px) {
  .login-form__brand { width: 205px; height: 76px; margin-bottom: 24px; }
  .history-decision-row { grid-template-columns: 34px minmax(0, 1fr) 26px; padding: 13px; gap: 9px; }
  .history-decision-row__icon { width: 34px; height: 34px; }
  .history-decision-row__content > span { grid-template-columns: 1fr; gap: 3px; }
  .history-decision-row__content > span svg { transform: rotate(90deg); }
}