). */
.mud-main-content > .pa-6 { padding: 12px !important; }
/* Naslovi stranica — Cormorant 44px lomi se u 2-3 reda. */
.mud-main-content .mud-typography-h1 { font-size: 28px; line-height: 1.1; }
.mud-main-content .mud-typography-h2 { font-size: 24px; line-height: 1.15; }
.mud-main-content .mud-typography-h3 { font-size: 20px; line-height: 1.2; }
.mud-main-content .sf-eyebrow { margin-bottom: 2px; }
/* Grid razmak 24px → 8px (MudGrid Spacing=6 je podrazumevan). */
.mud-main-content .mud-grid-spacing-xs-6 { margin: -8px 0 0 -8px; width: calc(100% + 8px); }
.mud-main-content .mud-grid-spacing-xs-6 > .mud-grid-item { padding: 8px 0 0 8px; }
.mud-main-content .mud-grid-spacing-xs-3,
.mud-main-content .mud-grid-spacing-xs-4 { margin: -6px 0 0 -6px; width: calc(100% + 6px); }
.mud-main-content .mud-grid-spacing-xs-3 > .mud-grid-item,
.mud-main-content .mud-grid-spacing-xs-4 > .mud-grid-item { padding: 6px 0 0 6px; }
/* Filteri koji su na tabletu pola širine (xs=12 sm=6) idu po dva u redu i na
telefonu — ali samo padajuće liste i datumi. Tekst polja, pretraga (autocomplete)
i blokovi sa sadržajem ostaju preko cele širine: u 165px se ne da kucati. */
.mud-main-content .mud-grid-item-xs-12.mud-grid-item-sm-6:has(> .mud-select, > .mud-picker) {
flex-basis: 50%; max-width: 50%; flex-grow: 0;
}
.mud-main-content .pa-3:has(> .mud-grid) { padding: 8px !important; }
/* Redovi dugmadi / brzih filtera: prelamaju se umesto da izlaze van ekrana,
a dugme se ne skuplja ispod širine svog teksta. */
.mud-main-content .d-flex.flex-row,
.mud-main-content .mud-toolbar { flex-wrap: wrap; row-gap: 6px; }
.mud-main-content .mud-button-root { flex-shrink: 0; }
.mud-main-content .mud-button-label { white-space: nowrap; }
.mud-main-content .mud-button-group-root { flex-wrap: wrap; }
/* Fiksni min-width na tekstu u redu (npr. "28.09 – 04.10.2026" sa 280px u Moj plan)
gura sve ostalo u nove redove — na telefonu neka bude širok koliko mu treba. */
.mud-main-content .d-flex.flex-row > .mud-typography[style*="min-width"] { min-width: 0 !important; }
/* Polja nikad šira od ekrana (fiksne min-width vrednosti na izveštajima). */
.mud-main-content .mud-input-control { min-width: 0 !important; max-width: 100%; }
}
/* ─────────────────────────────────────────────────────────────────────────────
SalesFleet — tabele na telefonu (<600px) kao kartice.
MudTable/MudDataGrid bez Breakpoint.None na telefonu slaže ćelije jednu ispod
druge (klasa .mud-xs-table) — red od 8 kolona postane 8 redova po 40px. Ovde se
isti taj red pretvara u karticu: naslovna ćelija (.sf-td-title) preko cele širine,
ostale u mreži 2-3 kolone sa nazivom polja iznad vrednosti (data-label).
Isto važi za obične
(stavke dokumenta/otpremnice).
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.mud-xs-table .mud-table-body .mud-table-row,
table.sf-stack > tbody > tr {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
column-gap: 12px;
row-gap: 6px;
align-items: start;
padding: 10px 14px;
border-bottom: 1px solid var(--mud-palette-table-lines);
}
.mud-xs-table .mud-table-body .mud-table-row .mud-table-cell,
.mud-xs-table.mud-table-dense .mud-table-body .mud-table-row .mud-table-cell,
table.sf-stack > tbody > tr > td {
display: block;
min-width: 0 !important;
padding: 0;
border: none !important;
font-size: 12.5px;
line-height: 1.35;
text-align: start !important;
overflow-wrap: anywhere;
white-space: normal !important;
width: auto !important;
}
.mud-xs-table .mud-table-body .mud-table-cell:before,
table.sf-stack > tbody > tr > td:before {
content: attr(data-label);
display: block;
padding: 0;
margin-bottom: 1px;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px;
font-weight: 500;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
white-space: nowrap;
}
/* naslov kartice */
.mud-xs-table .mud-table-body .mud-table-cell.sf-td-title,
table.sf-stack > tbody > tr > td.sf-td-title {
grid-column: 1 / -1;
order: -1;
font-size: 14.5px;
font-weight: 600;
}
.mud-xs-table .mud-table-body .mud-table-cell.sf-td-title:before,
table.sf-stack > tbody > tr > td.sf-td-title:before { display: none; }
/* ćelije preko cele širine: dugačak tekst, akcije, ćelije bez naziva */
.mud-xs-table .mud-table-body .mud-table-cell.sf-td-full,
table.sf-stack > tbody > tr > td.sf-td-full { grid-column: 1 / -1; }
.mud-xs-table .mud-table-body .mud-table-cell.sf-td-actions,
.mud-xs-table .mud-table-body .mud-table-cell:not([data-label]),
table.sf-stack > tbody > tr > td.sf-td-actions {
grid-column: 1 / -1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.mud-xs-table .mud-table-body .mud-table-cell.sf-td-actions { justify-content: flex-end; }
.mud-xs-table .mud-table-body .mud-table-cell:empty,
table.sf-stack > tbody > tr > td:empty { display: none; }
/* red sa colspan-om (ChildRowContent, "nema podataka") ostaje običan blok */
.mud-xs-table .mud-table-body .mud-table-row > .mud-table-cell[colspan] { grid-column: 1 / -1; }
table.sf-stack, table.sf-stack > tbody { display: block; width: 100%; }
.mud-xs-table .mud-table-body .mud-table-cell.sf-td-span2,
table.sf-stack > tbody > tr > td.sf-td-span2 { grid-column: span 2; }
table.sf-stack > tfoot { display: block; }
table.sf-stack > tfoot > tr {
display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline;
gap: 4px 14px; padding: 10px 14px;
}
table.sf-stack > tfoot > tr > td { display: block; padding: 0; border: none; width: auto !important; }
table.sf-stack > tfoot > tr > td:empty { display: none; }
table.sf-stack input, table.sf-stack select { min-height: 34px; font-size: 14px; }
table.sf-stack > thead { display: none; }
/* zbirni red (FooterContent) MudBlazor na telefonu sakriva — zbir je bitan, vraćamo ga */
.mud-xs-table .mud-table-root .mud-table-foot { display: block; }
.mud-xs-table .mud-table-foot .mud-table-row {
display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px;
background: var(--mud-palette-background-grey);
}
.mud-xs-table .mud-table-foot .mud-table-cell { display: block; padding: 0; border: none; }
.mud-xs-table .mud-table-foot .mud-table-cell:empty { display: none; }
.mud-xs-table .mud-table-smalldevices-sortselect { padding: 4px 14px 8px; }
}
/* Isto za tabele kojima je prelom postavljen na Sm (<960px) odnosno Md (<1280px). */
@media (max-width: 960px) {
.mud-sm-table .mud-table-body .mud-table-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
column-gap: 12px;
row-gap: 6px;
align-items: start;
padding: 10px 14px;
border-bottom: 1px solid var(--mud-palette-table-lines);
}
.mud-sm-table .mud-table-body .mud-table-row .mud-table-cell,
.mud-sm-table.mud-table-dense .mud-table-body .mud-table-row .mud-table-cell {
display: block;
min-width: 0 !important;
padding: 0;
border: none !important;
font-size: 12.5px;
line-height: 1.35;
text-align: start !important;
overflow-wrap: anywhere;
white-space: normal !important;
width: auto !important;
}
.mud-sm-table .mud-table-body .mud-table-cell:before {
content: attr(data-label);
display: block;
padding: 0;
margin-bottom: 1px;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px;
font-weight: 500;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
white-space: nowrap;
}
.mud-sm-table .mud-table-body .mud-table-cell.sf-td-title {
grid-column: 1 / -1;
order: -1;
font-size: 14.5px;
font-weight: 600;
}
.mud-sm-table .mud-table-body .mud-table-cell.sf-td-title:before { display: none; }
.mud-sm-table .mud-table-body .mud-table-cell.sf-td-full { grid-column: 1 / -1; }
.mud-sm-table .mud-table-body .mud-table-cell.sf-td-actions,
.mud-sm-table .mud-table-body .mud-table-cell:not([data-label]) {
grid-column: 1 / -1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.mud-sm-table .mud-table-body .mud-table-cell.sf-td-actions { justify-content: flex-end; }
.mud-sm-table .mud-table-body .mud-table-cell:empty { display: none; }
.mud-sm-table .mud-table-body .mud-table-row > .mud-table-cell[colspan] { grid-column: 1 / -1; }
.mud-sm-table .mud-table-body .mud-table-cell.sf-td-span2 { grid-column: span 2; }
.mud-sm-table .mud-table-root .mud-table-foot { display: block; }
.mud-sm-table .mud-table-foot .mud-table-row {
display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px;
background: var(--mud-palette-background-grey);
}
.mud-sm-table .mud-table-foot .mud-table-cell { display: block; padding: 0; border: none; }
.mud-sm-table .mud-table-foot .mud-table-cell:empty { display: none; }
.mud-sm-table .mud-table-smalldevices-sortselect { padding: 4px 14px 8px; }
}
@media (max-width: 1280px) {
.mud-md-table .mud-table-body .mud-table-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
column-gap: 12px;
row-gap: 6px;
align-items: start;
padding: 10px 14px;
border-bottom: 1px solid var(--mud-palette-table-lines);
}
.mud-md-table .mud-table-body .mud-table-row .mud-table-cell,
.mud-md-table.mud-table-dense .mud-table-body .mud-table-row .mud-table-cell {
display: block;
min-width: 0 !important;
padding: 0;
border: none !important;
font-size: 12.5px;
line-height: 1.35;
text-align: start !important;
overflow-wrap: anywhere;
white-space: normal !important;
width: auto !important;
}
.mud-md-table .mud-table-body .mud-table-cell:before {
content: attr(data-label);
display: block;
padding: 0;
margin-bottom: 1px;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9.5px;
font-weight: 500;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--mud-palette-text-secondary);
white-space: nowrap;
}
.mud-md-table .mud-table-body .mud-table-cell.sf-td-title {
grid-column: 1 / -1;
order: -1;
font-size: 14.5px;
font-weight: 600;
}
.mud-md-table .mud-table-body .mud-table-cell.sf-td-title:before { display: none; }
.mud-md-table .mud-table-body .mud-table-cell.sf-td-full { grid-column: 1 / -1; }
.mud-md-table .mud-table-body .mud-table-cell.sf-td-actions,
.mud-md-table .mud-table-body .mud-table-cell:not([data-label]) {
grid-column: 1 / -1;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.mud-md-table .mud-table-body .mud-table-cell.sf-td-actions { justify-content: flex-end; }
.mud-md-table .mud-table-body .mud-table-cell:empty { display: none; }
.mud-md-table .mud-table-body .mud-table-row > .mud-table-cell[colspan] { grid-column: 1 / -1; }
.mud-md-table .mud-table-body .mud-table-cell.sf-td-span2 { grid-column: span 2; }
.mud-md-table .mud-table-root .mud-table-foot { display: block; }
.mud-md-table .mud-table-foot .mud-table-row {
display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px;
background: var(--mud-palette-background-grey);
}
.mud-md-table .mud-table-foot .mud-table-cell { display: block; padding: 0; border: none; }
.mud-md-table .mud-table-foot .mud-table-cell:empty { display: none; }
.mud-md-table .mud-table-smalldevices-sortselect { padding: 4px 14px 8px; }
}
/* Tabele koje ostaju tabele (MudSimpleTable, široki izveštaji): skrol u stranu
unutar okvira umesto da rašire stranicu, sa gušćim ćelijama. */
@media (max-width: 959.98px) {
.mud-main-content .mud-simple-table,
.mud-dialog .mud-simple-table { max-width: 100%; }
.mud-main-content .mud-simple-table > div,
.mud-dialog .mud-simple-table > div { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mud-simple-table table th, .mud-simple-table table td { padding: 5px 8px !important; font-size: 12.5px; }
.mud-simple-table table th { white-space: nowrap; }
/* Tabovi: traka se skroluje prstom, tab nije širi od svog teksta. */
.mud-main-content .mud-tabs-tabbar .mud-tab,
.mud-dialog .mud-tabs-tabbar .mud-tab { min-width: 0; padding: 6px 12px; font-size: 13px; }
.mud-main-content .mud-tabs-panels > .pa-6,
.mud-main-content .mud-tabs-panels > .pa-4 { padding: 10px !important; }
/* Papiri/kartice sa desktop padding-om 16-24px. */
.mud-main-content .mud-paper.pa-6,
.mud-main-content .mud-paper.pa-5 { padding: 12px !important; }
.mud-main-content .mud-paper.pa-4 { padding: 10px !important; }
.mud-main-content .mud-card-content { padding: 12px; }
}
/* Dijalozi na telefonu: skoro pun ekran po širini (MudBlazor ostavlja 32px sa svake
strane → forma od 326px), manji padding, dugmad se prelamaju. */
@media (max-width: 600px) {
.mud-dialog-container .mud-dialog:not(.mud-dialog-fullscreen) {
margin: 8px;
width: calc(100% - 16px);
max-width: calc(100% - 16px) !important;
max-height: calc(100% - 16px);
max-height: calc(100dvh - 16px);
}
.mud-dialog .mud-dialog-title { padding: 12px 14px; }
.mud-dialog .mud-dialog-title:has(.mud-button-close) { padding-inline-end: 52px; }
.mud-dialog .mud-dialog-title .mud-typography-h6 { font-size: 1.05rem; line-height: 1.3; }
.mud-dialog .mud-dialog-content { padding: 8px 14px; }
.mud-dialog .mud-dialog-actions { flex-wrap: wrap; padding: 8px 10px; }
.mud-dialog .mud-dialog-actions .mud-button-label { white-space: nowrap; }
.mud-dialog .mud-input-control { min-width: 0 !important; max-width: 100%; }
.mud-dialog .d-flex.flex-row { flex-wrap: wrap; row-gap: 6px; }
.mud-dialog .mud-grid-spacing-xs-6 { margin: -8px 0 0 -8px; width: calc(100% + 8px); }
.mud-dialog .mud-grid-spacing-xs-6 > .mud-grid-item { padding: 8px 0 0 8px; }
/* Snackbar preko cele širine, da ne seče tekst. */
.mud-snackbar { min-width: 0; max-width: calc(100vw - 16px); }
}
/* Definicione mreže (naziv polja + vrednost) sa 4 u redu: na telefonu po 2,
a tekst se lomi unutar svoje ćelije umesto da pređe preko susedne. */
@media (max-width: 600px) {
.mud-main-content .mud-grid-item-xs-3,
.mud-dialog .mud-grid-item-xs-3 { flex-basis: 50%; max-width: 50%; }
.mud-main-content .mud-grid-item,
.mud-dialog .mud-grid-item { min-width: 0; }
.mud-main-content .mud-grid-item > .mud-typography,
.mud-dialog .mud-grid-item > .mud-typography { overflow-wrap: anywhere; }
}
/* Ćelija bez naziva kolone (akcije) nema šta da ispiše iznad vrednosti. */
.mud-table-cell:not([data-label]):before,
table.sf-stack > tbody > tr > td:not([data-label]):before { display: none !important; }
/* Plan obilaska — nedeljna matrica (komercijalista × 7 dana) staje u širinu telefona
umesto da se skroluje u stranu sa jednim vidljivim danom. */
@media (max-width: 600px) {
.mud-main-content .sf-matrix-wrap { padding: 4px; }
.mud-main-content .sf-matrix-wrap .sf-matrix { font-size: 12px; table-layout: fixed; }
.mud-main-content .sf-matrix-wrap .sf-matrix th,
.mud-main-content .sf-matrix-wrap .sf-matrix td { padding: 6px 2px; }
.mud-main-content .sf-matrix-wrap .sf-matrix .sf-matrix-corner { min-width: 0; width: 34%; font-size: 11px; padding-left: 6px; }
.mud-main-content .sf-matrix-wrap .sf-matrix .sf-matrix-day { min-width: 0; }
.mud-main-content .sf-matrix-wrap .sf-matrix .sf-matrix-dow { font-size: 8.5px; letter-spacing: .5px; }
.mud-main-content .sf-matrix-wrap .sf-matrix .sf-matrix-date { font-size: 10px; }
.mud-main-content .sf-matrix-name .mud-button-root { min-width: 0; padding: 2px 4px; justify-content: flex-start; text-align: left; flex-shrink: 1; }
.mud-main-content .sf-matrix-name .mud-button-label { white-space: normal; font-size: 11.5px; line-height: 1.2; }
.mud-main-content .sf-matrix-name .mud-button-icon-start { display: none; }
.mud-main-content .sf-matrix-wrap .sf-matrix-count { min-width: 20px; padding: 1px 5px; font-size: 11px; }
}
/* Nedeljni plan: prazan dan ne drži 200px visine kad su dani jedan ispod drugog. */
@media (max-width: 600px) {
.mud-main-content .sf-week-grid { padding: 4px; gap: 6px; }
.mud-main-content .sf-week-grid .sf-day-card { min-height: 0; }
.mud-main-content .sf-week-grid .sf-day-empty { padding: 8px; }
}
@media (max-width: 600px) {
/* KPI kartice (papir sa jednim brojem) po dve u redu umesto jedne ispod druge. */
.mud-main-content .mud-grid-item-xs-12:has(> .mud-paper > .sf-kpi-num) {
flex-basis: 50%; max-width: 50%; flex-grow: 0;
}
.mud-main-content .mud-grid-item > .mud-paper > .sf-kpi-num { font-size: 18px; overflow-wrap: anywhere; }
.mud-main-content .mud-grid-item > .mud-paper:has(> .sf-kpi-num) { padding: 8px 10px !important; }
.mud-main-content .mud-grid-item > .mud-paper:has(> .sf-kpi-num) > .mud-typography-caption {
font-size: 10px; line-height: 1.3; display: block;
}
/* Datumi i padajuće liste u redu sa filterima (MudStack Row): po dva u redu. */
.mud-main-content .d-flex.flex-row > .mud-picker,
.mud-main-content .d-flex.flex-row > .mud-select:not(.mud-autocomplete) {
flex: 1 1 150px; width: auto; min-width: 0; max-width: 100%;
}
.mud-main-content .d-flex.flex-row > .mud-input-control:not(.mud-input-control-boolean-input),
.mud-main-content .d-flex.flex-row > .mud-autocomplete { flex: 1 1 100%; }
/* Tabela složena u kartice teče sa stranicom — bez unutrašnjeg skrola fiksne visine. */
.mud-xs-table .mud-table-container,
.mud-sm-table .mud-table-container,
.mud-md-table .mud-table-container {
height: auto !important; max-height: none !important; overflow: visible !important;
}
}
/* Pivot izveštaji (Syncfusion) su desktop alat — na telefonu se bar skroluju unutar
svog okvira umesto da rašire celu stranicu. */
@media (max-width: 959.98px) {
.mud-main-content .e-pivotview {
width: auto !important; min-width: 0 !important; max-width: calc(100vw - 24px);
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
}
@media (max-width: 600px) {
/* I u dijalozima: datumi i padajuće liste po dva u redu. */
.mud-dialog .mud-grid-item-xs-12.mud-grid-item-sm-6:has(> .mud-select, > .mud-picker) {
flex-basis: 50%; max-width: 50%; flex-grow: 0;
}
}
@media (max-width: 600px) {
/* Zaglavlje stranice: naslov dobija svoj red (uz dugme "nazad" staje), a filteri
i dugmad se prelamaju ispod — umesto da sabiju naslov u kolonu od 100px. */
.mud-main-content .d-flex.flex-row > .mud-typography-h1,
.mud-main-content .d-flex.flex-row > .mud-typography-h2,
.mud-main-content .d-flex.flex-row > .mud-typography-h3,
.mud-main-content .d-flex.flex-row > .mud-typography-h4,
.mud-main-content .d-flex.flex-row > div:has(> .mud-typography-h1, > .mud-typography-h2, > .mud-typography-h3, > .mud-typography-h4) {
flex: 1 1 70% !important; min-width: 0;
}
}
/* Planer rute je fiksni desktop ekran (100dvh, bez skrola, stopovi levo / mapa desno).
Na telefonu kolone idu jedna ispod druge i stranica normalno skroluje — inače se
do mape i zbira uopšte ne može doći. */
@media (max-width: 959.98px) {
.mud-layout .mud-main-content:has(.sf-rute-root) { overflow: visible !important; }
.mud-main-content .sf-rute-root {
margin: -12px; padding: 8px 10px 16px;
height: auto; min-height: calc(100dvh - 48px);
display: block; overflow: visible;
}
.mud-main-content .sf-rute-root .sf-rute-grid-wrap,
.mud-main-content .sf-rute-root .sf-rute-grid-wrap > .mud-grid,
.mud-main-content .sf-rute-root .sf-rute-grid-wrap .mud-grid-item { height: auto !important; overflow: visible; }
.mud-main-content .sf-rute-root .sf-rute-left-col,
.mud-main-content .sf-rute-root .sf-rute-right-col {
display: block !important; height: auto !important; overflow: visible !important;
}
.mud-main-content .sf-rute-root .sf-rute-tab-paper,
.mud-main-content .sf-rute-root .sf-rute-tab-paper .mud-tabs,
.mud-main-content .sf-rute-root .sf-rute-tab-paper .mud-tabs-panels,
.mud-main-content .sf-rute-root .sf-rute-tab-paper .mud-tab-panel {
display: block !important; height: auto !important; overflow: visible !important;
}
/* lista stopova ne sme da odgurne mapu predaleko */
.mud-main-content .sf-rute-root .sf-rute-tab-paper .mud-tab-panel { max-height: 60vh; overflow-y: auto !important; }
}
/* Plan na mapi: u jednoj koloni lista rezultata je i dalje tražila "span 2", što pravi
drugu (praznu) kolonu u koju upadne mapa i dobije širinu 0 — mapa se na telefonu ne vidi. */
@media (max-width: 900px) {
.mud-main-content .sf-planmap-layout { min-height: 0; }
.mud-main-content .sf-planmap-layout .sf-planmap-results { grid-column: 1; height: auto; max-height: none; }
.mud-main-content .sf-planmap-layout .sf-planmap-center { height: 380px; }
}
/* Klasifikacija klijenata: zaglavlje panela — naziv gore, čipovi ispod (umesto preklapanja). */
@media (max-width: 600px) {
.mud-main-content .krit-header { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.mud-main-content .krit-header .krit-header-left { flex: 1 1 100%; min-width: 0; }
.mud-main-content .krit-header .krit-chips { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; }
.mud-main-content .krit-header .krit-chips .mud-chip { margin: 0 4px 0 0; }
.mud-main-content .mud-expand-panel .mud-expand-panel-header { padding: 10px 12px; }
.mud-main-content .mud-expand-panel .mud-expand-panel-content { padding: 0 10px 10px; }
}
/* Mesečni kalendar (događaji, odsustva): ćelija je na telefonu ~50px, pa tekst čipa
ne staje — čip postaje obojena crtica, a nazivi su u listi ispod kalendara. */
@media (max-width: 600px) {
.mud-main-content .sf-cal .sf-cal-dow-h { padding: 5px 2px; font-size: 9px; letter-spacing: .5px; }
.mud-main-content .sf-cal .sf-cal-cell { height: 54px; padding: 3px 3px 2px; }
.mud-main-content .sf-cal .sf-cal-day-num { font-size: 11px; margin-bottom: 2px; }
.mud-main-content .sf-cal .sf-cal-chip {
height: 6px; padding: 0; font-size: 0; line-height: 0;
border-width: 0; border-radius: 3px;
background-color: currentColor !important;
}
}
/* ─────────────────────────────────────────────────────────────────────────────
SalesFleet — QR skener (Components/Shared/QrScanner.razor, Troškovi).
Kvadratni prozor kamere sa okvirom za nišanjenje; video je "cover" pa kadar
popunjava prozor i na uspravnom telefonu i na položenoj web kameri.
───────────────────────────────────────────────────────────────────────────── */
.sf-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sf-qr-view {
position: relative;
width: 100%;
max-width: 420px;
aspect-ratio: 1 / 1;
border-radius: 6px;
overflow: hidden;
background: #111;
color: #fff;
}
.sf-qr-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-qr-frame {
position: absolute;
inset: 12%;
border: 2px solid rgba(255, 255, 255, .9);
border-radius: 10px;
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
pointer-events: none;
}
.sf-qr-overlay {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center; gap: 10px;
background: rgba(0, 0, 0, .55);
font-size: 13px;
}
.sf-qr-torch.mud-icon-button {
position: absolute; right: 8px; bottom: 8px;
background: rgba(0, 0, 0, .45);
}
.sf-qr-hint { font-size: 12.5px; color: var(--mud-palette-text-secondary); text-align: center; }
.sf-qr-status {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 28px 8px; font-size: 14px;
}
.sf-qr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.sf-qr > .mud-alert { width: 100%; }