/* ========================================
   基础页面
   ======================================== */

.site-header {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.site-logo {
  color: var(--bs-body-color);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
}

.site-logo:hover {
  color: var(--bs-primary);
}


/* ========================================
   首页
   ======================================== */

.home-page {
  min-height: calc(100vh - 180px);

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;
}

.home-content {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.quote-box {
  padding: 2rem 1.5rem;
}

.quote-mark {
  font-size: 4rem;
  line-height: 1;
  color: var(--bs-primary);
  opacity: .45;
}

.quote-text {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  line-height: 1.7;
  margin: 0;
}

.home-action {
  margin-top: 2rem;
}


/* ========================================
   个人中心
   ======================================== */

.personal-center {
  max-width: 1000px;
  margin: 0 auto;
}

.feature-card {
  display: block;

  height: 100%;

  padding: 2rem;

  text-align: center;

  color: var(--bs-body-color);

  text-decoration: none;

  border: 1px solid var(--bs-border-color);

  border-radius: 1rem;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

.feature-card:hover {
  color: var(--bs-body-color);

  transform: translateY(-3px);

  border-color: var(--bs-primary);

  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08);
}

.feature-icon {
  width: 56px;
  height: 56px;

  margin: 0 auto 1rem;

  display: flex;

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

  border-radius: 50%;

  background: var(--bs-primary-bg-subtle);

  color: var(--bs-primary);

  font-size: 1.5rem;

  font-weight: 600;
}

.feature-card p {
  margin-bottom: 0;

  color: var(--bs-secondary-color);
}


/* ========================================
   笔记
   ======================================== */

.note-card {
  padding: 1rem 0;

  border-bottom: 1px solid var(--bs-border-color);
}

.note-card:last-child {
  border-bottom: 0;
}


/* ========================================
   语录
   ======================================== */

.quote-list-item {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 1rem;

  padding: 1.25rem 0;

  border-bottom: 1px solid var(--bs-border-color);
}

.quote-list-item:last-child {
  border-bottom: 0;
}

.quote-list-text {
  flex: 1;

  font-size: 1.05rem;

  line-height: 1.7;
}

.quote-list-mark {
  color: var(--bs-primary);

  font-size: 1.5rem;

  font-weight: 600;
}

.quote-list-action {
  flex-shrink: 0;
}


/* ========================================
   手机
   ======================================== */

@media (max-width: 575.98px) {

  .site-header {
    padding: 1rem 0;
  }

  .home-page {
    min-height: calc(100vh - 150px);
  }

  .quote-box {
    padding: 1rem .5rem;
  }

  .quote-text {
    font-size: 1.3rem;
  }

  .quote-list-item {
    flex-direction: column;
  }

  .quote-list-action {
    width: 100%;
  }

  .quote-list-action .btn {
    width: 100%;
  }

}

/* ========================================
   应用管理
   ======================================== */

.feature-card-wrapper {
  height: 100%;
  text-align: center;
}


.feature-card-wrapper .feature-card {
  height: auto;
}


.remove-app-form {
  margin-top: .25rem;
}


.empty-app-card {
  padding: 3rem 1rem;

  text-align: center;

  border: 1px dashed var(--bs-border-color);

  border-radius: 1rem;

  color: var(--bs-body-color);
}


.available-app-card {
  padding: 1rem;

  border: 1px solid var(--bs-border-color);

  border-radius: .75rem;

  height: 100%;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}


.available-app-card:hover {
  border-color: var(--bs-primary);

  box-shadow:
    0 .25rem 1rem rgba(0, 0, 0, .06);
}


.small-icon {
  width: 44px;
  height: 44px;

  margin: 0;

  flex-shrink: 0;

  font-size: 1.2rem;
}


@media (max-width: 575.98px) {

  .available-app-card {
    padding: .875rem;
  }

}

/* =====================================================
   打卡页面
   ===================================================== */

.checkin-page {
  max-width: 1000px;
}


/* =====================================================
   页面顶部
   ===================================================== */

.checkin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}


.checkin-actions {
  display: flex;
  gap: .5rem;
}


/* =====================================================
   分组
   ===================================================== */

.checkin-group {
  margin-bottom: 1.25rem;

  border: 1px solid var(--bs-border-color);

  border-radius: 1rem;

  overflow: hidden;

  background: var(--bs-body-bg);
}


.group-header {
  width: 100%;

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

  padding: 1rem 1.1rem;

  border: 0;

  background: transparent;

  color: var(--bs-body-color);

  font-size: 1rem;

  font-weight: 600;

  text-align: left;
}


.group-header:hover {
  background: rgba(0, 0, 0, .025);
}


.group-title {
  display: flex;
  align-items: center;
  gap: .65rem;
}


.group-color {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: var(--group-color);
}


.group-arrow {
  color: var(--bs-secondary-color);

  transition: transform .2s ease;
}


.group-header[aria-expanded="true"] .group-arrow {
  transform: rotate(180deg);
}


.group-projects {
  padding: 0 .75rem .75rem;
}


.empty-group {
  padding: 1rem;

  color: var(--bs-secondary-color);

  font-size: .9rem;

  text-align: center;
}


/* =====================================================
   单独项目
   ===================================================== */

.ungrouped-section {
  margin-bottom: 1.5rem;
}


.ungrouped-title {
  margin-bottom: .6rem;

  color: var(--bs-secondary-color);

  font-size: .85rem;

  font-weight: 600;
}


/* =====================================================
   项目
   ===================================================== */

.checkin-project {
  margin-top: .5rem;

  border: 1px solid var(--bs-border-color);

  border-left: 4px solid var(--project-color);

  border-radius: .8rem;

  overflow: hidden;

  background: var(--bs-body-bg);
}


.project-main {
  width: 100%;

  display: flex;
  align-items: center;

  gap: .7rem;

  padding: .95rem 1rem;

  border: 0;

  background: transparent;

  color: var(--bs-body-color);

  text-align: left;
}


.project-main:hover {
  background: rgba(0, 0, 0, .025);
}


.project-color {
  width: 10px;
  height: 10px;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--project-color);
}


.project-name {
  flex: 1;

  font-weight: 500;
}


.project-status {
  min-width: 25px;

  text-align: center;
}


.today-done {
  color: var(--project-color);

  font-size: 1.15rem;

  font-weight: 700;
}


.today-undone {
  color: var(--bs-secondary-color);

  font-size: 1.15rem;
}


.project-arrow {
  color: var(--bs-secondary-color);

  transition: transform .2s ease;
}


.project-main[aria-expanded="true"] .project-arrow {
  transform: rotate(180deg);
}


/* =====================================================
   项目详情
   ===================================================== */

.project-detail {
  padding: 1rem;

  border-top: 1px solid var(--bs-border-color);

  background: rgba(0, 0, 0, .015);
}


.project-info {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 2rem;
}


.project-start {
  color: var(--bs-secondary-color);

  font-size: .78rem;
}


.project-start strong {
  display: block;

  margin-top: .2rem;

  color: var(--bs-body-color);

  font-weight: 400;
}


/* =====================================================
   统计数据
   ===================================================== */

.project-stats {
  display: flex;

  gap: 2rem;
}


.stat-item {
  min-width: 70px;

  text-align: center;
}


.stat-number {
  display: block;

  color: var(--project-color);

  font-size: 1.45rem;

  font-weight: 650;
}


.stat-label {
  display: block;

  margin-top: .15rem;

  color: var(--bs-secondary-color);

  font-size: .75rem;
}


/* =====================================================
   操作
   ===================================================== */

.project-actions {
  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: .5rem;

  margin-top: 1rem;

  padding-top: 1rem;

  border-top: 1px solid var(--bs-border-color);
}


.checkin-button {
  border-color: var(--project-color);

  background: var(--project-color);

  color: #fff;
}


.checkin-button:hover {
  opacity: .9;

  color: #fff;
}


.checkin-button.is-done {
  background: transparent;

  color: var(--project-color);
}


/* =====================================================
   删除区域
   ===================================================== */

.delete-project-area {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  margin-top: 1rem;

  padding: 1rem;

  border-top: 1px solid var(--bs-border-color);
}


/* =====================================================
   空状态
   ===================================================== */

.empty-checkins {
  padding: 4rem 1rem;

  text-align: center;

  border: 1px dashed var(--bs-border-color);

  border-radius: 1rem;
}


.empty-checkins-icon {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 54px;
  height: 54px;

  margin-bottom: 1rem;

  border-radius: 50%;

  background: rgba(13, 110, 253, .08);

  color: var(--bs-primary);

  font-size: 1.5rem;
}


/* =====================================================
   日历
   ===================================================== */

.checkin-calendar {
  padding: 1.25rem;

  border: 1px solid var(--bs-border-color);

  border-radius: 1rem;

  background: var(--bs-body-bg);
}


.calendar-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 1rem;
}


.calendar-nav {
  display: flex;

  gap: .35rem;
}


.calendar-weekdays,
.calendar-days {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(0, 1fr));
}


.calendar-weekdays > div {
  padding: .5rem;

  color: var(--bs-secondary-color);

  font-size: .75rem;

  font-weight: 600;

  text-align: center;
}


.calendar-day {
  position: relative;

  min-height: 70px;

  padding: .45rem;

  border-top: 1px solid var(--bs-border-color);

  border-left: 1px solid var(--bs-border-color);
}


.calendar-day:nth-child(7n) {
  border-right: 1px solid var(--bs-border-color);
}


.calendar-day:nth-last-child(-n + 7) {
  border-bottom: 1px solid var(--bs-border-color);
}


.calendar-number {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 26px;
  height: 26px;

  border-radius: 50%;

  font-size: .78rem;
}


.calendar-day.is-today .calendar-number {
  background: var(--bs-primary);

  color: #fff;

  font-weight: 600;
}


.calendar-day.other-month {
  color: var(--bs-secondary-color);

  opacity: .35;
}


.calendar-dots {
  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  margin-top: .35rem;

  padding-left: .25rem;
}


.calendar-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--dot-color);
}


.calendar-tip {
  display: flex;

  align-items: center;

  gap: .4rem;

  color: var(--bs-secondary-color);

  font-size: .75rem;
}


.calendar-tip-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--bs-secondary-color);
}


/* =====================================================
   手机端
   ===================================================== */

@media (max-width: 767.98px) {

  .checkin-header {
    align-items: flex-start;

    flex-direction: column;
  }


  .checkin-actions {
    width: 100%;
  }


  .checkin-actions .btn {
    flex: 1;
  }


  .project-info {
    align-items: flex-start;

    flex-direction: column;

    gap: 1rem;
  }


  .project-stats {
    width: 100%;

    justify-content: space-between;

    gap: .5rem;
  }


  .stat-item {
    min-width: 0;

    flex: 1;
  }


  .project-actions {
    justify-content: stretch;
  }


  .project-actions form {
    flex: 1;
  }


  .project-actions .btn {
    width: 100%;
  }


  .delete-project-area {
    align-items: flex-start;

    flex-direction: column;
  }


  .calendar-day {
    min-height: 52px;

    padding: .25rem;
  }


  .calendar-number {
    width: 22px;
    height: 22px;

    font-size: .7rem;
  }


  .calendar-dot {
    width: 6px;
    height: 6px;
  }

}


@media (max-width: 400px) {

  .checkin-actions {
    flex-direction: column;
  }


  .checkin-calendar {
    padding: .75rem;
  }


  .calendar-weekdays > div {
    padding: .3rem 0;

    font-size: .65rem;
  }


  .calendar-day {
    min-height: 46px;
  }

}