/* ================================================================ police-mis-dashboard.css Chandigarh Police — MIS Dashboard Shared Stylesheet Version 1.0 | Scope: All 9 MIS Dashboard Groups Place in: wwwroot/css/police-mis-dashboard.css ================================================================ */ /* ── Google Font (add to _Layout.cshtml ) ──────────────── */ /* @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:wght@600;700&display=swap'); */ /* ── Theme Tokens ─────────────────────────────────────────────── */ :root { --mis-primary: #2d1a6e; --mis-primary-hover: #3d2a8e; --mis-primary-light: #ede9f9; --mis-primary-mid: #c5bde0; --mis-accent: #5b4fcf; --mis-accent-light: #f0eeff; --mis-success: #166534; --mis-success-bg: #dcfce7; --mis-success-border: #86efac; --mis-danger: #991b1b; --mis-danger-bg: #fee2e2; --mis-danger-border: #fca5a5; --mis-warning: #92400e; --mis-warning-bg: #fef3c7; --mis-warning-border: #fcd34d; --mis-info: #1e3a8a; --mis-info-bg: #dbeafe; --mis-info-border: #93c5fd; --mis-neutral: #374151; --mis-neutral-bg: #f3f4f6; --mis-border: #e5e7eb; --mis-border-strong: #c5bde0; --mis-text: #111827; --mis-text-soft: #4b5563; --mis-text-muted: #9ca3af; --mis-bg-page: #f5f5fa; --mis-bg-card: #ffffff; --mis-bg-header: #ffffff; --mis-shadow-xs: 0 1px 2px rgba(0,0,0,.06); --mis-shadow-sm: 0 1px 4px rgba(45,26,110,.08), 0 1px 3px rgba(0,0,0,.06); --mis-shadow-md: 0 4px 14px rgba(45,26,110,.12); --mis-shadow-lg: 0 8px 28px rgba(45,26,110,.16); --mis-shadow-panel: -6px 0 36px rgba(45,26,110,.20); --mis-radius: 10px; --mis-radius-sm: 6px; --mis-radius-xs: 4px; --mis-ease: cubic-bezier(.4, 0, .2, 1); --mis-t-fast: 150ms; --mis-t-mid: 240ms; --mis-t-panel: 300ms cubic-bezier(.4, 0, .2, 1); --mis-font: 'Barlow', 'Segoe UI', system-ui, sans-serif; --mis-font-mono: 'Consolas', 'Cascadia Code', monospace; } /* ── Wrapper ──────────────────────────────────────────────────── */ .mis-wrapper { font-family: var(--mis-font); color: var(--mis-text); background: var(--mis-bg-page); min-height: 100%; padding-bottom: 24px; } /* ================================================================ FILTER BAR CARD ================================================================ */ .mis-filter-card { background: var(--mis-bg-card); border: 1px solid var(--mis-border); border-radius: var(--mis-radius); box-shadow: var(--mis-shadow-sm); padding: 12px 18px; margin-bottom: 14px; } .mis-filter-inner { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; } /* Filter icon column */ .mis-filter-icon-col { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 10px; gap: 4px; color: var(--mis-primary); flex-shrink: 0; background: var(--mis-primary-light); border: 1px solid var(--mis-primary-mid); border-radius: var(--mis-radius-sm); min-width: 52px; align-self: flex-end; margin-bottom: 1px; } .mis-filter-icon-col i { font-size: 20px; } .mis-filter-icon-col span { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mis-primary); } /* Individual filter group */ .mis-filter-group { display: flex; flex-direction: column; gap: 3px; flex: 1 1 140px; max-width: 196px; } .mis-filter-group.--date { flex: 1 1 200px; max-width: 240px; } .mis-filter-group.--btn { flex: 0 0 auto; max-width: none; } /* Label above each control */ .mis-filter-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mis-text-soft); white-space: nowrap; } /* Select */ .mis-select { appearance: none; -webkit-appearance: none; width: 100%; background-color: #f8f9fc; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%232d1a6e' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; border: 1px solid var(--mis-border); border-radius: var(--mis-radius-sm); padding: 7px 30px 7px 10px; font-family: var(--mis-font); font-size: 13px; color: var(--mis-text); cursor: pointer; transition: border-color var(--mis-t-fast) var(--mis-ease), box-shadow var(--mis-t-fast) var(--mis-ease); } .mis-select:focus { outline: none; border-color: var(--mis-accent); box-shadow: 0 0 0 3px rgba(91, 79, 207, .14); } .mis-select:disabled { opacity: .45; cursor: not-allowed; } /* Date range pair */ .mis-daterange { display: flex; align-items: center; gap: 4px; background: #f8f9fc; border: 1px solid var(--mis-border); border-radius: var(--mis-radius-sm); padding: 5px 10px; transition: border-color var(--mis-t-fast); } .mis-daterange:focus-within { border-color: var(--mis-accent); box-shadow: 0 0 0 3px rgba(91, 79, 207, .14); } .mis-daterange i { color: var(--mis-primary); font-size: 11px; flex-shrink: 0; } .mis-daterange-sep { color: var(--mis-text-muted); font-size: 11px; flex-shrink: 0; } .mis-date-input { border: none; background: transparent; font-family: var(--mis-font); font-size: 12.5px; color: var(--mis-text); min-width: 0; flex: 1; padding: 2px 0; } .mis-date-input:focus { outline: none; } /* Show Data button */ .mis-btn-primary { display: inline-flex; align-items: center; gap: 7px; background: var(--mis-primary); color: #fff; border: none; border-radius: var(--mis-radius-sm); padding: 8px 20px; font-family: var(--mis-font); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--mis-t-fast) var(--mis-ease), box-shadow var(--mis-t-fast) var(--mis-ease), transform 80ms; align-self: flex-end; letter-spacing: 0.01em; } .mis-btn-primary:hover:not(:disabled) { background: var(--mis-primary-hover); box-shadow: 0 4px 14px rgba(45, 26, 110, .26); } .mis-btn-primary:active:not(:disabled) { transform: translateY(1px); } .mis-btn-primary:disabled { opacity: .55; cursor: not-allowed; } /* ================================================================ MAIN DASHBOARD CARD ================================================================ */ .mis-card { background: var(--mis-bg-card); border: 1px solid var(--mis-border); border-radius: var(--mis-radius); box-shadow: var(--mis-shadow-sm); overflow: hidden; position: relative; } /* ── Card Header ─────────────────────────────────────────────── */ .mis-card-header { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--mis-border); background: var(--mis-bg-header); min-height: 54px; } .mis-card-title { font-size: 14px; font-weight: 700; color: var(--mis-text); display: flex; align-items: center; gap: 8px; margin: 0; flex-shrink: 0; letter-spacing: -0.01em; } .mis-card-title i { color: var(--mis-accent); font-size: 13px; } .mis-header-spacer { flex: 1 1 auto; } /* Section label (tiny uppercase above each control group) */ .mis-section-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mis-text-muted); margin-bottom: 3px; } /* Report View dropdown */ .mis-header-group { display: flex; flex-direction: column; } .mis-report-view-select { appearance: none; -webkit-appearance: none; background-color: var(--mis-primary-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%232d1a6e' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; border: 1px solid var(--mis-primary-mid); border-radius: var(--mis-radius-sm); padding: 5px 26px 5px 9px; font-family: var(--mis-font); font-size: 12px; font-weight: 600; color: var(--mis-primary); cursor: pointer; min-width: 170px; transition: border-color var(--mis-t-fast); } .mis-report-view-select:focus { outline: none; border-color: var(--mis-accent); } /* ── Group By Radio Bar ──────────────────────────────────────── */ .mis-groupby-bar { display: flex; border: 1px solid var(--mis-primary-mid); border-radius: var(--mis-radius-sm); overflow: hidden; } .mis-groupby-item { position: relative; } .mis-groupby-item input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .mis-groupby-item label { display: block; padding: 5px 14px; font-family: var(--mis-font); font-size: 12px; font-weight: 500; color: var(--mis-primary); background: var(--mis-bg-card); cursor: pointer; border-right: 1px solid var(--mis-primary-mid); transition: background var(--mis-t-fast), color var(--mis-t-fast); user-select: none; white-space: nowrap; } .mis-groupby-item:last-child label { border-right: none; } .mis-groupby-item input[type="radio"]:checked + label { background: var(--mis-primary); color: #fff; font-weight: 700; } .mis-groupby-item label:hover { background: var(--mis-primary-light); } .mis-groupby-item input[type="radio"]:checked + label:hover { background: var(--mis-primary); } .mis-groupby-item input[type="radio"]:disabled + label { opacity: .38; cursor: not-allowed; background: var(--mis-neutral-bg) !important; color: var(--mis-text-muted) !important; } /* ── Download Buttons ────────────────────────────────────────── */ .mis-download-bar { display: flex; gap: 6px; } .mis-btn-dl { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; font-family: var(--mis-font); font-size: 12px; font-weight: 600; border-radius: var(--mis-radius-sm); border: 1.5px solid; cursor: pointer; background: var(--mis-bg-card); transition: background var(--mis-t-fast), border-color var(--mis-t-fast); } .mis-btn-dl.--excel { color: var(--mis-success); border-color: var(--mis-success-border); } .mis-btn-dl.--excel:hover { background: var(--mis-success-bg); border-color: var(--mis-success); } .mis-btn-dl.--pdf { color: var(--mis-danger); border-color: var(--mis-danger-border); } .mis-btn-dl.--pdf:hover { background: var(--mis-danger-bg); border-color: var(--mis-danger); } /* ================================================================ TABS ================================================================ */ .mis-tabs { display: flex; padding: 0 16px; border-bottom: 2px solid var(--mis-border); background: var(--mis-bg-card); gap: 0; } .mis-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 4px; margin-right: 22px; margin-bottom: -2px; font-family: var(--mis-font); font-size: 13px; font-weight: 500; color: var(--mis-text-muted); border: none; border-bottom: 2.5px solid transparent; background: transparent; cursor: pointer; transition: color var(--mis-t-fast), border-color var(--mis-t-fast); } .mis-tab i { font-size: 12px; } .mis-tab:hover:not(.--active) { color: var(--mis-primary); } .mis-tab.--active { color: var(--mis-primary); font-weight: 700; border-bottom-color: var(--mis-primary); } /* ================================================================ LOADING OVERLAY ================================================================ */ .mis-loader { position: absolute; inset: 0; background: rgba(255, 255, 255, .75); display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 30; opacity: 0; pointer-events: none; transition: opacity var(--mis-t-mid) var(--mis-ease); border-radius: 0 0 var(--mis-radius) var(--mis-radius); } .mis-loader.--active { opacity: 1; pointer-events: all; } .mis-loader-spinner { width: 22px; height: 22px; border: 2.5px solid var(--mis-primary-light); border-top-color: var(--mis-primary); border-radius: 50%; animation: mis-spin .65s linear infinite; flex-shrink: 0; } .mis-loader-text { font-size: 13px; font-weight: 600; color: var(--mis-primary); } @keyframes mis-spin { to { transform: rotate(360deg); } } /* ================================================================ STAT SUMMARY CARDS — icon badge style (image 2) ================================================================ */ .mis-stat-row { display: flex; gap: 12px; padding: 14px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--mis-border); } .mis-stat { flex: 1 1 160px; min-width: 140px; padding: 14px 16px; border-radius: var(--mis-radius); border: 1px solid var(--mis-border); background: var(--mis-bg-card); display: flex; align-items: center; gap: 14px; box-shadow: var(--mis-shadow-xs); transition: box-shadow var(--mis-t-fast), transform var(--mis-t-fast); } .mis-stat:hover { box-shadow: var(--mis-shadow-sm); transform: translateY(-1px); } /* Icon badge */ .mis-stat-icon-wrap { width: 46px; height: 46px; border-radius: var(--mis-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; } .mis-stat-icon-wrap.--total { background: var(--mis-info-bg); color: var(--mis-info); } .mis-stat-icon-wrap.--verified { background: var(--mis-success-bg); color: var(--mis-success); } .mis-stat-icon-wrap.--unverified { background: var(--mis-danger-bg); color: var(--mis-danger); } .mis-stat-icon-wrap.--pendency { background: var(--mis-warning-bg); color: var(--mis-warning); } /* Text block */ .mis-stat-content { display: flex; flex-direction: column; gap: 2px; } .mis-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mis-text-muted); } .mis-stat-value { font-size: 24px; font-weight: 800; font-family: var(--mis-font); line-height: 1.1; font-variant-numeric: tabular-nums; } .mis-stat.--total .mis-stat-value { color: var(--mis-info); } .mis-stat.--verified .mis-stat-value { color: var(--mis-success); } .mis-stat.--unverified .mis-stat-value { color: var(--mis-danger); } .mis-stat.--pendency .mis-stat-value { color: var(--mis-warning); } /* Pulse on refresh */ @keyframes mis-stat-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } } .mis-stat-value.--pulse { animation: mis-stat-pulse 350ms var(--mis-ease); } /* ================================================================ DATA TABLE ================================================================ */ .mis-table-wrap { overflow-x: auto; position: relative; } .mis-table { width: 100%; border-collapse: collapse; font-family: var(--mis-font); font-size: 13px; } /* Header */ .mis-table thead { position: sticky; top: 0; z-index: 2; } .mis-table thead tr { background: var(--mis-primary); } .mis-table thead th { padding: 10px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,.92); border: none; white-space: nowrap; } .mis-table thead th.--r { text-align: right; } .mis-table thead th.--l { text-align: left; } /* Body rows */ .mis-table tbody tr { border-bottom: 1px solid #f0f1f7; transition: background var(--mis-t-fast); } .mis-table tbody tr:last-child { border-bottom: none; } .mis-table tbody tr:hover { background: #faf9ff; } .mis-table tbody td { padding: 7px 12px; vertical-align: middle; } .mis-table tbody td.--r { text-align: right; } .mis-table tbody td.--l { text-align: left; } /* Subtotal row styles */ .mis-table tbody tr.row-grand { background: var(--mis-primary) !important; } .mis-table tbody tr.row-grand td { color: #fff !important; font-weight: 700; } .mis-table tbody tr.row-grand .mis-drill { color: #d6d0f7 !important; } .mis-table tbody tr.row-grand .mis-drill:hover { color: #fff !important; } .mis-table tbody tr.row-cat { background: #ede9f9 !important; font-weight: 700; } .mis-table tbody tr.row-div { background: #f3f0fb !important; font-weight: 600; } .mis-table tbody tr.row-ps { background: #f8f7fd !important; font-weight: 500; } /* Drill links */ .mis-drill { color: var(--mis-accent); font-weight: 600; text-decoration: none; cursor: pointer; background: none; border: none; padding: 0; font-family: var(--mis-font); font-size: 13px; font-variant-numeric: tabular-nums; transition: color var(--mis-t-fast); } .mis-drill:hover { color: var(--mis-primary); text-decoration: underline; } /* Category link */ .mis-cat-link { color: var(--mis-text); font-weight: 500; text-decoration: none; transition: color var(--mis-t-fast); } .mis-cat-link:hover { color: var(--mis-accent); } /* ================================================================ CHART GRID (Dashboard tab) ================================================================ */ .mis-chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 16px; } .mis-chart-card { background: var(--mis-bg-card); border: 1px solid var(--mis-border); border-radius: var(--mis-radius); box-shadow: var(--mis-shadow-xs); overflow: hidden; cursor: pointer; transition: box-shadow var(--mis-t-mid) var(--mis-ease), transform var(--mis-t-mid) var(--mis-ease); } .mis-chart-card:hover { box-shadow: var(--mis-shadow-md); transform: translateY(-2px); } .mis-chart-card-hd { background: var(--mis-primary-light); border-bottom: 1px solid var(--mis-primary-mid); padding: 7px 12px; display: flex; align-items: center; justify-content: space-between; } .mis-chart-card-title { font-size: 11.5px; font-weight: 700; color: var(--mis-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mis-chart-card-total { font-size: 12px; font-weight: 800; color: var(--mis-primary); font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: 8px; } .mis-chart-card-body { display: flex; align-items: center; padding: 10px 12px; gap: 12px; } .mis-chart-donut-wrap { flex-shrink: 0; width: 90px; height: 90px; } .mis-chart-legend { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; } .mis-legend-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .mis-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .mis-legend-lbl { flex: 1; color: var(--mis-text-soft); font-size: 11px; } .mis-legend-val { font-weight: 700; color: var(--mis-text); font-variant-numeric: tabular-nums; } /* ================================================================ DRILL-DOWN SLIDE PANEL ================================================================ */ .mis-overlay { position: fixed; inset: 0; background: rgba(17, 14, 40, .32); z-index: 400; opacity: 0; pointer-events: none; transition: opacity var(--mis-t-panel); backdrop-filter: blur(1px); } .mis-overlay.--active { opacity: 1; pointer-events: all; } .mis-drill-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(94vw, 880px); background: var(--mis-bg-card); box-shadow: var(--mis-shadow-panel); z-index: 401; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--mis-t-panel); will-change: transform; } .mis-drill-panel.--active { transform: translateX(0); } /* Panel header */ .mis-drill-hd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--mis-primary-light); border-bottom: 2px solid var(--mis-primary-mid); flex-shrink: 0; } .mis-drill-back { display: inline-flex; align-items: center; gap: 5px; background: var(--mis-primary); color: #fff; border: none; border-radius: var(--mis-radius-sm); padding: 5px 12px; font-family: var(--mis-font); font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--mis-t-fast); flex-shrink: 0; } .mis-drill-back:hover { background: var(--mis-primary-hover); } .mis-drill-breadcrumb { flex: 1; font-size: 12px; font-weight: 600; color: var(--mis-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mis-drill-breadcrumb .bc-sep { color: var(--mis-primary-mid); margin: 0 5px; } .mis-drill-breadcrumb .bc-dim { color: var(--mis-text-muted); font-weight: 400; } .mis-drill-dl { display: inline-flex; align-items: center; gap: 5px; background: var(--mis-bg-card); color: var(--mis-primary); border: 1.5px solid var(--mis-primary-mid); border-radius: var(--mis-radius-sm); padding: 5px 12px; font-family: var(--mis-font); font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; transition: background var(--mis-t-fast), border-color var(--mis-t-fast); } .mis-drill-dl:hover { background: var(--mis-primary-light); border-color: var(--mis-primary); } /* Panel body */ .mis-drill-body { flex: 1; overflow: auto; padding: 14px 16px; } /* Drill loading state */ .mis-drill-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 80px 20px; color: var(--mis-primary); font-family: var(--mis-font); font-size: 13px; font-weight: 500; } /* Drill table */ .mis-drill-table { width: 100%; border-collapse: collapse; font-family: var(--mis-font); font-size: 12.5px; } .mis-drill-table thead { position: sticky; top: 0; z-index: 1; } .mis-drill-table thead tr { background: var(--mis-primary); } .mis-drill-table thead th { padding: 8px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,.9); border: none; white-space: nowrap; } .mis-drill-table tbody tr { border-bottom: 1px solid #f0f1f7; transition: background var(--mis-t-fast); } .mis-drill-table tbody tr:nth-child(even) { background: #fafafa; } .mis-drill-table tbody tr:hover { background: var(--mis-primary-light); } .mis-drill-table tbody td { padding: 7px 10px; vertical-align: middle; } /* ================================================================ EMPTY / ERROR STATES ================================================================ */ .mis-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 70px 24px; color: var(--mis-text-muted); } .mis-empty i { font-size: 38px; opacity: .5; } .mis-empty p { font-size: 13px; font-weight: 500; margin: 0; color: var(--mis-text-muted); } /* ================================================================ DATA REFRESH ANIMATION ================================================================ */ @keyframes mis-fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .mis-animate-in { animation: mis-fade-in 260ms var(--mis-ease) forwards; } /* Stagger on table rows */ .mis-table tbody tr { opacity: 0; animation: mis-fade-in 220ms var(--mis-ease) forwards; } .mis-table tbody tr:nth-child(1) { animation-delay: 20ms; } .mis-table tbody tr:nth-child(2) { animation-delay: 35ms; } .mis-table tbody tr:nth-child(3) { animation-delay: 50ms; } .mis-table tbody tr:nth-child(4) { animation-delay: 65ms; } .mis-table tbody tr:nth-child(5) { animation-delay: 80ms; } .mis-table tbody tr:nth-child(6) { animation-delay: 95ms; } .mis-table tbody tr:nth-child(7) { animation-delay: 110ms; } .mis-table tbody tr:nth-child(8) { animation-delay: 125ms; } .mis-table tbody tr:nth-child(n+9) { animation-delay: 140ms; } /* Chart cards stagger */ .mis-chart-card { opacity: 0; animation: mis-fade-in 280ms var(--mis-ease) forwards; } .mis-chart-card:nth-child(1) { animation-delay: 40ms; } .mis-chart-card:nth-child(2) { animation-delay: 70ms; } .mis-chart-card:nth-child(3) { animation-delay: 100ms; } .mis-chart-card:nth-child(4) { animation-delay: 130ms; } .mis-chart-card:nth-child(5) { animation-delay: 160ms; } .mis-chart-card:nth-child(6) { animation-delay: 190ms; } .mis-chart-card:nth-child(n+7) { animation-delay: 220ms; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width: 992px) { .mis-filter-group { flex: 1 1 calc(50% - 10px); max-width: none; } .mis-filter-group.--date { flex: 1 1 calc(50% - 10px); max-width: none; } .mis-card-header { flex-wrap: wrap; } .mis-header-spacer { display: none; } } @media (max-width: 768px) { .mis-filter-group { flex: 1 1 100%; max-width: 100%; } .mis-groupby-bar { flex-wrap: wrap; } .mis-chart-grid { grid-template-columns: 1fr 1fr; } .mis-drill-panel { width: 100vw; } .mis-stat { min-width: calc(50% - 5px); } } @media (max-width: 480px) { .mis-chart-grid { grid-template-columns: 1fr; } }