/* [project]/app/globals.css [app-client] (css) */
.master-dashboard {
  width: 100%;
  margin-top: 24px;
  padding: 20px;
  overflow: hidden;
}

.dashboard-switcher {
  background: #e9eef6;
  border-radius: 12px;
  gap: 6px;
  width: fit-content;
  margin: 0 0 20px;
  padding: 6px;
  display: flex;
}

.dashboard-tab {
  color: #64748b;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
}

.dashboard-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 10px #2563eb40;
}

.master-filter-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  grid-template-columns: minmax(260px, 2fr) repeat(6, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
  padding: 16px;
  display: grid;
}

.master-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.master-chart-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  display: grid;
}

.master-equipment-list {
  margin-top: 18px;
}

.master-equipment-list .table-container {
  overflow-x: auto;
}

.master-equipment-list table {
  min-width: 1450px;
}

.master-equipment-list th, .master-equipment-list td {
  white-space: nowrap;
}

.table-actions {
  gap: 5px;
  display: flex;
}

.btn-danger {
  color: #fff;
  cursor: pointer;
  background: #dc2626;
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 700;
}

.btn-danger:hover {
  background: #b91c1c;
}

.master-dashboard .chart-box {
  min-height: 260px;
}

@media (max-width: 1200px) {
  .master-filter-panel {
    grid-template-columns: repeat(3, 1fr);
  }

  .master-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .dashboard-switcher {
    width: 100%;
  }

  .dashboard-tab {
    flex: 1;
    justify-content: center;
    padding: 10px 8px;
    font-size: 12px;
  }

  .master-filter-panel, .master-chart-grid {
    grid-template-columns: 1fr;
  }

  .master-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .master-stats {
    grid-template-columns: 1fr;
  }
}

.master-dashboard {
  width: 100%;
  min-width: 0;
}

.master-hero {
  background: linear-gradient(135deg, #0f2742 0%, #163b61 100%);
  border: 1px solid #173b60;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 92px;
  margin-bottom: 18px;
  padding: 18px 22px;
  display: flex;
  box-shadow: 0 8px 24px #0f274224;
}

.master-hero-content {
  align-items: center;
  gap: 14px;
  min-width: 0;
  display: flex;
}

.master-hero-icon {
  color: #fff;
  background: #ffffff1f;
  border-radius: 10px;
  flex: 0 0 46px;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  display: flex;
}

.master-eyebrow {
  color: #93c5fd;
  letter-spacing: .12em;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 800;
  display: block;
}

.master-hero h1 {
  color: #fff;
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.master-hero p {
  color: #cbd5e1;
  margin: 4px 0 0;
  font-size: 12px;
}

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

.master-record-count {
  text-align: center;
  background: #ffffff12;
  border: 1px solid #ffffff24;
  border-radius: 8px;
  min-width: 82px;
  padding: 7px 12px;
}

.master-record-count span {
  color: #94a3b8;
  letter-spacing: .08em;
  font-size: 8px;
  font-weight: 800;
  display: block;
}

.master-record-count strong {
  color: #fff;
  margin-top: 2px;
  font-size: 18px;
  line-height: 1;
  display: block;
}

.master-add-button {
  color: #0f2742;
  cursor: pointer;
  background: #fff;
  border: 0;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
}

.master-add-button:hover {
  background: #f1f5f9;
}

.master-filter-panel {
  margin-bottom: 18px;
  padding: 18px;
}

.master-filter-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 14px;
  display: flex;
}

.filter-eyebrow {
  color: #64748b;
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 800;
  display: block;
}

.master-filter-header h2 {
  color: #0f2742;
  margin: 3px 0 2px;
  font-size: 16px;
  font-weight: 800;
}

.master-filter-header p {
  color: #64748b;
  margin: 0;
  font-size: 11px;
}

.master-clear-filter {
  color: #475569;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8e1eb;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.master-filter-grid {
  grid-template-columns: minmax(240px, 1.5fr) repeat(4, minmax(140px, 1fr));
  gap: 9px;
  display: grid;
}

.master-search {
  color: #64748b;
  background: #fff;
  border: 1px solid #d8e1eb;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  display: flex;
}

.master-search:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px #2563eb14;
}

.master-search input {
  color: #0f172a;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 11px;
}

.master-search button {
  color: #64748b;
  cursor: pointer;
  background: none;
  border: 0;
  display: flex;
}

.master-kpi {
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  min-width: 0;
  min-height: 128px;
  padding: 17px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 12px #0f172a0e;
}

.master-kpi:after {
  content: "";
  opacity: .035;
  background: currentColor;
  border-radius: 50%;
  width: 76px;
  height: 76px;
  position: absolute;
  bottom: -24px;
  right: -18px;
}

.master-kpi-top {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.master-kpi-top > span {
  color: #64748b;
  letter-spacing: .06em;
  flex: 1;
  font-size: 9px;
  font-weight: 800;
}

.master-kpi-icon {
  border-radius: 8px;
  flex: 0 0 34px;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  display: flex;
}

.master-kpi strong {
  color: #0f172a;
  margin-top: 13px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  display: block;
}

.master-kpi small {
  color: #94a3b8;
  margin-top: 7px;
  font-size: 10px;
  display: block;
}

.master-kpi-total {
  color: #2563eb;
}

.master-kpi-total .master-kpi-icon {
  color: #2563eb;
  background: #eff6ff;
}

.master-kpi-active {
  color: #16a34a;
}

.master-kpi-active .master-kpi-icon {
  color: #16a34a;
  background: #f0fdf4;
}

.master-kpi-amc {
  color: #d97706;
}

.master-kpi-amc .master-kpi-icon {
  color: #d97706;
  background: #fffbeb;
}

.master-kpi-warranty {
  color: #7c3aed;
}

.master-kpi-warranty .master-kpi-icon {
  color: #7c3aed;
  background: #f5f3ff;
}

.master-kpi-grid {
  width: 100%;
  margin-bottom: 18px;
}

.master-kpi-grid .stat {
  min-width: 0;
}

.master-analytics-section {
  width: 100%;
  margin-bottom: 18px;
}

.master-analytics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  display: grid;
}

.master-chart-card {
  min-width: 0;
  height: 350px;
  overflow: hidden;
}

.master-chart-card .card-heading {
  min-height: 58px;
}

.master-chart-card .card-heading h2 {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  overflow: hidden;
}

.master-chart-card .card-heading p {
  font-size: 10px;
}

.master-chart-box {
  width: 100%;
  height: 250px;
  margin-top: 4px;
}

.master-chart-box .recharts-text {
  fill: #64748b;
  font-size: 8px;
}

.master-chart-box .recharts-cartesian-grid line {
  stroke: #dbe3ec;
  stroke-dasharray: 3 3;
}

.master-chart-box .recharts-tooltip-wrapper {
  font-size: 10px;
}

.master-table-card {
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 10px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 3px 12px #0f172a0e;
}

.master-table-header {
  border-bottom: 1px solid #e5eaf0;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 16px 18px;
  display: flex;
}

.master-table-title {
  align-items: center;
  gap: 11px;
  display: flex;
}

.master-table-title-icon {
  color: #2563eb;
  background: #eff6ff;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  display: flex;
}

.master-table-title h2 {
  color: #0f2742;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.master-table-title p {
  color: #94a3b8;
  margin: 2px 0 0;
  font-size: 10px;
}

.master-table-actions {
  align-items: center;
  gap: 7px;
  display: flex;
}

.master-table-action {
  color: #334155;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8e1eb;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.master-table-action.primary {
  color: #fff;
  background: #0f2742;
  border-color: #0f2742;
}

.master-table-action:hover {
  background: #f8fafc;
}

.master-table-action.primary:hover {
  background: #163b61;
}

.master-table-search {
  border-bottom: 1px solid #edf1f5;
  padding: 11px 18px;
}

.master-table-search-inner {
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #d8e1eb;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  max-width: 430px;
  min-height: 35px;
  padding: 0 10px;
  display: flex;
}

.master-table-search-inner input {
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 11px;
}

.master-table-search-inner button {
  color: #64748b;
  cursor: pointer;
  background: none;
  border: 0;
  display: flex;
}

.master-table-wrap {
  width: 100%;
  overflow: auto hidden;
}

.master-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1250px;
}

.master-table-wrap thead th {
  z-index: 2;
  color: #475569;
  letter-spacing: .035em;
  text-align: left;
  white-space: nowrap;
  background: #f5f8fb;
  border-bottom: 1px solid #dbe4ee;
  padding: 11px 12px;
  font-size: 9px;
  font-weight: 800;
  position: sticky;
  top: 0;
}

.master-table-wrap tbody td {
  color: #334155;
  white-space: nowrap;
  border-bottom: 1px solid #edf1f5;
  padding: 11px 12px;
  font-size: 11px;
}

.master-table-wrap tbody tr:hover {
  background: #f8fbff;
}

.master-table-primary {
  color: #0f2742;
  font-weight: 800;
}

.master-table-secondary {
  color: #94a3b8;
  margin-top: 2px;
  font-size: 9px;
}

.master-status {
  color: #15803d;
  background: #ecfdf3;
  border-radius: 999px;
  align-items: center;
  min-height: 23px;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.master-status.inactive {
  color: #b91c1c;
  background: #fef2f2;
}

.master-row-actions {
  gap: 5px;
  display: flex;
}

.master-row-button {
  color: #475569;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d8e1eb;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 29px;
  height: 29px;
  display: inline-flex;
}

.master-row-button:hover {
  color: #0f2742;
  background: #f1f5f9;
}

.master-row-button.delete:hover {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fecaca;
}

@media (min-width: 1200px) {
  .master-analytics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1199px) {
  .master-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .master-kpi-grid, .master-analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .master-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .master-hero-actions {
    justify-content: space-between;
    width: 100%;
  }

  .master-filter-grid {
    grid-template-columns: 1fr;
  }

  .master-filter-header {
    flex-direction: column;
  }

  .master-table-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .master-table-actions {
    width: 100%;
    overflow-x: auto;
  }

  .master-analytics-grid {
    grid-template-columns: 1fr;
  }

  .master-chart-card {
    height: 340px;
  }
}

@media (max-width: 480px) {
  .master-kpi-grid {
    grid-template-columns: 1fr;
  }

  .master-kpi {
    min-height: 105px;
  }

  .master-chart-card {
    height: 330px;
  }

  .master-hero h1 {
    font-size: 19px;
  }

  .master-hero p {
    font-size: 10px;
  }
}

.master-dashboard > .section-header {
  margin-bottom: 18px;
}

.master-dashboard > .section-header h2 {
  margin: 5px 0 0;
  font-size: 20px;
}

.master-dashboard > .section-header p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 12px;
}

.master-filters {
  grid-template-columns: minmax(260px, 2fr) repeat(6, minmax(140px, 1fr));
  gap: 12px;
  margin: 20px 0;
  display: grid;
}

.master-filters .filter-field {
  min-width: 0;
}

.master-filters .filter-field label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  display: block;
}

.master-filters .filter-search-box {
  border: 1px solid var(--line);
  height: 44px;
  color: var(--muted);
  background: #f8fafc;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.master-filters .filter-search-box input {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
}

.master-filters > select {
  align-self: end;
  width: 100%;
}

.master-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  display: grid;
}

.master-kpi-grid > .stat {
  min-width: 0;
  min-height: 140px;
}

.master-table-wrap {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  width: 100%;
  overflow-x: auto;
}

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

.master-table th {
  color: #334155;
  letter-spacing: .04em;
  white-space: nowrap;
  background: #f5f8fb;
  font-size: 11px;
  font-weight: 700;
}

.master-table th, .master-table td {
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #edf1f5;
  padding: 11px 12px;
}

.master-table tbody tr:hover {
  background: #f8fafc;
}

@media (max-width: 1100px) {
  .master-filters, .master-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .master-filters {
    grid-template-columns: 1fr;
  }

  .master-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .master-kpi-grid {
    grid-template-columns: 1fr;
  }
}

:root {
  --bg: #f5f8fc;
  --card: #fff;
  --line: #dfe7f1;
  --text: #10233f;
  --muted: #7186a2;
  --primary: #4b3df5;
  --green: #08b77d;
  --red: #f51f50;
  --orange: #f59b00;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font: 14px Inter, system-ui, -apple-system, Segoe UI, Arial;
}

button, input, select {
  font: inherit;
}

button {
  cursor: pointer;
}

.page {
  min-height: 100vh;
}

.topbar {
  border-bottom: 1px solid var(--line);
  background: #fff;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 74px;
  padding: 12px 28px;
  display: flex;
}

.brand {
  align-items: center;
  gap: 13px;
  display: flex;
}

.logo {
  color: #fff;
  background: #6045f5;
  border-radius: 15px;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
}

.title {
  font-size: 20px;
  font-weight: 700;
}

.subtitle {
  color: var(--muted);
  margin-top: 3px;
  font-size: 13px;
}

.connection {
  font-weight: 600;
}

.actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.btn {
  border: 1px solid var(--line);
  color: var(--text);
  background: #fff;
  border-radius: 10px;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  display: inline-flex;
}

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

.banner {
  color: #9a6100;
  background: #fffaf0;
  border: 1px solid #f1d36c;
  border-radius: 14px;
  margin: 24px 4.5%;
  padding: 13px 18px;
}

.stats, .filters, .charts, .panel {
  width: 91%;
  margin-left: auto;
  margin-right: auto;
}

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

.stat {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  padding: 20px;
  box-shadow: 0 2px 8px #12233f10;
}

.statTop {
  color: #49627e;
  text-transform: uppercase;
  letter-spacing: .05em;
  justify-content: space-between;
  font-size: 11px;
  display: flex;
}

.statTop i {
  color: #4b3df5;
  background: #eef2ff;
  border-radius: 13px;
  place-items: center;
  width: 46px;
  height: 46px;
  display: grid;
}

.statTop i.red {
  color: var(--red);
  background: #fff0f3;
}

.statTop i.orange {
  color: #d47c00;
  background: #fff7df;
}

.statTop i.green {
  color: #079e6c;
  background: #e8fbf4;
}

.stat strong {
  margin: 15px 0 4px;
  font-size: 40px;
  display: block;
}

.redText {
  color: var(--red);
}

.orangeText {
  color: #d47c00;
}

.greenText {
  color: #079e6c;
}

.panel {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 17px;
  margin-bottom: 22px;
  overflow: hidden;
  box-shadow: 0 2px 8px #12233f10;
}

.filters {
  grid-template-columns: minmax(260px, 1fr) repeat(4, 160px);
  gap: 9px;
  padding: 18px;
  display: grid;
}

.searchbox {
  border: 1px solid var(--line);
  color: #8ba0ba;
  border-radius: 10px;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  display: flex;
}

.searchbox input {
  width: 100%;
  color: var(--text);
  border: 0;
  outline: 0;
  padding-left: 8px;
}

select {
  border: 1px solid var(--line);
  height: 44px;
  color: var(--text);
  background: #fff;
  border-radius: 10px;
  padding: 0 10px;
}

.charts {
  box-shadow: none;
  background: none;
  border: 0;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  display: grid;
}

.chart {
  min-height: 300px;
  padding: 22px;
}

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

.chart p {
  color: var(--muted);
  margin: 0;
}

.bararea {
  align-items: end;
  gap: 12%;
  height: 210px;
  padding: 20px 8% 0;
  display: flex;
}

.baritem {
  flex-direction: column;
  flex: 1;
  justify-content: end;
  align-items: center;
  gap: 6px;
  height: 100%;
  display: flex;
}

.bar {
  background: linear-gradient(to top, #08b77d 0 40%, #f59b00 40% 70%, #f51f50 70%);
  border-radius: 7px 7px 0 0;
  width: min(70px, 70%);
}

.baritem span {
  color: var(--muted);
  font-size: 12px;
}

.donut {
  border-radius: 50%;
  place-items: center;
  width: 190px;
  height: 190px;
  margin: 24px auto;
  display: grid;
}

.donutCenter {
  background: #fff;
  border-radius: 50%;
  align-content: center;
  place-items: center;
  width: 112px;
  height: 112px;
  display: grid;
}

.donutCenter b {
  font-size: 30px;
}

.donutCenter span {
  color: var(--muted);
  font-size: 11px;
}

.tablehead {
  border-bottom: 1px solid var(--line);
  padding: 20px 22px;
}

.tablehead h2 {
  margin: 0;
  font-size: 18px;
}

.tablehead p {
  color: var(--muted);
  margin: 4px 0;
}

.tablehead small {
  color: #91a2b7;
}

.admin-actions {
  gap: 8px;
  margin-top: 14px;
  display: flex;
}

.admin-button {
  border: 1px solid var(--primary);
  color: var(--primary);
  cursor: pointer;
  background: #f5f3ff;
  border-radius: 9px;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}

.row-actions {
  gap: 6px;
  min-width: 145px;
  display: flex;
}

.edit-button, .delete-button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  font-size: 11px;
  display: inline-flex;
}

.edit-button {
  color: #385472;
}

.delete-button {
  color: var(--red);
  border-color: #ffd2dc;
}

.tablewrap {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

.tablewrap table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-size: 13px;
}

.tablewrap th, .tablewrap td {
  text-align: left;
  vertical-align: top;
  white-space: normal;
  border-bottom: 1px solid #e7edf4;
  padding: 12px 10px;
}

.tablewrap th {
  color: #385472;
  white-space: nowrap;
  background: #f8fafc;
  font-size: 11px;
}

.tablewrap td:first-child {
  z-index: 1;
  background: #fff;
  min-width: 55px;
  position: sticky;
  left: 0;
}

.tablewrap th:first-child {
  z-index: 2;
  position: sticky;
  left: 0;
}

.pill {
  white-space: nowrap;
  background: #eef3f9;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
}

.pmcell {
  min-width: 155px;
}

.pmdate {
  color: #526b88;
  margin-bottom: 5px;
  font-size: 12px;
}

.status {
  border-radius: 999px;
  margin-bottom: 6px;
  padding: 4px 7px;
  font-size: 11px;
  display: inline-block;
}

.done {
  color: #008c64;
  background: #e9fbf5;
}

.overdue {
  color: #d91040;
  background: #fff0f3;
}

.pending {
  color: #b96b00;
  background: #fff8e8;
}

.scheduled {
  color: #4966c5;
  background: #eef3ff;
}

.mark, .undo, .markAll {
  border-radius: 8px;
  padding: 5px 7px;
  font-size: 11px;
  display: block;
}

.mark, .markAll {
  color: #07845f;
  background: #f1fff9;
  border: 1px solid #9be8ce;
}

.undo {
  border: 1px solid var(--line);
  color: #385472;
  background: #fff;
}

.markAll {
  margin-top: 7px;
}

.pm-date-section {
  border-top: 1px solid var(--line);
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 14px;
  display: grid;
}

.pm-date-section h3 {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font-size: 13px;
}

.pm-date-section label {
  color: var(--muted);
  font-size: 11px;
}

.pm-date-section input {
  margin-top: 4px;
}

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

.overlay {
  z-index: 50;
  background: #08172c99;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.authbox {
  background: #fff;
  border-radius: 16px;
  width: min(420px, 100%);
  padding: 25px;
  position: relative;
}

.authbox h2 {
  margin-top: 0;
}

.authbox input {
  border: 1px solid var(--line);
  border-radius: 9px;
  width: 100%;
  margin: 6px 0;
  padding: 11px;
}

.equipment-form {
  width: min(620px, 100%);
}

.equipment-fields {
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  display: grid;
}

.close {
  background: none;
  border: 0;
  position: absolute;
  top: 12px;
  right: 12px;
}

.authmsg {
  color: #c33;
  min-height: 25px;
  font-size: 12px;
}

@media (max-width: 1100px) {
  .topbar {
    padding: 12px 18px;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .filters {
    grid-template-columns: 1fr 1fr;
  }

  .searchbox {
    grid-column: 1 / -1;
  }

  .charts {
    grid-template-columns: 1fr;
  }

  .stats, .filters, .charts, .panel {
    width: 94%;
  }

  .banner {
    margin-left: 3%;
    margin-right: 3%;
  }
}

@media (max-width: 650px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
  }

  .brand {
    width: 100%;
  }

  .title {
    font-size: 17px;
  }

  .subtitle {
    font-size: 11px;
  }

  .actions {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    display: grid;
  }

  .btn {
    justify-content: center;
    padding: 8px 6px;
    font-size: 11px;
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 96%;
  }

  .stat {
    border-radius: 13px;
    padding: 13px;
  }

  .stat strong {
    margin: 10px 0 3px;
    font-size: 28px;
  }

  .statTop {
    font-size: 9px;
  }

  .statTop i {
    width: 35px;
    height: 35px;
  }

  .stat small {
    font-size: 10px;
  }

  .banner {
    margin: 12px 2%;
    font-size: 12px;
  }

  .filters {
    grid-template-columns: 1fr 1fr;
    width: 96%;
    padding: 10px;
  }

  .searchbox {
    grid-column: 1 / -1;
  }

  .charts {
    gap: 10px;
    width: 96%;
  }

  .chart {
    min-height: 245px;
    padding: 14px;
  }

  .bararea {
    gap: 4%;
    padding: 15px 4%;
  }

  .tablehead {
    padding: 13px;
  }

  .tablehead h2 {
    font-size: 15px;
  }

  .tablehead p, .tablehead small {
    font-size: 10px;
  }

  .tablewrap table {
    min-width: 1500px;
    font-size: 10px;
  }

  .tablewrap th, .tablewrap td {
    padding: 8px 7px;
  }

  .tablewrap th {
    font-size: 9px;
  }

  .pmcell {
    min-width: 160px;
  }

  .mark, .undo, .markAll, .pmdate, .status {
    font-size: 9px;
  }

  .pill {
    padding: 4px 6px;
    font-size: 9px;
  }
}

:root {
  --bg: #f4f7fb;
  --card: #fff;
  --line: #e2e8f0;
  --text: #172033;
  --muted: #64748b;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --green: #16a34a;
  --red: #dc2626;
  --orange: #f59e0b;
  --scheduled: #6366f1;
  --shadow: 0 4px 12px #0f172a0a,0 1px 3px #0f172a0d;
  --shadow-hover: 0 12px 28px #0f172a17;
}

body {
  background: var(--bg);
  color: var(--text);
}

.dashboard {
  background: radial-gradient(circle at top right,#2563eb0f,transparent 28%),var(--bg);
  min-height: 100vh;
}

.page-tabs {
  background: #e9eef6;
  border-radius: 12px;
  gap: 6px;
  width: fit-content;
  margin-bottom: 20px;
  padding: 6px;
  display: flex;
}

.page-tab {
  color: #64748b;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  transition: all .2s;
}

.page-tab:hover {
  color: #172033;
}

.page-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 10px #2563eb40;
}

.topbar {
  color: #fff;
  background: radial-gradient(circle at 85% 20%, #3b82f633, #0000 30%), linear-gradient(135deg, #0b1220 0%, #111c32 55%, #172554 100%);
  border-bottom: 1px solid #ffffff14;
  min-height: 78px;
  padding: 18px 28px;
}

.logo {
  background: var(--primary);
  box-shadow: 0 8px 18px #2563eb40;
}

.title {
  font-weight: 800;
}

.subtitle {
  color: #ffffffa6;
}

.connection.ok {
  color: #86efac;
}

.actions .btn {
  color: var(--text);
}

.banner {
  color: #92400e;
  box-shadow: var(--shadow);
  background: #fffbeb;
  border-color: #fde68a;
}

.banner.ok {
  color: #166534;
  background: #ecfdf3;
  border-color: #bbf7d0;
}

.stats {
  gap: 16px;
  margin-bottom: 20px;
}

.stat {
  border-color: var(--line);
  min-height: 140px;
  box-shadow: var(--shadow);
  border-radius: 16px;
  transition: transform .2s, box-shadow .2s;
}

.stat:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.stats-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  min-height: 140px;
  box-shadow: var(--shadow);
  border-radius: 16px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.stat-card h3 {
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
  font-size: 11px;
  font-weight: 800;
}

.stat-card .value {
  color: var(--text);
  margin-top: 10px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

.stat-card .hint {
  color: var(--muted);
  margin-top: 10px;
  font-size: 12px;
}

.clickable-stat {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.clickable-stat:hover {
  transform: translateY(-2px);
}

.clickable-stat:hover .stat {
  transform: none;
  box-shadow: 0 12px 28px #f59e0b29;
}

.clickable-stat:active {
  transform: translateY(0);
}

.statTop {
  color: var(--muted);
  font-weight: 800;
}

.stat strong {
  color: var(--text);
}

.stat small {
  color: var(--muted);
}

.panel {
  border-color: var(--line);
  box-shadow: var(--shadow);
  border-radius: 16px;
}

.filters {
  padding: 14px;
}

.searchbox, select {
  border-color: var(--line);
  background: #f8fafc;
}

.due-soon-panel {
  background: var(--card);
  border: 1px solid #fde68a;
  border-radius: 18px;
  width: 91%;
  margin: 22px auto;
  padding: 20px;
  box-shadow: 0 8px 25px #f59e0b14;
}

.due-soon-panel .panel-header {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
  display: flex;
}

.due-soon-panel .panel-header h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
}

.due-soon-panel .panel-header p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 12px;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  width: 100%;
  overflow-x: auto;
}

.due-soon-table table {
  background: #fff;
  min-width: 1100px;
}

.due-soon-table thead th {
  color: #92400e;
  background: #fffbeb;
}

.table-subtext {
  color: var(--muted);
  margin-top: 3px;
  font-size: 10px;
}

.days-normal {
  color: #b45309;
  font-weight: 800;
}

.days-urgent {
  color: var(--red);
  font-weight: 900;
}

.dashboard-grid {
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-card {
  background: var(--card);
  border-color: var(--line);
  min-width: 0;
  box-shadow: var(--shadow);
  border-radius: 16px;
  padding: 20px;
}

.btn {
  border-radius: 9px;
  min-height: 36px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 700;
  transition: transform .15s, box-shadow .15s, background .15s;
}

.btn:hover {
  background: #f8fafc;
  box-shadow: 0 4px 10px #0f172a14;
}

.btn.primary, .btn-primary {
  color: #fff;
  background: linear-gradient(135deg,var(--primary),var(--primary-dark));
  border-color: var(--primary);
}

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

.status {
  font-weight: 800;
}

.status.pending {
  color: #92400e;
  background: #fffbeb;
}

.status.pending:before {
  content: "";
  background: var(--orange);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  display: inline-block;
}

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

  .dashboard-content {
    padding: 16px;
  }
}

@media (max-width: 850px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .dashboard-content {
    padding: 12px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    min-height: 120px;
  }

  .stat-card .value {
    font-size: 28px;
  }

  .due-soon-panel {
    width: 96%;
    padding: 14px;
  }

  .due-soon-panel .panel-header {
    align-items: flex-start;
  }
}

.dashboard-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 32px 40px;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  display: grid;
}

.dashboard-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(420px, .75fr);
  gap: 20px;
  width: 100%;
  display: grid;
}

.full-width {
  grid-column: 1 / -1;
}

.equipment-schedule-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.equipment-schedule-table {
  width: 100%;
  overflow-x: auto;
}

.equipment-schedule-table table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1450px;
}

.equipment-schedule-table th {
  color: #475569;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 13px 12px;
  font-size: 10px;
  font-weight: 800;
}

.equipment-schedule-table td {
  white-space: nowrap;
  border-bottom: 1px solid #eef2f7;
  padding: 13px 12px;
  font-size: 12px;
}

.equipment-schedule-table tbody tr:hover {
  background: #f8fbff;
}

.equipment-table-header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  display: flex;
}

.equipment-table-header h2 {
  color: #172033;
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.equipment-table-header p {
  color: #64748b;
  margin: 5px 0 0;
  font-size: 12px;
}

.schedule-summary {
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  padding: 8px 13px;
  font-size: 11px;
  font-weight: 800;
}

@media (min-width: 1400px) {
  .dashboard-content {
    padding-left: 32px;
    padding-right: 32px;
  }

  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .dashboard-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(420px, .75fr);
  }

  .equipment-schedule-card {
    width: 100%;
  }
}

@media (min-width: 1600px) {
  .dashboard-content {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 850px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .equipment-table-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

@media (max-width: 650px) {
  .dashboard-content {
    padding: 16px 12px 28px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .equipment-schedule-card {
    padding: 14px;
  }

  .equipment-table-header {
    display: block;
  }

  .schedule-summary {
    margin-top: 12px;
    display: inline-block;
  }
}

/* [project]/app/equipment-mobile.css [app-client] (css) */
.equipment-schedule-table {
  border: 0;
}

@media (max-width: 700px) {
  .equipment-schedule-table {
    border: 0;
    overflow: visible;
  }

  .equipment-schedule-table table {
    border-collapse: separate;
    border-spacing: 0 12px;
    width: 100%;
    min-width: 0;
  }

  .equipment-schedule-table thead {
    display: none;
  }

  .equipment-schedule-table tbody, .equipment-schedule-table tr, .equipment-schedule-table td {
    width: 100%;
    display: block;
  }

  .equipment-schedule-table tbody tr {
    background: #fff;
    border: 1px solid #dce5f0;
    border-radius: 16px;
    margin-bottom: 14px;
    padding: 14px;
    position: relative;
    box-shadow: 0 5px 15px #0f23410f;
  }

  .equipment-schedule-table tbody tr:hover {
    background: #fff;
  }

  .equipment-schedule-table tbody td {
    white-space: normal;
    text-align: right;
    border: 0;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 7px 0;
    font-size: 12px;
    display: flex;
  }

  .equipment-schedule-table tbody td:first-child:before {
    content: "S.No";
  }

  .equipment-schedule-table tbody td:nth-child(2):before {
    content: "Department";
  }

  .equipment-schedule-table tbody td:nth-child(3):before {
    content: "Inventory No";
  }

  .equipment-schedule-table tbody td:nth-child(4):before {
    content: "Location";
  }

  .equipment-schedule-table tbody td:nth-child(5):before {
    content: "Equipment";
  }

  .equipment-schedule-table tbody td:nth-child(6):before {
    content: "Model";
  }

  .equipment-schedule-table tbody td:nth-child(7):before {
    content: "Serial No";
  }

  .equipment-schedule-table tbody td:nth-child(8):before {
    content: "Make";
  }

  .equipment-schedule-table tbody td:nth-child(9):before {
    content: "Campus";
  }

  .equipment-schedule-table tbody td:nth-child(10):before {
    content: "Contract";
  }

  .equipment-schedule-table tbody td:nth-child(11):before {
    content: "PM 1";
  }

  .equipment-schedule-table tbody td:nth-child(12):before {
    content: "PM 2";
  }

  .equipment-schedule-table tbody td:nth-child(13):before {
    content: "PM 3";
  }

  .equipment-schedule-table tbody td:nth-child(14):before {
    content: "PM 4";
  }

  .equipment-schedule-table tbody td:nth-child(15):before {
    content: "Action";
  }

  .equipment-schedule-table tbody td:before {
    color: #718096;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
  }

  .equipment-schedule-table tbody td:nth-child(5) {
    text-align: left;
    border-bottom: 1px solid #edf2f7;
    margin-bottom: 5px;
    padding-bottom: 12px;
    display: block;
  }

  .equipment-schedule-table tbody td:nth-child(5):before {
    margin-bottom: 4px;
    display: block;
  }

  .equipment-schedule-table tbody td:nth-child(11), .equipment-schedule-table tbody td:nth-child(12), .equipment-schedule-table tbody td:nth-child(13), .equipment-schedule-table tbody td:nth-child(14) {
    background: #f8faff;
    border: 1px solid #e8eef6;
    border-radius: 9px;
    min-height: 42px;
    margin-top: 3px;
    padding: 7px 9px;
  }

  .equipment-schedule-table tbody td:nth-child(11):before, .equipment-schedule-table tbody td:nth-child(12):before, .equipment-schedule-table tbody td:nth-child(13):before, .equipment-schedule-table tbody td:nth-child(14):before {
    color: #3155f5;
  }

  .equipment-schedule-table .pmcell {
    align-items: flex-end;
    min-width: 0;
  }

  .equipment-schedule-table .pmdate {
    font-size: 11px;
  }

  .equipment-schedule-table tbody td:nth-child(15) {
    border-top: 1px solid #edf2f7;
    margin-top: 10px;
    padding-top: 13px;
  }

  .equipment-schedule-table tbody td:nth-child(15):before {
    color: #3155f5;
  }

  .equipment-schedule-table tbody td:nth-child(15) .btn {
    width: auto;
  }
}

/* [project]/app/auth.css [app-client] (css) */
.login-methods {
  background: #eef2f7;
  border-radius: 10px;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 20px;
  padding: 5px;
  display: grid;
}

.login-method {
  color: #64748b;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 7px;
  height: 38px;
  font-size: 12px;
  font-weight: 700;
}

.login-method.active {
  color: #fff;
  background: linear-gradient(135deg, #3155f5, #4c6fff);
  box-shadow: 0 3px 8px #3155f533;
}

.login-field {
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
  display: flex;
}

.login-field label {
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.login-field input {
  border: 1px solid var(--line);
  border-radius: 9px;
  width: 100%;
  padding: 11px;
}

.login-field input:disabled {
  cursor: not-allowed;
  opacity: .65;
}

.authmsg {
  min-height: 25px;
}

/* [project]/app/analytics.css [app-client] (css) */
.legacy-analytics {
  display: none;
}

.dashboard-filter-bar {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 14px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 14px;
  display: flex;
}

.dashboard-filter-bar .searchbox {
  flex: 1;
  min-width: 220px;
}

.kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
  display: grid;
}

.kpi-grid > .stat, .kpi-grid > .clickable-stat {
  min-width: 0;
}

.kpi-grid > .stat {
  min-height: 140px;
}

.kpi-grid .clickable-stat .stat {
  height: 100%;
}

.pm-summary, .chart-card, .due-panel {
  margin-bottom: 18px;
}

.card-heading {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.card-heading h2 {
  margin: 0;
  font-size: 16px;
}

.card-heading p {
  color: var(--muted);
  margin: 5px 0 0;
  font-size: 12px;
}

.card-heading > svg {
  color: var(--primary);
}

.pm-summary-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 20px;
  display: grid;
}

.summary-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  justify-items: center;
  gap: 5px;
  padding: 14px 8px;
  display: grid;
}

.summary-item svg {
  width: 20px;
}

.summary-item strong {
  font-size: 24px;
}

.summary-item span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.summary-item.done {
  color: #166534;
  background: #ecfdf3;
}

.summary-item.pending {
  color: #92400e;
  background: #fffbeb;
}

.summary-item.overdue {
  color: #991b1b;
  background: #fef2f2;
}

.summary-item.scheduled {
  color: #3730a3;
  background: #eef2ff;
}

.summary-item.na {
  color: #475569;
  background: #f1f5f9;
}

.pm-summary-footer {
  color: var(--muted);
  justify-content: space-between;
  margin-top: 16px;
  font-size: 12px;
  display: flex;
}

.pm-summary-footer strong {
  color: var(--text);
  margin-left: 5px;
}

.analytics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
  display: grid;
}

.chart-large {
  grid-column: span 2;
}

.chart-container {
  min-height: 190px;
  margin-top: 18px;
}

.chart-container.donut {
  min-height: 190px;
}

.workload-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
  display: grid;
}

.workload-card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  cursor: pointer;
  border-radius: 16px;
  align-items: center;
  gap: 14px;
  padding: 18px;
  display: flex;
}

.workload-card svg {
  color: var(--primary);
}

.workload-card span, .workload-card small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  display: block;
}

.workload-card strong {
  margin: 4px 0;
  font-size: 28px;
  display: block;
}

.overdue-card svg, .overdue-card strong {
  color: var(--red);
}

.pending-card svg, .pending-card strong {
  color: var(--orange);
}

.yet-card svg, .yet-card strong {
  color: var(--primary);
}

.icon-button {
  border: 1px solid var(--line);
  width: 34px;
  height: 34px;
  color: var(--text);
  background: #fff;
  border-radius: 9px;
  place-items: center;
  display: grid;
}

.due-panel {
  padding: 20px;
}

.due-panel .table-wrap {
  margin-top: 18px;
}

@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .chart-large {
    grid-column: auto;
  }

  .workload-grid {
    grid-template-columns: 1fr;
  }

  .pm-summary-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 650px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .pm-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pm-summary-footer {
    display: block;
  }

  .pm-summary-footer span {
    margin-top: 6px;
    display: block;
  }

  .analytics-grid {
    gap: 12px;
  }

  .dashboard-filter-bar {
    padding: 10px;
  }

  .dashboard-filter-bar .searchbox {
    min-width: 100%;
  }

  .due-panel {
    padding: 14px;
  }
}

/* [project]/app/recharts-analytics.css [app-client] (css) */
.analytics-section {
  width: 100%;
  margin-top: 20px;
}

.analytics-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.chart-card {
  min-width: 0;
  overflow: hidden;
}

.chart-box {
  width: 100%;
  height: 280px;
  margin-top: 8px;
}

.pie-box {
  height: 280px;
}

@media (max-width: 1300px) {
  .analytics-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .analytics-grid-four {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .chart-box, .pie-box {
    height: 270px;
  }
}

/* [project]/app/final-analytics.css [app-client] (css) */
.analytics-section {
  width: 100%;
  margin-top: 18px;
}

.analytics-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.chart-card {
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 16px;
  min-width: 0;
  min-height: 330px;
  padding: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px #0f23410e, 0 1px 3px #0f23410a;
}

.chart-header, .card-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.chart-header h2, .card-heading h2 {
  color: #172033;
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}

.chart-header p, .card-heading p {
  color: #718096;
  margin: 6px 0 0;
  font-size: 10px;
}

.chart-header svg, .card-heading > svg {
  color: #3155f5;
  flex-shrink: 0;
}

.chart-area {
  width: 100%;
  height: 270px;
  margin-top: 5px;
  position: relative;
}

.donut-center {
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.donut-center strong {
  color: #172033;
  font-size: 27px;
  line-height: 1;
}

.donut-center span {
  color: #718096;
  margin-top: 5px;
  font-size: 9px;
}

.workload-row {
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.workload-card {
  cursor: pointer;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 15px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 82px;
  padding: 14px 16px;
  transition: transform .18s, box-shadow .18s;
  display: flex;
  box-shadow: 0 5px 16px #0f23410b;
}

.workload-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 24px #0f234117;
}

.workload-card > svg:last-child {
  color: #8a98ad;
  margin-left: auto;
}

.workload-card > div {
  flex-direction: column;
  display: flex;
}

.workload-card span {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.workload-card strong {
  color: #172033;
  margin-top: 2px;
  font-size: 22px;
  line-height: 1.1;
}

.workload-card small {
  color: #718096;
  margin-top: 3px;
  font-size: 9px;
}

.workload-overdue > svg:first-child {
  color: #e52b2b;
}

.workload-pending > svg:first-child {
  color: #ed9900;
}

.workload-yet > svg:first-child {
  color: #3155f5;
}

.equipment-schedule-header {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 18px 18px 14px;
  display: flex;
}

.equipment-schedule-header h2 {
  color: #172033;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
}

.equipment-schedule-header p {
  color: #718096;
  margin: 5px 0 0;
  font-size: 11px;
}

.schedule-mini-stats {
  gap: 8px;
  display: flex;
}

.schedule-mini-stats > div {
  text-align: center;
  background: #f6f8fc;
  border-radius: 10px;
  min-width: 80px;
  padding: 8px 11px;
}

.schedule-mini-stats strong {
  color: #172033;
  font-size: 15px;
  display: block;
}

.schedule-mini-stats span {
  color: #718096;
  text-transform: uppercase;
  margin-top: 2px;
  font-size: 8px;
  font-weight: 700;
  display: block;
}

@media (max-width: 1400px) {
  .analytics-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  .workload-row {
    grid-template-columns: 1fr;
  }

  .equipment-schedule-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .schedule-mini-stats {
    width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 650px) {
  .analytics-grid-four {
    grid-template-columns: 1fr;
  }

  .chart-card {
    min-height: 320px;
  }

  .chart-area {
    height: 260px;
  }

  .schedule-mini-stats {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    display: grid;
  }

  .schedule-mini-stats > div {
    min-width: 0;
  }
}

/* [project]/app/schedule-search.css [app-client] (css) */
.schedule-search-bar {
  border-bottom: 1px solid #edf1f6;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 0 18px 15px;
  display: flex;
}

.schedule-search-box {
  background: #f8fafc;
  border: 1px solid #dce4ef;
  border-radius: 10px;
  flex: 1;
  align-items: center;
  max-width: 520px;
  height: 42px;
  transition: border-color .2s, box-shadow .2s;
  display: flex;
  position: relative;
}

.schedule-search-box:focus-within {
  border-color: #3155f5;
  box-shadow: 0 0 0 3px #3155f514;
}

.schedule-search-box > svg {
  color: #8a98ad;
  flex-shrink: 0;
  margin-left: 13px;
}

.schedule-search-box input {
  color: #172033;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  height: 100%;
  padding: 0 40px 0 10px;
  font-size: 12px;
}

.schedule-search-box input::placeholder {
  color: #9aa7b8;
}

.schedule-search-clear {
  color: #64748b;
  cursor: pointer;
  background: #e9eef6;
  border: 0;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
  width: 27px;
  height: 27px;
  display: flex;
  position: absolute;
  right: 9px;
}

.schedule-search-clear:hover {
  color: #172033;
  background: #dce5f2;
}

.schedule-search-info {
  color: #718096;
  flex-shrink: 0;
  font-size: 11px;
}

.schedule-search-info strong {
  color: #172033;
  font-weight: 800;
}

@media (max-width: 700px) {
  .schedule-search-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 0 12px 12px;
  }

  .schedule-search-box {
    width: 100%;
    max-width: none;
  }

  .schedule-search-info {
    font-size: 10px;
  }
}

/* [project]/app/equipment-filter.css [app-client] (css) */
:root {
  --navy-950: #071a2f;
  --navy-900: #0b2442;
  --navy-800: #12385f;
  --blue: #1976a8;
  --page: #f4f7fa;
  --card: #fff;
  --border: #dfe7ef;
  --text: #172b3f;
  --muted: #718096;
  --success: #16805c;
  --warning: #c48600;
  --danger: #c43d3d;
  --info: #2878b5;
}

.filter-field {
  flex-direction: column;
  gap: 5px;
  min-width: 145px;
  display: flex;
}

.filter-field label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.filter-field select {
  color: #172033;
  background: #fff;
  border: 1px solid #dce4ef;
  border-radius: 9px;
  height: 40px;
  padding: 0 10px;
  font-size: 12px;
}

.equipment-search {
  flex: 1.5;
  min-width: 260px;
}

.section-filter {
  min-width: 210px;
}

.section-filter select {
  width: 100%;
}

.header-section-selector, .header-section-name {
  border: 1px solid var(--line);
  min-height: 40px;
  color: var(--text);
  background: #fff;
  border-radius: 9px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.header-section-selector svg, .header-section-name svg {
  color: var(--primary);
  flex-shrink: 0;
}

.header-section-selector select {
  min-height: 30px;
  color: var(--text);
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
  font-weight: 600;
}

.filter-search-box {
  background: #fff;
  border: 1px solid #dce4ef;
  border-radius: 9px;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  display: flex;
}

.filter-search-box:focus-within {
  border-color: #3155f5;
  box-shadow: 0 0 0 3px #3155f514;
}

.filter-search-box svg {
  color: #7b8aa0;
  flex-shrink: 0;
}

.filter-search-box input {
  color: #172033;
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  height: 100%;
  font-size: 12px;
}

.filter-search-box input::placeholder {
  color: #9aa7b8;
}

.filter-search-box button {
  color: #64748b;
  cursor: pointer;
  background: #edf1f6;
  border: 0;
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  display: flex;
}

.filter-search-box button:hover {
  background: #e2e8f0;
}

.reset-filters {
  border: 1px solid var(--line);
  height: 40px;
  color: var(--text);
  background: #fff;
  border-radius: 9px;
  align-self: flex-end;
  padding: 0 14px;
  font-weight: 600;
}

.reset-filters:hover {
  background: #f8fafc;
}

@media (max-width: 900px) {
  .equipment-search {
    min-width: 100%;
  }

  .filter-field {
    flex: 145px;
  }
}

@media (max-width: 650px) {
  .filter-field {
    min-width: 100%;
  }

  .reset-filters {
    width: 100%;
  }
}

.schedule-heading {
  margin-bottom: 18px;
}

.schedule-section-name {
  color: #173b72;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #e8f1ff;
  border-radius: 999px;
  align-items: center;
  margin-bottom: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
}

.schedule-heading h2 {
  margin: 0;
}

.schedule-heading p {
  margin: 5px 0 0;
}

.secondary-button, .primary-button {
  border: 1px solid var(--line);
  border-radius: 9px;
  min-height: 40px;
  padding: 0 14px;
  font-weight: 600;
}

.secondary-button {
  color: var(--text);
  background: #fff;
}

.secondary-button:hover {
  background: #f8fafc;
}

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

.primary-button:disabled {
  cursor: not-allowed;
  opacity: .65;
}

.user-management-card {
  background: #fff;
  border: 1px solid #dce5ef;
  border-radius: 16px;
  margin-bottom: 24px;
  padding: 22px;
  box-shadow: 0 8px 24px #0f233c0f;
}

.user-form-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
  display: grid;
}

.form-field {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.form-field label {
  font-size: 12px;
  font-weight: 700;
}

.form-field input, .form-field select {
  background: #fff;
  border: 1px solid #ccd7e3;
  border-radius: 9px;
  min-height: 42px;
  padding: 0 12px;
}

.user-management-actions {
  margin-top: 18px;
}

.user-message {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
}

.dashboard-container {
  box-sizing: border-box;
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px;
}

.dashboard-header {
  box-sizing: border-box;
  width: 100%;
}

.header-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.filter-bar {
  grid-template-columns: minmax(280px, 2fr) repeat(5, minmax(130px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  display: grid;
}

.kpi-grid, .analytics-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.analytics-card {
  min-width: 0;
  height: 220px;
  overflow: hidden;
}

.schedule-section {
  width: 100%;
  min-width: 0;
}

.table-container {
  -webkit-overflow-scrolling: touch;
  width: 100%;
  overflow-x: auto;
}

@media (max-width: 1200px) {
  .filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .equipment-search {
    grid-column: 1 / -1;
  }

  .analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dashboard-container, .dashboard-header {
    padding: 16px;
  }

  .header-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dashboard-container {
    padding: 10px;
  }

  .header-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .header-actions button, .header-actions select {
    width: 100%;
    min-height: 44px;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    display: flex;
  }

  .filter-field {
    width: 100%;
  }

  .filter-field input, .filter-field select {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
  }

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .analytics-card {
    height: 240px;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .table-container {
    display: none;
  }

  .schedule-mobile-list {
    flex-direction: column;
    gap: 12px;
    display: flex;
  }
}

@media (min-width: 701px) {
  .schedule-mobile-list {
    display: none;
  }
}

@media (max-width: 1100px) {
  .user-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .user-form-grid {
    grid-template-columns: 1fr;
  }
}

.kpi-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.kpi-card {
  background: #fff;
  border: 1px solid #e3eaf2;
  border-radius: 14px;
  min-width: 0;
  padding: 18px;
  box-shadow: 0 4px 16px #0f233c0f;
}

.kpi-label {
  letter-spacing: .05em;
  color: #66758a;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
}

.kpi-value {
  color: #142b4a;
  margin-top: 10px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.kpi-subtitle {
  color: #7b8797;
  margin-top: 8px;
  font-size: 12px;
  display: block;
}

.kpi-card-header {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.kpi-card-icon {
  width: 34px;
  height: 34px;
  color: var(--blue);
  background: #edf5fa;
  border-radius: 10px;
  place-items: center;
  display: grid;
}

.kpi-card.kpi-danger {
  border-color: #efcaca;
}

.kpi-card.kpi-danger .kpi-card-icon {
  color: var(--danger);
  background: #fff0f0;
}

.kpi-card.kpi-danger .kpi-value {
  color: var(--danger);
}

.kpi-card.kpi-warning .kpi-card-icon {
  color: var(--warning);
  background: #fff8e5;
}

.kpi-card.kpi-warning .kpi-value {
  color: var(--warning);
}

.kpi-card.kpi-success .kpi-card-icon {
  color: var(--success);
  background: #eaf7f1;
}

.kpi-progress {
  background: #e7eef4;
  border-radius: 999px;
  height: 5px;
  margin-top: 12px;
  overflow: hidden;
}

.kpi-progress-bar {
  border-radius: inherit;
  background: var(--blue);
  height: 100%;
}

.section-banner {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 16px 18px;
  display: flex;
}

.section-eyebrow {
  color: var(--muted);
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 800;
}

.section-banner h2 {
  color: var(--navy-900);
  margin: 5px 0 0;
}

.section-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .section-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1400px) {
  .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

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

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* [project]/app/compact-analytics.css [app-client] (css) */
.analytics-section {
  width: 100%;
  margin-top: 16px;
}

.analytics-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.chart-card {
  background: #fff;
  border: 1px solid #e1e8f2;
  border-radius: 14px;
  min-width: 0;
  height: 300px;
  padding: 13px;
  overflow: hidden;
  box-shadow: 0 4px 14px #142d500e;
}

.chart-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.chart-header h2 {
  color: #172033;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.chart-header p {
  color: #718096;
  margin: 4px 0 0;
  font-size: 9px;
}

.chart-header svg {
  color: #3155f5;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.chart-area {
  width: 100%;
  height: 245px;
  margin-top: 2px;
}

.department-chart {
  height: 245px;
}

.chart-card .recharts-legend-item-text {
  font-size: 9px !important;
}

.chart-card .recharts-default-tooltip {
  font-size: 10px;
}

.donut-center strong {
  font-size: 23px;
}

.donut-center span {
  font-size: 8px;
}

@media (max-width: 1300px) {
  .analytics-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-card {
    height: 300px;
  }
}

@media (max-width: 700px) {
  .analytics-grid-four {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .chart-card {
    height: 300px;
  }

  .chart-area, .department-chart {
    height: 245px;
  }
}

/* [project]/app/professional-analytics.css [app-client] (css) */
.analytics-section {
  width: 100%;
  margin-top: 16px;
}

.analytics-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  display: grid;
}

.chart-card {
  background: linear-gradient(145deg, #fff 0%, #fbfdff 100%);
  border: 1px solid #e1e8f2;
  border-radius: 15px;
  min-width: 0;
  height: 275px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 18px #142d500e, 0 1px 3px #142d5009;
}

.chart-card:before {
  content: "";
  opacity: .7;
  background: linear-gradient(90deg, #3155f5, #6d7df7, #0000);
  border-radius: 0 0 4px 4px;
  height: 2px;
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
}

.chart-header {
  z-index: 2;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 35px;
  display: flex;
  position: relative;
}

.chart-header h2 {
  color: #172033;
  letter-spacing: -.01em;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.chart-header p {
  color: #718096;
  margin: 4px 0 0;
  font-size: 9px;
  line-height: 1.2;
}

.chart-header svg {
  box-sizing: content-box;
  color: #3155f5;
  background: #edf3ff;
  border-radius: 9px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 6px;
}

.chart-area {
  width: 100%;
  height: 215px;
  margin-top: 3px;
}

.department-chart {
  height: 215px;
}

.chart-card .recharts-text {
  fill: #64748b;
  font-size: 9px;
}

.chart-card .recharts-cartesian-axis-tick-value {
  font-size: 9px;
}

.chart-card .recharts-legend-item-text {
  color: #526176 !important;
  font-size: 9px !important;
}

.chart-card .recharts-legend-wrapper {
  font-size: 9px;
}

.chart-card .recharts-tooltip-wrapper {
  font-size: 10px;
}

.chart-card .recharts-cartesian-grid-horizontal line, .chart-card .recharts-cartesian-grid-vertical line {
  stroke: #e8edf4;
}

.donut-center {
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  display: flex;
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.donut-center strong {
  color: #172033;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
}

.donut-center span {
  color: #718096;
  margin-top: 4px;
  font-size: 8px;
  font-weight: 600;
}

@media (min-width: 1400px) {
  .analytics-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1350px) {
  .analytics-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-card {
    height: 275px;
  }
}

@media (max-width: 700px) {
  .analytics-grid-four {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .chart-card {
    height: 285px;
    padding: 13px;
  }

  .chart-area, .department-chart {
    height: 225px;
  }
}

/* [project]/app/compact-chart-height.css [app-client] (css) */
.analytics-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.chart-card {
  background: linear-gradient(145deg, #fff 0%, #fbfdff 100%);
  border: 1px solid #e1e8f2;
  border-radius: 13px;
  min-width: 0;
  height: 220px;
  padding: 11px 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px #142d500d;
}

.chart-header {
  min-height: 30px;
}

.chart-header h2 {
  font-size: 12px;
}

.chart-header p {
  margin-top: 3px;
  font-size: 8px;
}

.chart-header svg {
  width: 16px;
  height: 16px;
  padding: 5px;
}

.chart-area {
  height: 170px;
  margin-top: 0;
}

.department-chart {
  height: 170px;
}

.chart-card .recharts-text, .chart-card .recharts-cartesian-axis-tick-value {
  font-size: 8px;
}

.chart-card .recharts-legend-item-text {
  font-size: 8px !important;
}

.donut-center {
  top: 50%;
}

.donut-center strong {
  font-size: 20px;
}

.donut-center span {
  font-size: 7px;
}

@media (max-width: 1350px) {
  .analytics-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .analytics-grid-four {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .chart-card {
    height: 230px;
  }

  .chart-area, .department-chart {
    height: 180px;
  }
}

/* [project]/app/four-analytics-cards.css [app-client] (css) */
.analytics-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  display: grid;
}

.analytics-grid-four .chart-card {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e2e8f2;
  border-radius: 18px;
  width: 100%;
  height: 220px;
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 18px #0f234112;
}

.analytics-grid-four .chart-header {
  justify-content: space-between;
  align-items: flex-start;
  height: 35px;
  display: flex;
}

.analytics-grid-four .chart-header h2 {
  color: #172033;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.analytics-grid-four .chart-header p {
  color: #718096;
  margin: 5px 0 0;
  font-size: 9px;
}

.analytics-grid-four .chart-header svg {
  box-sizing: content-box;
  color: #3155f5;
  background: #edf3ff;
  border-radius: 16px;
  width: 18px;
  height: 18px;
  padding: 9px;
}

.analytics-grid-four .chart-area {
  width: 100%;
  height: 145px;
  margin-top: 2px;
}

.analytics-grid-four .department-chart {
  height: 145px;
}

.analytics-grid-four .recharts-text, .analytics-grid-four .recharts-cartesian-axis-tick-value {
  font-size: 8px;
}

.analytics-grid-four .recharts-legend-item-text {
  font-size: 8px !important;
}

.analytics-grid-four .donut-center {
  top: 56%;
}

.analytics-grid-four .donut-center strong {
  font-size: 20px;
}

.analytics-grid-four .donut-center span {
  font-size: 7px;
}

.analytics-grid-four .chart-card {
  transition: transform .18s, box-shadow .18s;
}

.analytics-grid-four .chart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px #0f23411a;
}

@media (max-width: 1350px) {
  .analytics-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .analytics-grid-four {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .analytics-grid-four .chart-card {
    height: 220px;
  }

  .analytics-grid-four .chart-area, .analytics-grid-four .department-chart {
    height: 145px;
  }
}

/*# sourceMappingURL=app_014wb9v._.css.map*/