/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*= require simple_calendar */

/* Basic calendar styling */
.simple-calendar {
  table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    table-layout: fixed;

    th, td {
      padding: 8px;
      height: 40px;
      width: 14.28%; /* 100% / 7 days */
    }

    .day {
      height: 120px;
      vertical-align: top;
      width: 14.28%;
      word-wrap: break-word;
      overflow: visible; /* はみ出しを許可してつながりを表現 */
      padding: 4px 0px 4px 0px; /* 左右のpaddingを0にして隙間を完全に無くす */
      position: relative;

      &.today {
        background-color: #e3f2fd;
      }

      &.prev-month,
      &.next-month {
        color: #ccc;
        background-color: #f9f9f9;
      }

      &.wday-0 {
        color: #d32f2f;
      }

      &.wday-6 {
        color: #1976d2;
      }
    }
    .date-content {
      padding: 0 4px; /* date-contentにpaddingを移動 */
    }

    .date-number {
      margin-bottom: 4px;
      font-size: 14px;
    }

    .single-day-events {
      overflow: visible; /* goalの帯表示のためにはみ出しを許可 */
      margin: 0 -4px; /* goalイベントがセル境界まで伸びるように */
    }
  }
  .calendar-heading {
    .calendar-title {
      font-size: 35px;
      margin: 0 20px;
    }

    a {
      color: #1976d2;
      font-size: 1.2em;

      &:hover {
        color: #0d47a1;
      }
    }
  }

  /* Calendar events styling */
  .calendar-event {
    font-size: 15px;
    margin: 1px 0;
    padding: 3px 6px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);

    &.event-goal {
      background: #4CAF50;
      color: white;
      border-left: 3px solid #1B5E20;
      margin-bottom: 2px;
      position: relative;
      margin-right: 0; /* 右マージンを0に */
      margin-left: 0; /* 左マージンを0に */

      &.goal-start {
        border-radius: 4px 0 0 4px;
        margin-left: 4px; /* 日付番号との間隔確保 */

        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: -4px; /* セル境界を超えて伸ばす */
          bottom: 0;
          width: 4px;
          background: #4CAF50;
          z-index: 2;
        }
      }

      &.goal-continue {
        border-radius: 0;
        border-left: none;
        margin-left: 0; /* セル境界まで伸ばす */
        width: calc(100%); /* セル幅を超えて表示 */

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -4px;
          bottom: 0;
          width: 4px;
          background: #4CAF50;
          z-index: 2;
        }

        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: -4px; /* 右側も伸ばして接続 */
          bottom: 0;
          width: 4px;
          background: #4CAF50;
          z-index: 2;
        }
      }
    }

    &.event-todo {
      background: linear-gradient(135deg, #2196F3, #1976D2);
      color: white;
      border-left: 3px solid #0D47A1;
      white-space: normal; /* 改行を許可 */
      height: auto; /* 高さを自動調整 */
      word-wrap: break-word; /* 長い単語を改行 */
      overflow-wrap: break-word; /* より確実な改行 */
      min-height: 20px; /* 最小高さを確保 */
    }
  }
}

.goals-list {
  .goal-item {
    padding: 8px 12px;
    border-left: 4px solid #4CAF50;

    .goal-period {
      background: #4CAF50;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      margin-right: 12px;
    }

    .goal-title {
      color: #333;
    }

    .goal-progress {
      background: #007bff;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      margin-left: 8px;
    }
  }
}

.no-goals {
  padding: 8px 0;
}

/* メインカラー */
.btn-main {
  background-color: darkorange !important;
  border-color: darkorange !important;
  color: white !important;
}
.btn-outline-main {
  color: darkorange !important;
  border-color: darkorange !important;
  background-color: white !important;
}
.bg-main {
  --bs-bg-opacity: 1;
  --bg-main-rgb: 255, 140, 0;
  background-color: rgba(var(--bg-main-rgb), var(--bs-bg-opacity)) !important;
}
.border-main {
  border-color: darkorange !important;
}
.text-main {
  color: darkorange !important;
}