/* Servis Printera CRM: tabla, karton printera i pregled klijenta. Boje dolaze iz Filament varijabli. */

.crm {
    --crm-card: #fff;
    --crm-column: var(--gray-100);
    --crm-border: var(--gray-200);
    --crm-text: var(--gray-950);
    --crm-muted: var(--gray-500);
    color: var(--crm-text);
    font-size: 14px;
}

.dark .crm {
    --crm-card: var(--gray-800);
    --crm-column: var(--gray-900);
    --crm-border: rgb(255 255 255 / 8%);
    --crm-text: var(--gray-50);
    --crm-muted: var(--gray-400);
}

.crm-muted { color: var(--crm-muted); }
.crm-warn { color: var(--warning-600); font-weight: 600; }
.dark .crm-warn { color: var(--warning-400); }
.crm-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.crm-link { position: relative; z-index: 1; color: var(--primary-600); font-weight: 500; }
.dark .crm-link { color: var(--primary-400); }
.crm-link:hover { text-decoration: underline; }
.crm-note { margin-bottom: 12px; color: var(--crm-muted); white-space: pre-line; }

/* Alatna traka i navigacija kolona */
.crm-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.crm-search { flex: 1 1 260px; }
.crm-check { display: inline-flex; gap: 8px; align-items: center; min-height: 36px; color: var(--crm-muted); }
.crm-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: -6px 0 12px; color: var(--crm-muted); }
.crm-meta strong { color: var(--crm-text); }

.crm-pills { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; scrollbar-width: none; }
.crm-pills::-webkit-scrollbar { display: none; }
.crm-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--crm-text); background: color-mix(in oklab, var(--crm-accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--crm-accent) 35%, transparent); }
.crm-pill b { font-weight: 700; color: var(--crm-muted); }
.crm-pill.is-active { background: var(--crm-accent); color: #fff; box-shadow: none; }
.crm-pill.is-active b { color: rgb(255 255 255 / 85%); }

/* Tabla: pozadina u bojama Trello boarda, kolone kao liste */
.crm-board { --crm-board-from: #0c66e4; --crm-board-to: #37b4c3; display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in oklab, var(--crm-board-from) 22%, transparent), color-mix(in oklab, var(--crm-board-to) 18%, transparent)); }
.dark .crm-board { background: linear-gradient(135deg, color-mix(in oklab, var(--crm-board-from) 28%, var(--gray-950)), color-mix(in oklab, var(--crm-board-to) 16%, var(--gray-950))); }
.crm-column { --crm-accent: var(--gray-400); flex: 1 0 280px; max-width: 360px; background: var(--crm-column); border: 1px solid var(--crm-border); border-radius: 12px; padding: 0 6px 6px; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); outline: 2px solid transparent; transition: outline-color .15s, background .15s; }
.crm-column.is-over { outline-color: var(--primary-500); background: color-mix(in oklab, var(--primary-500) 8%, var(--crm-column)); }
.crm-column-head { display: flex; align-items: center; gap: 8px; margin: 0 -6px 6px; padding: 10px 12px; border-radius: 12px 12px 0 0; font-weight: 700; background: color-mix(in oklab, var(--crm-accent) 14%, var(--crm-column)); border-bottom: 2px solid var(--crm-accent); }
.crm-column-head::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--crm-accent); }
.crm-column-head span { margin-left: auto; border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; background: color-mix(in oklab, var(--crm-accent) 22%, transparent); }
.crm-column-body { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 300px); overflow-y: auto; min-height: 40px; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--crm-muted) 45%, transparent) transparent; }
.crm-empty { padding: 14px 8px; text-align: center; font-size: 13px; color: var(--crm-muted); border: 1px dashed var(--crm-border); border-radius: 8px; }
.crm-more { display: block; width: 100%; padding: 8px; text-align: center; font-weight: 600; color: var(--primary-600); }

/* Kartice */
@keyframes crm-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes crm-ping { from { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary-500) 60%, transparent); } to { box-shadow: 0 0 0 8px transparent; } }
.crm-card { position: relative; display: block; width: 100%; text-align: left; background: var(--crm-card); border: 1px solid var(--crm-border); border-radius: 10px; padding: 8px 10px; color: inherit; animation: crm-in .22s ease-out; transition: transform .12s, box-shadow .12s, border-color .12s; }
@media (hover: hover) {
    .crm-card:hover { border-color: color-mix(in oklab, var(--crm-accent, var(--primary-500)) 50%, var(--crm-border)); box-shadow: 0 4px 12px rgb(0 0 0 / 12%); transform: translateY(-1px); }
    .dark .crm-card:hover { box-shadow: 0 4px 16px rgb(0 0 0 / 55%); }
}
.crm-card.is-urgent::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--danger-500); }
.crm-card.is-fresh::after { content: ""; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary-500); animation: crm-ping 1.6s ease-out 3; }
.crm-card.is-dragging { opacity: .4; transform: rotate(-2deg); }
.crm-card.is-archived { opacity: .6; border-style: dashed; }
.crm-card[draggable="true"] { cursor: grab; }
.crm-card:focus-visible, .crm a:focus-visible, .crm button:focus-visible, .crm select:focus-visible, .crm summary:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.crm-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.crm-labels:empty { display: none; }
.crm-card-title { display: block; width: 100%; text-align: left; font-size: 14px; font-weight: 500; line-height: 1.35; white-space: pre-line; overflow-wrap: anywhere; color: var(--crm-text); }
.crm-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.crm-card-body { margin-top: 4px; color: var(--crm-muted); white-space: pre-line; overflow-wrap: anywhere; }
.crm-card-foot, .crm-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; font-size: 12px; color: var(--crm-muted); }
.crm-client { font-weight: 700; color: var(--crm-text); }
.crm-age.is-stale { color: var(--warning-600); font-weight: 600; }
.crm-reading { font-weight: 700; color: var(--crm-text); }
.crm-avatar { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; background: oklch(.58 .14 var(--h)); }
.crm-unassigned { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--crm-muted); border: 1px dashed var(--crm-border); border-radius: 999px; padding: 0 8px; }
.crm-card-actions { position: relative; z-index: 1; display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.crm-btn { flex: 1; min-height: 34px; padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--primary-700); background: color-mix(in oklab, var(--primary-500) 12%, transparent); }
.crm-btn:hover { background: color-mix(in oklab, var(--primary-500) 20%, transparent); }
.dark .crm-btn { color: var(--primary-300); }
.crm-btn-success { color: var(--success-700); background: color-mix(in oklab, var(--success-500) 14%, transparent); }
.dark .crm-btn-success { color: var(--success-300); }
.crm-move { flex: none; width: auto; max-width: 140px; min-height: 34px; font-size: 13px; padding: 2px 26px 2px 10px; border: 1px solid var(--crm-border); border-radius: 8px; background-color: var(--crm-card); color: var(--crm-muted); }
@media (hover: hover) and (pointer: fine) {
    .crm-move { opacity: .55; transition: opacity .12s; }
    .crm-card:hover .crm-move, .crm-card:focus-within .crm-move { opacity: 1; }
}
.crm-link-danger { position: relative; z-index: 1; min-height: 32px; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--danger-600); }

/* Oznake: K/C/M/Y su prave boje tonera */
.crm-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.crm-tag { --c: var(--gray-500); display: inline-flex; align-items: center; gap: 3px; border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; background: color-mix(in oklab, var(--c) 15%, transparent); color: color-mix(in oklab, var(--c) 70%, var(--crm-text, #111)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 35%, transparent); }
.crm-tag-urgent { background: var(--danger-600); color: #fff; box-shadow: none; }
.crm-tag-danger { --c: var(--danger-500); }
.crm-tag-toner, .crm-tag-warning { --c: var(--warning-500); }
.crm-tag-primary { --c: var(--primary-500); }
.crm-tag-K { background: #18181b; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 30%); }
.crm-tag-C { background: #00a3e0; color: #002a3a; box-shadow: none; }
.crm-tag-M { background: #d1006f; color: #fff; box-shadow: none; }
.crm-tag-Y { background: #ffd400; color: #3a2e00; box-shadow: none; }
.crm-tag-unknown { --c: var(--gray-500); }

/* Trello oznake u originalnim bojama */
.crm-tl { display: inline-block; min-width: 40px; border-radius: 4px; padding: 0 6px; font-size: 11px; font-weight: 600; line-height: 16px; color: #172b4d; background: #dcdfe4; }
.crm-tl:empty { height: 8px; padding: 0; }
.crm-tl-green { background: #4bce97; } .crm-tl-green_light { background: #baf3db; } .crm-tl-green_dark { background: #1f845a; color: #fff; }
.crm-tl-yellow { background: #f5cd47; } .crm-tl-yellow_light { background: #f8e6a0; } .crm-tl-yellow_dark { background: #946f00; color: #fff; }
.crm-tl-orange { background: #fea362; } .crm-tl-orange_light { background: #fedec8; } .crm-tl-orange_dark { background: #c25100; color: #fff; }
.crm-tl-red { background: #f87168; } .crm-tl-red_light { background: #ffd5d2; } .crm-tl-red_dark { background: #c9372c; color: #fff; }
.crm-tl-purple { background: #9f8fef; } .crm-tl-purple_light { background: #dfd8fd; } .crm-tl-purple_dark { background: #6e5dc6; color: #fff; }
.crm-tl-blue { background: #579dff; } .crm-tl-blue_light { background: #cce0ff; } .crm-tl-blue_dark { background: #0c66e4; color: #fff; }
.crm-tl-sky { background: #6cc3e0; } .crm-tl-sky_light { background: #c6edfb; } .crm-tl-sky_dark { background: #227d9b; color: #fff; }
.crm-tl-lime { background: #94c748; } .crm-tl-lime_light { background: #d3f1a7; } .crm-tl-lime_dark { background: #5b7f24; color: #fff; }
.crm-tl-pink { background: #e774bb; } .crm-tl-pink_light { background: #fdd0ec; } .crm-tl-pink_dark { background: #ae4787; color: #fff; }
.crm-tl-black { background: #8590a2; color: #fff; } .crm-tl-black_light { background: #dcdfe4; } .crm-tl-black_dark { background: #626f86; color: #fff; }

/* Brojke na vrhu kartona i pregleda */
.crm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.crm-stat { --crm-accent: var(--primary-500); position: relative; overflow: hidden; background: var(--crm-card); border: 1px solid var(--crm-border); border-radius: 12px; padding: 12px 14px 12px 16px; }
.crm-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--crm-accent); }
.crm-stat.is-warning::before { background: var(--warning-500); }
.crm-stat small { display: block; font-size: 12px; color: var(--crm-muted); }
.crm-stat strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.crm-stat .crm-tag { font-size: 13px; line-height: 22px; padding: 0 10px; }

.crm-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in oklab, var(--warning-500) 10%, var(--crm-card)); border: 1px solid color-mix(in oklab, var(--warning-500) 30%, transparent); }
.crm-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 8px; background: var(--crm-card); border: 1px solid var(--crm-border); font-size: 13px; }
.crm-chip small { color: var(--crm-muted); }

.crm-group summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.crm-group summary::-webkit-details-marker { display: none; }
.crm-group[open] summary { margin-bottom: 6px; }
.crm-group-row { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 4px 0; border-top: 1px solid var(--crm-border); font-size: 13px; }
.crm-toner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 10px; font-size: 13px; }
.crm-summary { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 4px 2px 8px; font-size: 12px; color: var(--crm-muted); }
.crm-tile-summary .crm-card-foot { margin-top: 2px; }

/* Tabele u pregledu klijenta */
.crm-section-title { margin: 18px 0 8px; font-size: 16px; font-weight: 700; }
.crm-table-wrap { overflow-x: auto; border: 1px solid var(--crm-border); border-radius: 12px; background: var(--crm-card); }
.crm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.crm-table th { text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--crm-muted); border-bottom: 1px solid var(--crm-border); white-space: nowrap; }
.crm-table td { padding: 8px 10px; border-bottom: 1px solid var(--crm-border); vertical-align: middle; }
.crm-table tr:last-child td { border-bottom: 0; }
.crm-bar { display: inline-block; width: calc(var(--w) * .8); max-width: 120px; min-width: 2px; height: 8px; margin-right: 6px; border-radius: 4px; background: var(--c); vertical-align: middle; }

/* Arhiva boardova */
.crm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }

/* Prozor s detaljima Trello kartice */
.crm-modal { position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / 50%); display: flex; justify-content: center; align-items: flex-start; padding: 40px 12px; overflow-y: auto; }
.crm-modal-box { background: var(--crm-card); border-radius: 12px; padding: 18px 20px; width: 100%; max-width: 680px; }
.crm-modal-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.crm-modal-box h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; white-space: pre-line; overflow-wrap: anywhere; }
.crm-modal-box h4 { font-weight: 700; margin: 14px 0 4px; }
.crm-modal-box pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; }
.crm-modal-box a { color: var(--primary-600); text-decoration: underline; }
.crm-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px 14px; }

/* Brend i prijava */
.crm-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; color: currentColor; }
.fi-simple-layout { background: radial-gradient(900px 500px at 50% -10%, color-mix(in oklab, #0c66e4 30%, transparent), transparent), radial-gradient(700px 400px at 100% 110%, color-mix(in oklab, #37b4c3 22%, transparent), transparent); }

/* Donja traka za telefon */
.crm-mobile-bar { display: none; }

/* iOS ne zumira polja od 16px naviše */
@supports (-webkit-touch-callout: none) {
    .crm input, .crm select, .crm textarea { font-size: 16px; }
}

@media (max-width: 900px) {
    .crm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .crm { font-size: 15px; }
    .crm-card-foot, .crm-card-meta { font-size: 13px; }
    .crm-board { padding: 8px; display: block; }
    .crm-column { display: none; max-width: none; }
    .crm-column.is-active { display: block; }
    .crm-column-body { max-height: none; overflow: visible; }
    .crm-pills { position: sticky; top: 64px; z-index: 5; margin: 0 -16px 10px; padding: 6px 16px; background: var(--gray-50); }
    .dark .crm-pills { background: var(--gray-950); }
    .crm-stats { gap: 6px; }
    .crm-stat { padding: 10px 10px 10px 13px; }
    .crm-stat strong { font-size: 18px; }
    .crm-btn, .crm-move, .crm-link-danger, .crm-check { min-height: 44px; }
    .crm-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--gray-200); box-shadow: 0 -4px 16px rgb(0 0 0 / 8%); }
    .dark .crm-mobile-bar { background: var(--gray-900); border-color: rgb(255 255 255 / 8%); }
    .crm-mobile-bar a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--gray-600); }
    .dark .crm-mobile-bar a { color: var(--gray-300); }
    .crm-mobile-bar a.is-active { color: var(--primary-600); background: color-mix(in oklab, var(--primary-500) 10%, transparent); }
    .crm-mobile-bar a.is-primary { color: #fff; background: var(--primary-600); }
    .crm-mobile-bar-icon { width: 22px; height: 22px; }
    .fi-main-ctn { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .fi-page-header-widgets, .fi-wi-stats-overview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .crm *, .crm-card { animation: none !important; transition: none !important; }
}