/* Link Biz - カレンダースタイル */

/* カレンダーコンテナ */
.calendar-page{display:flex;flex-direction:column;gap:1rem}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.calendar-nav{display:flex;align-items:center;gap:.5rem}
.calendar-title{font-size:var(--font-size-xl);font-weight:700;color:var(--text-primary);min-width:12rem;text-align:center}
.calendar-view-btns{display:flex;border:1px solid var(--border-color);border-radius:var(--border-radius);overflow:hidden}
.calendar-view-btn{background:none;border:none;padding:.4rem .9rem;font-size:var(--font-size-sm);font-weight:500;color:var(--text-secondary);cursor:pointer;border-right:1px solid var(--border-color);transition:background var(--transition),color var(--transition)}
.calendar-view-btn:last-child{border-right:none}
.calendar-view-btn.active,.calendar-view-btn:hover{background:var(--color-primary);color:#fff}
.calendar-filter{display:flex;align-items:center;gap:.5rem}

/* カレンダーグリッド（月表示） */
.calendar-grid{background:var(--bg-surface);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);overflow:hidden;box-shadow:var(--shadow-sm)}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:var(--bg-muted);border-bottom:1px solid var(--border-color)}
.calendar-weekday{padding:.6rem;text-align:center;font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.05em}
.calendar-weekday.sun{color:#ef4444}
.calendar-weekday.sat{color:var(--color-primary)}
.calendar-days{display:grid;grid-template-columns:repeat(7,1fr)}
.calendar-cell{min-height:6.5rem;border-right:1px solid var(--border-color);border-bottom:1px solid var(--border-color);padding:.4rem;cursor:pointer;transition:background var(--transition)}
.calendar-cell:hover{background:var(--color-primary-light)}
.calendar-cell:nth-child(7n){border-right:none}
.calendar-cell.other-month .cell-date{color:var(--text-muted)}
.calendar-cell.today .cell-date{background:var(--color-primary);color:#fff;border-radius:50%}
.calendar-cell.sunday .cell-date{color:#ef4444}
.calendar-cell.saturday .cell-date{color:var(--color-primary)}
.calendar-cell.holiday .cell-date{color:#ef4444}
.cell-date{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:var(--font-size-sm);font-weight:600;line-height:1}
.cell-events{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.cell-event{padding:1px 5px;border-radius:3px;font-size:0.7rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:opacity var(--transition);color:#fff;line-height:1.5}
.cell-event:hover{opacity:.85}
.cell-event.shared{opacity:.85}
.cell-more{font-size:var(--font-size-xs);color:var(--color-primary);padding:0 5px;cursor:pointer;font-weight:600}

/* 週表示 */
.calendar-week{background:var(--bg-surface);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);overflow:hidden;box-shadow:var(--shadow-sm)}
.week-header{display:grid;grid-template-columns:4rem repeat(7,1fr);border-bottom:1px solid var(--border-color);background:var(--bg-muted)}
.week-header-time{padding:.6rem;border-right:1px solid var(--border-color)}
.week-header-day{padding:.6rem;text-align:center;border-right:1px solid var(--border-color);font-size:var(--font-size-sm)}
.week-header-day:last-child{border-right:none}
.week-day-name{font-size:var(--font-size-xs);font-weight:700;text-transform:uppercase;color:var(--text-secondary);letter-spacing:.05em}
.week-day-num{font-size:var(--font-size-xl);font-weight:700;color:var(--text-primary);line-height:1.2}
.week-day-num.today{background:var(--color-primary);color:#fff;border-radius:50%;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;font-size:var(--font-size-base)}
.week-body{display:grid;grid-template-columns:4rem repeat(7,1fr);overflow-y:auto;max-height:60vh}
.week-time-labels{display:flex;flex-direction:column}
.week-time-label{height:3rem;border-bottom:1px solid var(--border-color);border-right:1px solid var(--border-color);font-size:.68rem;color:var(--text-muted);padding:0 .4rem;display:flex;align-items:flex-start;padding-top:.25rem}
.week-day-col{position:relative;border-right:1px solid var(--border-color)}
.week-day-col:last-child{border-right:none}
.week-hour-slot{height:3rem;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background var(--transition)}
.week-hour-slot:hover{background:var(--color-primary-light)}
.week-event{position:absolute;left:2px;right:2px;border-radius:4px;padding:2px 5px;font-size:.7rem;color:#fff;font-weight:500;overflow:hidden;cursor:pointer;z-index:1;transition:opacity var(--transition)}
.week-event:hover{opacity:.85;z-index:2}

/* イベント詳細ポップアップ */
.event-popup{position:fixed;background:var(--bg-surface);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-xl);padding:1.25rem;min-width:16rem;max-width:22rem;z-index:400;border:1px solid var(--border-color)}
.event-popup-header{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;margin-bottom:.75rem}
.event-popup-color{width:.75rem;height:.75rem;border-radius:50%;flex-shrink:0;margin-top:.3rem}
.event-popup-title{font-size:var(--font-size-base);font-weight:700;flex:1;line-height:1.4}
.event-popup-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:var(--font-size-lg);padding:.1rem}
.event-popup-info{font-size:var(--font-size-sm);color:var(--text-secondary);display:flex;flex-direction:column;gap:.4rem;margin-bottom:.75rem}
.event-popup-info i{width:1rem;color:var(--text-muted)}
.event-popup-actions{display:flex;gap:.5rem;justify-content:flex-end}

/* イベントフォーム */
.color-picker-row{display:flex;gap:.5rem;flex-wrap:wrap}
.color-swatch{width:1.75rem;height:1.75rem;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform var(--transition),border-color var(--transition)}
.color-swatch:hover,.color-swatch.selected{transform:scale(1.2);border-color:#fff;box-shadow:0 0 0 2px var(--color-primary)}

/* レスポンシブ */
@media(max-width:768px){
  .calendar-cell{min-height:4.5rem}
  .cell-event{display:none}
  .cell-events .cell-event:first-child{display:block}
  .calendar-week{overflow-x:auto}
  .week-header,.week-body{min-width:40rem}
}

/* -------------------------------------------------------
   ガントチャートスタイル
   ------------------------------------------------------- */

/* カスタムプロパティ */
.gantt-wrap {
    --gantt-label-w : 9rem;
    --gantt-col-w   : 3rem;
    --gantt-row-h   : 2.4rem;
    --gantt-bar-h   : 1.6rem;
}

/* オプション行（日数切替） */
.gantt-options {
    display       : flex;
    align-items   : center;
    gap           : .75rem;
    margin-bottom : .75rem;
    flex-wrap     : wrap;
}

.gantt-days-label {
    font-size   : var(--font-size-sm);
    font-weight : 600;
    color       : var(--text-secondary);
}

/* 横スクロールコンテナ */
.gantt-scroll {
    overflow-x           : auto;
    background           : var(--bg-surface);
    border               : 1px solid var(--border-color);
    border-radius        : var(--border-radius-lg);
    box-shadow           : var(--shadow-sm);
    -webkit-overflow-scrolling: touch;
}

/* ガント全体グリッドコンテナ */
.gantt-chart {
    min-width       : max-content;
    display         : flex;
    flex-direction  : column;
}

/* 各行（ヘッダー・ユーザー行共通） */
.gantt-row {
    display               : grid;
    border-bottom         : 1px solid var(--border-color);
    position              : relative;
    min-height            : var(--gantt-row-h);
    align-items           : stretch;
}

.gantt-row:last-child { border-bottom: none; }

/* 月ラベル行 */
.gantt-month-row {
    background : var(--bg-muted);
    min-height : 1.75rem;
}

.gantt-month-cell {
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : var(--font-size-xs);
    font-weight     : 700;
    color           : var(--text-secondary);
    border-left     : 1px solid var(--border-color);
    padding         : .2rem .3rem;
}

.gantt-month-cell:first-child { border-left: none; }

/* 日付ヘッダー行 */
.gantt-header-row {
    background : var(--bg-muted);
    min-height : 2.25rem;
    position   : sticky;
    top        : 0;
    z-index    : 10;
}

.gantt-date-cell {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    border-left     : 1px solid var(--border-color);
    padding         : .2rem 0;
    cursor          : default;
    line-height     : 1.2;
}

.gantt-date-num {
    font-size   : var(--font-size-sm);
    font-weight : 700;
    color       : var(--text-primary);
}

.gantt-date-day {
    font-size : .65rem;
    color     : var(--text-muted);
}

.gantt-date-cell.gantt-today .gantt-date-num {
    background    : var(--color-primary);
    color         : #fff;
    border-radius : 50%;
    width         : 1.6rem;
    height        : 1.6rem;
    display       : inline-flex;
    align-items   : center;
    justify-content: center;
}

.gantt-date-cell.gantt-sun .gantt-date-num,
.gantt-date-cell.gantt-sun .gantt-date-day { color: #ef4444; }

.gantt-date-cell.gantt-sat .gantt-date-num,
.gantt-date-cell.gantt-sat .gantt-date-day { color: var(--color-primary); }

/* ラベルセル（ユーザー名列） */
.gantt-label-cell {
    position         : sticky;
    left             : 0;
    background       : var(--bg-surface);
    z-index          : 5;
    border-right     : 2px solid var(--border-color);
    min-width        : var(--gantt-label-w);
    max-width        : var(--gantt-label-w);
}

.gantt-label-head {
    background : var(--bg-muted);
    z-index    : 11;
}

.gantt-user-cell {
    display         : flex;
    align-items     : flex-start;
    gap             : .4rem;
    padding         : .4rem .6rem;
    font-size       : var(--font-size-sm);
    font-weight     : 600;
    color           : var(--text-primary);
    white-space     : nowrap;
    overflow        : hidden;
    text-overflow   : ellipsis;
    border-bottom   : 1px solid var(--border-color);
}

.gantt-user-cell i {
    color      : var(--color-primary);
    font-size  : 1rem;
    margin-top : .15rem;
    flex-shrink: 0;
}

.gantt-user-cell span {
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

/* ユーザー行 */
.gantt-row-first { background: var(--bg-surface); }
.gantt-row-sub   { background: var(--bg-surface); min-height: calc(var(--gantt-row-h) * 0.9); }

/* 背景セル（週末・今日ハイライト） */
.gantt-bg-cell {
    grid-row   : 1;
    align-self : stretch;
    border-left: 1px solid var(--border-color);
}

.gantt-today-col { background: rgba(79,70,229,.06); }
.gantt-sun-col   { background: rgba(239,68,68,.04);  }
.gantt-sat-col   { background: rgba(79,70,229,.04); }

/* ガントバー */
.gantt-bar {
    grid-row        : 1;
    align-self      : center;
    height          : var(--gantt-bar-h);
    border-radius   : .35rem;
    display         : flex;
    align-items     : center;
    padding         : 0 .5rem;
    cursor          : pointer;
    transition      : opacity var(--transition), box-shadow var(--transition);
    overflow        : hidden;
    white-space     : nowrap;
    z-index         : 2;
    box-shadow      : 0 1px 3px rgba(0,0,0,.15);
    margin          : 0 2px;
}

.gantt-bar:hover {
    opacity    : .88;
    box-shadow : 0 2px 8px rgba(0,0,0,.22);
    z-index    : 3;
}

.gantt-bar-label {
    font-size     : .72rem;
    font-weight   : 600;
    color         : #fff;
    overflow      : hidden;
    text-overflow : ellipsis;
    flex          : 1;
    text-shadow   : 0 1px 2px rgba(0,0,0,.25);
}

.gantt-bar-icon {
    font-size   : .65rem;
    color       : rgba(255,255,255,.75);
    margin-left : .25rem;
    flex-shrink : 0;
}

/* 個人イベントバーは少し透明度を下げてストライプ模様で区別 */
.gantt-bar-personal {
    opacity          : .82;
    background-image : repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(255,255,255,.12) 4px,
        rgba(255,255,255,.12) 8px
    ) !important;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .gantt-wrap {
        --gantt-label-w : 6rem;
        --gantt-col-w   : 2.2rem;
        --gantt-row-h   : 2.2rem;
    }
}

/* -------------------------------------------------------
   独自休業日・半休の色
   ------------------------------------------------------- */

/* 月表示：半休セル */
.calendar-cell.halfday { background: repeating-linear-gradient(
    45deg, transparent, transparent 6px,
    rgba(245,158,11,.08) 6px, rgba(245,158,11,.08) 12px); }

/* 祝日名ラベル（月表示セル内） */
.cell-holiday-name {
    font-size   : .6rem;
    color       : #ef4444;
    display     : block;
    line-height : 1.2;
    white-space : nowrap;
    overflow    : hidden;
    text-overflow: ellipsis;
}

/* ガント：独自休業日ヘッダー強調 */
.gantt-date-cell.gantt-halfday .gantt-date-num,
.gantt-date-cell.gantt-halfday .gantt-date-day { color: #d97706; }

/* ガント：半休背景列 */
.gantt-halfday-col { background: rgba(245,158,11,.08); }

/* ガント：祝日名ミニラベル */
.gantt-holiday-name {
    font-size   : .6rem;
    color       : #ef4444;
    margin-left : 1px;
}

/* -------------------------------------------------------
   休業日バナー（時間軸ガント上部）
   ------------------------------------------------------- */
.gantt-holiday-banner {
    display       : flex;
    align-items   : center;
    gap           : .5rem;
    padding       : .6rem 1rem;
    background    : #fee2e2;
    color         : #991b1b;
    border-radius : var(--border-radius);
    margin-bottom : .75rem;
    font-size     : var(--font-size-sm);
    font-weight   : 600;
}

.gantt-halfday-banner {
    display       : flex;
    align-items   : center;
    gap           : .5rem;
    padding       : .6rem 1rem;
    background    : #fef3c7;
    color         : #92400e;
    border-radius : var(--border-radius);
    margin-bottom : .75rem;
    font-size     : var(--font-size-sm);
    font-weight   : 600;
}

/* -------------------------------------------------------
   時間軸ガントチャート
   ------------------------------------------------------- */
.gantt-chart-hour {
    min-width : max-content;
}

/* 時間ヘッダーセル */
.gantt-hour-cell {
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-left     : 1px solid var(--border-color);
    font-size       : var(--font-size-xs);
    font-weight     : 600;
    color           : var(--text-secondary);
    padding         : .3rem 0;
    min-width       : 2.5rem;
}

.gantt-hour-cell.gantt-hour-now {
    color      : var(--color-primary);
    font-weight: 800;
}

/* 時間軸の行 */
.gantt-hour-row {
    display     : grid;
    border-bottom: 1px solid var(--border-color);
    position    : relative;
    align-items : stretch;
}

/* 時間列ごとの背景セル */
.gantt-hour-bg-cell {
    border-left : 1px solid var(--border-color);
    min-width   : 2.5rem;
    min-height  : 2.75rem;
}

/* バーを配置するオーバーレイレイヤー */
.gantt-hour-bars-wrap {
    grid-column : 2 / -1;
    position    : relative;
}

/* 時間軸バー */
.gantt-hour-bar {
    position      : absolute;
    top           : 50%;
    transform     : translateY(-50%);
    height        : 1.6rem;
    border-radius : .35rem;
    display       : flex;
    align-items   : center;
    padding       : 0 .4rem;
    cursor        : pointer;
    overflow      : hidden;
    white-space   : nowrap;
    z-index       : 2;
    box-shadow    : 0 1px 3px rgba(0,0,0,.15);
    transition    : opacity .15s, box-shadow .15s;
    min-width     : .5rem;
}

.gantt-hour-bar:hover {
    opacity    : .88;
    box-shadow : 0 2px 8px rgba(0,0,0,.22);
    z-index    : 3;
}

.gantt-hour-bar-time {
    font-size   : .65rem;
    color       : rgba(255,255,255,.8);
    margin-left : .3rem;
    flex-shrink : 0;
}

/* 現在時刻ライン */
.gantt-now-line {
    position      : absolute;
    top           : 0;
    bottom        : 0;
    width         : 2px;
    background    : var(--color-danger);
    z-index       : 10;
    pointer-events: none;
}

.gantt-now-line::before {
    content      : '';
    position     : absolute;
    top          : 0;
    left         : -4px;
    width        : 10px;
    height       : 10px;
    background   : var(--color-danger);
    border-radius: 50%;
}