/* =========================================================
   ATOSY ERP
   EXECUTIVE DASHBOARD
   ========================================================= */

#atosy-dashboard-v2 {
  width: min(1480px, calc(100% - 36px));
  margin: 24px auto 34px;
}


/* =========================================================
   HERO
   ========================================================= */

.dashboard-v2-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;

  padding: 24px 26px;

  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      rgba(4, 38, 97, .76),
      rgba(9, 95, 213, .54)
    );

  border: 1px solid rgba(122, 191, 255, .27);

  backdrop-filter:
    blur(26px)
    saturate(165%);

  -webkit-backdrop-filter:
    blur(26px)
    saturate(165%);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 20px 55px rgba(0,23,79,.22);

  color: #fff;
}

.dashboard-v2-title h1 {
  margin: 0 0 7px;

  color: #fff !important;

  font-size: 31px;
  line-height: 1.12;
}

.dashboard-v2-title p {
  margin: 0;

  color: rgba(255,255,255,.76) !important;

  font-size: 14px;
}

.dashboard-v2-search {
  width: 360px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 0 16px;

  height: 46px;

  border-radius: 999px;

  border:
    1px solid rgba(255,255,255,.17);

  background:
    rgba(255,255,255,.08);

  color: rgba(255,255,255,.82);
}

.dashboard-v2-search input {
  flex: 1;

  border: 0;
  outline: 0;

  background: transparent;

  color: #fff;

  font: inherit;
}

.dashboard-v2-search input::placeholder {
  color: rgba(255,255,255,.56);
}


/* =========================================================
   KPI STRIP
   ========================================================= */

.dashboard-v2-kpis {
  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 12px;

  margin-top: 14px;
}

.dashboard-v2-kpi {
  min-height: 96px;

  padding: 16px 17px;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(241,247,255,.94)
    );

  border:
    1px solid rgba(255,255,255,.62);

  box-shadow:
    0 13px 32px rgba(0,34,100,.13);

  color: #113777;
}

.dashboard-v2-kpi-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 8px;
}

.dashboard-v2-kpi-label {
  color: #7186a8;

  font-size: 11px;
  font-weight: 700;
}

.dashboard-v2-kpi-icon {
  width: 35px;
  height: 35px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  font-size: 17px;

  background: #eaf3ff;
}

.dashboard-v2-kpi strong {
  display: block;

  margin-top: 5px;

  font-size: 27px;
}

.dashboard-v2-kpi small {
  color: #7186a8;
  font-size: 10px;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.dashboard-v2-section-title {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin: 25px 3px 12px;
}

.dashboard-v2-section-title h2 {
  margin: 0;

  color: #fff;

  font-size: 18px;
}

.dashboard-v2-section-title span {
  color: rgba(255,255,255,.62);

  font-size: 11px;
}


/* =========================================================
   FUNCTION CARDS
   ========================================================= */

.dashboard-v2-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 14px;
}

.dashboard-v2-card {
  position: relative;

  min-height: 210px;

  display: flex;
  flex-direction: column;

  padding: 18px;

  border: 0;

  border-radius: 25px;

  text-align: left;

  cursor: pointer;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(242,247,255,.95)
    );

  border:
    1px solid rgba(255,255,255,.68);

  box-shadow:
    0 15px 34px rgba(0,33,95,.15);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.dashboard-v2-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 20px 42px rgba(0,36,106,.21);
}

.dashboard-v2-card-head {
  display: flex;

  align-items: center;

  gap: 12px;
}

.dashboard-v2-card-icon {
  width: 48px;
  height: 48px;

  min-width: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 16px;

  color: #fff;

  font-size: 23px;
  font-weight: 800;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30);
}

.dashboard-v2-card[data-tone="blue"]
.dashboard-v2-card-icon {
  background:
    linear-gradient(
      135deg,
      #1996ff,
      #2866ff
    );
}

.dashboard-v2-card[data-tone="purple"]
.dashboard-v2-card-icon {
  background:
    linear-gradient(
      135deg,
      #a25aff,
      #6946e8
    );
}

.dashboard-v2-card[data-tone="green"]
.dashboard-v2-card-icon {
  background:
    linear-gradient(
      135deg,
      #26d393,
      #13a968
    );
}

.dashboard-v2-card[data-tone="orange"]
.dashboard-v2-card-icon {
  background:
    linear-gradient(
      135deg,
      #ffb241,
      #ff7b32
    );
}

.dashboard-v2-card[data-tone="cyan"]
.dashboard-v2-card-icon {
  background:
    linear-gradient(
      135deg,
      #18cfe0,
      #159fd8
    );
}

.dashboard-v2-card[data-tone="red"]
.dashboard-v2-card-icon {
  background:
    linear-gradient(
      135deg,
      #ff6577,
      #ec354c
    );
}

.dashboard-v2-card-copy h3 {
  margin: 0;

  color: #103675;

  font-size: 17px;
}

.dashboard-v2-card-copy p {
  margin: 4px 0 0;

  color: #7084a5;

  font-size: 11px;
  line-height: 1.45;
}

.dashboard-v2-card-body {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 8px;

  margin-top: 17px;
}

.dashboard-v2-mini {
  padding: 10px;

  border-radius: 14px;

  background: #f5f9ff;

  border:
    1px solid rgba(34,99,190,.08);
}

.dashboard-v2-mini span {
  display: block;

  color: #7a8dab;

  font-size: 9px;
}

.dashboard-v2-mini strong {
  display: block;

  margin-top: 3px;

  color: #123978;

  font-size: 16px;
}

.dashboard-v2-card-footer {
  margin-top: auto;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding-top: 13px;

  color: #236bdd;

  font-size: 11px;
  font-weight: 800;
}

.dashboard-v2-card-footer .route-hint {
  padding: 5px 8px;

  border-radius: 999px;

  background: #edf4ff;

  color: #5f76a0;

  font-size: 9px;
}


/* =========================================================
   LOWER PANELS
   ========================================================= */

.dashboard-v2-lower {
  display: grid;

  grid-template-columns:
    1.3fr .7fr;

  gap: 14px;

  margin-top: 14px;
}

.dashboard-v2-panel {
  padding: 18px;

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(242,247,255,.94)
    );

  border:
    1px solid rgba(255,255,255,.64);

  box-shadow:
    0 15px 34px rgba(0,33,95,.14);
}

.dashboard-v2-panel h3 {
  margin: 0 0 14px;

  color: #113777;

  font-size: 16px;
}

.dashboard-v2-activity {
  display: flex;

  gap: 11px;

  padding: 10px 0;

  border-bottom:
    1px solid rgba(30,91,178,.08);
}

.dashboard-v2-activity:last-child {
  border-bottom: 0;
}

.dashboard-v2-activity-dot {
  width: 10px;
  height: 10px;

  min-width: 10px;

  margin-top: 5px;

  border-radius: 50%;

  background: #1687ff;
}

.dashboard-v2-activity-copy strong {
  display: block;

  color: #173a78;

  font-size: 11px;
}

.dashboard-v2-activity-copy span {
  color: #7c8eaa;

  font-size: 10px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

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

  .dashboard-v2-kpis {
    grid-template-columns:
      repeat(3, 1fr);
  }

}

@media (max-width: 760px) {

  #atosy-dashboard-v2 {
    width:
      calc(100% - 18px);
  }

  .dashboard-v2-hero {
    grid-template-columns:
      1fr;
  }

  .dashboard-v2-search {
    width:
      auto;
  }

  .dashboard-v2-grid,
  .dashboard-v2-kpis,
  .dashboard-v2-lower {
    grid-template-columns:
      1fr;
  }

}