/* Field Tracking Dashboard - custom styles complementing Tailwind */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 8px; } .dark ::-webkit-scrollbar-thumb { background: #475569; } .kpi-card { transition: transform .2s ease, box-shadow .2s ease; } .kpi-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -8px rgba(0,0,0,.15); } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll table { min-width: 900px; } .badge { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; padding: .25rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 600; min-width: 4.25rem; text-align: center; } /* Uniform pill width within a data table: every badge in the same table column stretches to match its widest sibling, so short values like "6" or "3%" render as an equally-sized oval as long ones like "27.2" or "100.6%" in the same column, instead of shrink-wrapping per row. */ .table-scroll table .badge { width: 100%; } /* MITS Status column pill (team-leader/admin device tables): roomier than the default .badge - taller padding and bolder weight so the status reads as a clear, full-width oval highlight per row. */ .mits-status-pill { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: .45rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 700; } /* Fixed-size oval counters (MITS "Devices Per Technician" list): unlike .badge, width/height never grow with digit count, so a "0" and a "27" render as identically-sized ovals in a neat aligned row instead of shrink-wrapping to their content. */ .tech-pill { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 1.85rem; border-radius: 999px; font-size: .85rem; font-weight: 700; } .progress-track { background: #e2e8f0; border-radius: 999px; height: .5rem; overflow: hidden; } .dark .progress-track { background: #334155; } .progress-fill { height: 100%; border-radius: 999px; transition: width .5s ease; } .sidebar-link.active { background: linear-gradient(90deg, rgba(242,98,46,.15), transparent); border-left: 3px solid #f2622e; color: #e2531f; } .dark .sidebar-link.active { color: #ffa383; } .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .fade-in { animation: fadeIn .3s ease; } @keyframes fadeIn { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: translateY(0); } } /* --------------------------------------------------------------- Mobile global shrink Tailwind's utility classes (padding, gap, font-size, width/height, border-radius, etc.) are almost all defined in `rem`, and `rem` is always relative to the ROOT font-size (default 16px). By reducing the root font-size only on small screens, EVERY rem-based utility class shrinks proportionally in one place, without needing to touch every element/class in every page. Fixed-px things (borders, box-shadow blur, icons sized in `em`) scale naturally too since 1em = current font-size. --------------------------------------------------------------- */ @media (max-width: 767px) { html { font-size: 87.5%; } /* 16px -> 14px : every rem-based size shrinks ~12.5% */ } @media (max-width: 480px) { html { font-size: 81.25%; } /* 16px -> 13px : a bit more on very small phones */ } @media (max-width: 360px) { html { font-size: 75%; } /* 16px -> 12px : smallest phones */ } @media (max-width: 768px) { .table-scroll table { min-width: 700px; } .badge { padding: .22rem .7rem; font-size: .8rem; min-width: 3.75rem; } } @media (max-width: 480px) { .table-scroll table { min-width: 600px; } }