:root {
  --bg: #f3f6fb;
  --panel: #fff;
  --text: #172033;
  --muted: #697386;
  --primary: #3157d5;
  --primary2: #6c85ea;
  --nav: #111a34;
  --border: #e4e9f2;
  --success: #16845b;
  --warning: #d9850b;
  --danger: #d94b5b;
  --cyan: #1687a7;
  --shadow: 0 10px 30px rgba(20, 35, 80, .07)
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text)
}

button,
input,
select {
  font: inherit
}

a {
  text-decoration: none;
  color: inherit
}

.layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh
}

.sidebar {
  background: linear-gradient(180deg, #101934, #17254d);
  color: #dbe4ff;
  padding: 20px 15px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
  overflow: auto
}

.brand {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 4px 10px 22px
}

.brand-logo {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, #8098ff, #3157d5);
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 8px 20px rgba(49, 87, 213, .35)
}

.brand h2 {
  font-size: 17px;
  margin: 0
}

.brand span {
  display: block;
  font-size: 11px;
  color: #9eadd6;
  margin-top: 3px
}

.nav-title {
  font-size: 10px;
  letter-spacing: 1.4px;
  color: #7585b7;
  margin: 17px 12px 8px
}

.nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 11px;
  color: #cbd5f4;
  margin: 4px 0;
  font-size: 14px
}

.nav a:hover,
.nav a.active {
  background: rgba(255, 255, 255, .1);
  color: #fff
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 20px
}

.nav-icon svg,
.icon-box svg,
.menu-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round
}

.sidebar-footer {
  margin-top: 24px;
  padding: 13px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 12px;
  font-size: 12px;
  color: #aebde9
}

.main {
  min-width: 0
}

.topbar {
  min-height: 72px;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 26px;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px)
}

.topbar-left {
  /* display: flex; */
  align-items: center;
  gap: 12px
}

.topbar h1 {
  font-size: 20px;
  margin: 0
}

.menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  color: #35425e
}

.top-actions {
  display: flex;
  gap: 12px;
  align-items: center
}

.week-pill {
  background: #edf2ff;
  color: #3157d5;
  padding: 9px 13px;
  border-radius: 9px;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap
}

.user {
  display: flex;
  align-items: center;
  gap: 10px
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #dbe5ff;
  color: #3157d5;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex: 0 0 38px
}

.user small {
  display: block;
  color: var(--muted)
}

.content {
  padding: 25px 27px 42px;
  max-width: 1680px;
  margin: auto
}

.page-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px
}

.page-head h2 {
  margin: 0 0 5px;
  font-size: 25px
}

.page-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5
}

.btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 15px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center
}

.btn-primary {
  background: var(--primary);
  color: #fff
}

.btn-secondary {
  background: #fff;
  border: 1px solid var(--border);
  color: #374151
}

.btn-danger {
  background: #fff0f1;
  color: var(--danger)
}

.grid {
  display: grid;
  gap: 17px
}

.stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px
}

.stats-quota {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 15px;
  box-shadow: var(--shadow);
  min-width: 0
}

.stat {
  padding: 18px;
  position: relative;
  overflow: hidden
}

.stat-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px
}

.stat .label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .55px
}

.stat .value {
  font-size: 25px;
  font-weight: 850;
  margin: 10px 0 5px
}

.stat .delta {
  font-size: 12px
}

.icon-box {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #edf2ff;
  color: var(--primary);
  display: grid;
  place-items: center
}

.icon-box.green {
  background: #eaf8f2;
  color: var(--success)
}

.icon-box.orange {
  background: #fff4e2;
  color: var(--warning)
}

.icon-box.red {
  background: #fff0f2;
  color: var(--danger)
}

.positive {
  color: var(--success)
}

.negative {
  color: var(--danger)
}

.muted {
  color: var(--muted)
}

.two-col {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr)
}

.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.card-head {
  padding: 17px 19px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px
}

.card-head h3 {
  margin: 0;
  font-size: 15px
}

.card-head a {
  font-size: 12px;
  color: var(--primary);
  font-weight: 800
}

.card-body {
  padding: 19px
}

.chart-wrap {
  width: 100%;
  overflow: hidden
}

.svg-chart {
  width: 100%;
  height: auto;
  display: block
}

.chart-grid {
  stroke: #e8edf5;
  stroke-width: 1
}

.chart-axis {
  font-size: 11px;
  fill: #748096
}

.chart-line {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3
}

.chart-area {
  fill: url(#areaFill)
}

.chart-point {
  fill: #fff;
  stroke: var(--primary);
  stroke-width: 3
}

.bar-svg {
  fill: #5875df
}

.bar-svg.alt {
  fill: #aebcf0
}

.chart-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px
}

.legend-key {
  display: flex;
  align-items: center;
  gap: 6px
}

.legend-line {
  width: 20px;
  height: 3px;
  border-radius: 5px;
  background: var(--primary)
}

.legend-line.alt {
  background: #aebcf0
}

.donut-layout {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 20px
}

.donut {
  width: 178px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#3157d5 0 49%, #16845b 49% 68%, #e8a029 68% 85%, #d94b5b 85%);
  margin: auto;
  position: relative
}

.donut:after {
  content: "₹1.68 Cr\A Forecast";
  white-space: pre;
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 850;
  font-size: 15px;
  line-height: 1.35
}

.legend {
  display: grid;
  gap: 12px;
  font-size: 12px
}

.legend-row {
  display: flex;
  justify-content: space-between;
  gap: 12px
}

.legend-row strong {
  color: var(--text)
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 7px
}

.insight-list {
  display: grid;
  gap: 12px
}

.insight {
  padding: 13px;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.insight strong {
  display: block;
  font-size: 13px
}

.insight span {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-top: 4px;
  line-height: 1.45
}

.risk-meter {
  height: 10px;
  background: #edf0f5;
  border-radius: 20px;
  overflow: hidden;
  margin: 12px 0 8px
}

.risk-meter span {
  display: block;
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, #16845b 0 32%, #e8a029 32% 68%, #d94b5b 68%)
}

.mini-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px
}

.mini-metric {
  background: #f7f9fc;
  padding: 12px;
  border-radius: 11px
}

.mini-metric small {
  display: block;
  color: var(--muted);
  margin-bottom: 5px
}

.mini-metric strong {
  font-size: 16px
}

.table-wrap {
  overflow: auto
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 850px
}

.table th {
  background: #f8fafc;
  color: #64748b;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .45px;
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid var(--border)
}

.table td {
  padding: 13px 12px;
  border-bottom: 1px solid #eef0f4;
  font-size: 13px
}

.badge {
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 850
}

.b-green {
  background: #e8f7ef;
  color: #167a4b
}

.b-blue {
  background: #eaf0ff;
  color: #3157d5
}

.b-orange {
  background: #fff3dd;
  color: #bd6500
}

.b-red {
  background: #ffebed;
  color: #bd2433
}

.progress {
  height: 8px;
  background: #edf0f5;
  border-radius: 20px;
  overflow: hidden;
  min-width: 90px
}

.progress>span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #3157d5, #6e8fff)
}

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px
}

.input,
.select {
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 9px;
  padding: 10px 11px;
  color: #1f2937
}

.filters .input,
.filters .select {
  width: auto;
  min-width: 160px
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #4b5563;
  margin-bottom: 7px
}

.form-group.full {
  grid-column: 1/-1
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 42, .48);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50
}

.modal.show {
  display: flex
}

.modal-box {
  background: #fff;
  width: min(720px, 100%);
  max-height: 92vh;
  overflow: auto;
  border-radius: 15px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .2)
}

.modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center
}

.modal-head h3 {
  margin: 0
}

.close {
  font-size: 24px;
  border: 0;
  background: none;
  cursor: pointer
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 0
}

.timeline li {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #eef0f4
}

.timeline strong {
  font-size: 13px
}

.timeline span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px
}

.empty {
  padding: 34px;
  text-align: center;
  color: var(--muted)
}

.overlay {
  display: none
}

.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #0e1732, #233a7e 60%, #3157d5);
  display: grid;
  place-items: center;
  padding: 25px
}

.login-card {
  width: min(940px, 100%);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .3)
}

.login-visual {
  padding: 50px;
  background: linear-gradient(160deg, #111b38, #243b7c);
  color: #fff
}

.login-visual h1 {
  font-size: 38px;
  line-height: 1.15;
  margin: 40px 0 15px
}

.login-visual p {
  color: #becaf0;
  line-height: 1.7
}

.login-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 35px
}

.login-kpis div {
  background: rgba(255, 255, 255, .08);
  padding: 15px;
  border-radius: 12px
}

.login-form {
  padding: 52px 45px
}

.login-form h2 {
  margin: 0 0 8px
}

.login-form p {
  margin: 0 0 28px
}

.login-form .form-group {
  margin-bottom: 16px
}

.login-form .btn {
  width: 100%;
  padding: 12px
}

.hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 15px;
  text-align: center
}

.error-div p {
  color: red;
}

/* ================================
   Unauthorized Page
================================ */

.unauthorized-card {
  width: min(560px, 95%);
  background: #fff;
  border-radius: 22px;
  padding: 55px;
  text-align: center;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .25);
}

.unauthorized-icon {
  width: 90px;
  height: 90px;
  margin: auto;
  border-radius: 50%;
  background: #fff0f2;
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
}

.status-badge {
  display: inline-block;
  margin-top: 25px;
  background: #ffebed;
  color: var(--danger);
  padding: 8px 14px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 700;
}

.unauthorized-card h1 {
  margin: 20px 0 10px;
  font-size: 34px;
  color: var(--text);
}

.unauthorized-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 35px;
}

.unauthorized-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.unauthorized-actions .btn {
  min-width: 170px;
}

.error-message {
  display: block;
  margin-top: 5px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 500;
  min-height: 16px;
}

.input.error,
.select.error {
  border-color: var(--danger);
  background: #fff6f7;
}

.input.error:focus,
.select.error:focus {
  outline: none;
  border-color: var(--danger);
}

.success-msg {
  background: #c9efc9;
  padding: 10px;
  border-radius: 5px;
  border: 1.3px solid #038003;
}

.error-msg {
  background: #ffb4b4;
  padding: 10px;
  border-radius: 5px;
  border: 1.3px solid #ff3d3d;
}

.delete-form {
  display: inline;
}

.icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}

.icon-delete {
  color: #dc3545;
}

.icon-delete:hover {
  color: #b02a37;
}

.deal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid;
}

/* ---------- Stage ---------- */

.badge-stage-prospecting {
  color: #6b7280;
  background: #f3f4f6;
  border-color: #d1d5db;
}

.badge-stage-qualification {
  color: #2563eb;
  background: #eef4ff;
  border-color: #bfd4ff;
}

.badge-stage-negotiation {
  color: #a16207;
  background: #fff8e5;
  border-color: #f2cf71;
}

.badge-stage-proposal {
  color: #ea580c;
  background: #fff4ee;
  border-color: #fdc9a7;
}

.badge-stage-closed-won {
  color: #16a34a;
  background: #effdf3;
  border-color: #a7f3c2;
}

.badge-stage-closed-lost {
  color: #dc2626;
  background: #fff1f2;
  border-color: #fecdd3;
}

/* ---------- Category ---------- */

.badge-category-achieved {
  color: #16a34a;
  background: #effdf3;
  border-color: #a7f3c2;
}

.badge-category-commit {
  color: #ea580c;
  background: #fff4ee;
  border-color: #fdc9a7;
}

.badge-category-pipeline {
  color: #2563eb;
  background: #eef4ff;
  border-color: #bfd4ff;
}

.badge-category-lost {
  color: #dc2626;
  background: #fff1f2;
  border-color: #fecdd3;
}

.badge-category-upside {
  color: #7c3aed;
  background: #f6f0ff;
  border-color: #d8b4fe;
}

/* ---------- Priority ---------- */

.badge-priority-high {
  color: #dc2626;
  background: #fff1f2;
  border-color: #fecdd3;
}

.badge-priority-medium {
  color: #a16207;
  background: #fff8e5;
  border-color: #f2cf71;
}

.badge-priority-low {
  color: #2563eb;
  background: #eef4ff;
  border-color: #bfd4ff;
}

/* ---------- Status of quotas ---------- */
/* Base Badge */
.badge-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  text-transform: capitalize;
}

/* Status Badges */
.badge-status-success {
  color: #16a34a;
  background: #dcfce7;
  border-color: #86efac;
}

.badge-status-warning {
  color: #ca8a04;
  background: #fef9c3;
  border-color: #fde047;
}

.badge-status-danger {
  color: #dc2626;
  background: #fee2e2;
  border-color: #fca5a5;
}

.badge-status-info {
  color: #2563eb;
  background: #dbeafe;
  border-color: #93c5fd;
}

.badge-status-secondary {
  color: #475569;
  background: #e2e8f0;
  border-color: #cbd5e1;
}

.badge-status-purple {
  color: #7c3aed;
  background: #ede9fe;
  border-color: #c4b5fd;
}

.badge-status-orange {
  color: #ea580c;
  background: #ffedd5;
  border-color: #fdba74;
}

.small-btn {
  background: var(--primary);
  border: none;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.modal-box-quota {
  background: #fff;
  width: min(480px, 100%);
  max-height: 92vh;
  border-radius: 15px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .2);
}

.amount-mute {
  font-size: 12px;
  font-weight: 700;
  color: grey;
}

/* ==========================================
   jQuery UI Autocomplete
========================================== */

.ui-autocomplete{
  max-height:280px;
  overflow-y:auto;
  overflow-x:hidden;

  background:#fff;
  border:1px solid #dcdfe6;
  border-radius:10px;

  box-shadow:0 8px 24px rgba(0,0,0,.12);

  padding:6px;
  margin-top:5px;

  z-index:99999 !important;
}

/* Remove default list style */
.ui-autocomplete .ui-menu-item{
  list-style:none;
}

/* Remove default wrapper styling */
.ui-menu .ui-menu-item-wrapper{
  padding:0 !important;
  border:none;
}

/* Each autocomplete row */
.autocomplete-item{
  padding:10px 15px;
  cursor:pointer;
  transition:all .2s ease;
}

/* Name */
.autocomplete-item .name{
  font-size:14px;
  font-weight:600;
  color:#212529;
  margin-bottom:3px;
}

/* Email */
.autocomplete-item .email{
  font-size:12px;
  color:#6c757d;
}

/* Hover */
.ui-menu-item-wrapper:hover .autocomplete-item{
  background:#f5f7fb;
}

/* Selected using keyboard */
.ui-state-active .autocomplete-item,
.ui-state-focus .autocomplete-item{
  background:#0d6efd;
}

.ui-state-active .name,
.ui-state-focus .name,
.ui-state-active .email,
.ui-state-focus .email{
  color:#fff;
}

/* Remove ugly blue border */
.ui-state-active,
.ui-state-focus{
  border:none !important;
  margin:0 !important;
}

/* Custom Scrollbar */
.ui-autocomplete::-webkit-scrollbar{
  width:8px;
}

.ui-autocomplete::-webkit-scrollbar-track{
  background:#f1f1f1;
  border-radius:5px;
}

.ui-autocomplete::-webkit-scrollbar-thumb{
  background:#bdbdbd;
  border-radius:5px;
}

.ui-autocomplete::-webkit-scrollbar-thumb:hover{
  background:#999;
}

/* Optional empty message */
.autocomplete-empty{
  padding:12px 15px;
  color:#888;
  font-size:13px;
  text-align:center;
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5 !important;
  padding: 5px 5px !important;
}

.ui-menu .ui-menu-item-wrapper {
  position: relative !important;
  padding: 3px 1em 3px .4em !important;
  padding: 5px 5px !important;
  border-radius: 5px !important;
}

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

  .three-col {
    grid-template-columns: 1fr 1fr
  }

  .three-col>*:last-child {
    grid-column: 1/-1
  }

  .two-col {
    grid-template-columns: 1fr
  }

  .donut-layout {
    grid-template-columns: 170px 1fr
  }
}

@media(max-width:900px) {
  .layout {
    grid-template-columns: 1fr
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 270px;
    transform: translateX(-105%);
    transition: .25s ease;
    box-shadow: 20px 0 50px rgba(10, 20, 50, .22)
  }

  body.nav-open .sidebar {
    transform: translateX(0)
  }

  .overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 40, .45);
    z-index: 25;
    opacity: 0;
    pointer-events: none;
    transition: .25s
  }

  body.nav-open .overlay {
    opacity: 1;
    pointer-events: auto
  }

  .menu-btn {
    display: flex
  }

  .topbar {
    padding: 0 18px
  }

  .content {
    padding: 22px 18px 36px
  }
}

@media(max-width:650px) {
  .topbar h1 {
    font-size: 17px
  }

  .week-pill {
    display: none
  }

  .user div:last-child {
    display: none
  }

  .stats,
  .three-col {
    grid-template-columns: 1fr
  }

  .three-col>*:last-child {
    grid-column: auto
  }

  .page-head {
    flex-direction: column
  }

  .page-head .btn {
    width: 100%
  }

  .card-head,
  .card-body {
    padding: 15px
  }

  .donut-layout {
    grid-template-columns: 1fr
  }

  .donut {
    width: 165px
  }

  .mini-metrics {
    grid-template-columns: 1fr
  }

  .form-grid {
    grid-template-columns: 1fr
  }

  .form-group.full {
    grid-column: auto
  }

  .filters .input,
  .filters .select {
    width: 100%;
    min-width: 0
  }

  .login-card {
    grid-template-columns: 1fr
  }

  .login-visual {
    display: none
  }

  .login-form {
    padding: 35px 24px
  }

  .content {
    padding: 17px 13px 30px
  }

  .stat .value {
    font-size: 23px
  }
}